ASP.NET Mvc jquery ui dialog as view or partialvie

Question

I want to show view or partialview on dialog. There is an example in ASP.NET Mvc 4 default template (AjaxLogin.js). AjaxLogin.js catches if login is ajax. And runs jsonresult or actionresult. AjaxLogin control this with passing parameter to dialog. So passing parameter is important for me.

Is there a problem with my use of this library for my specified forms. Or is there another js library about this topic?

I m new about jquery ui. I m using AjaxLogin.js in my project now, for other forms. And they work. Should I continue to use.

Thanks.

Answer 1

You may use jQuery UI library for the dialog. It is simple as this

1) Add a reference to the jQuery UI library( Refer from the CDN/LocalCopy) in the page/layout

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

2)Add a specific class to the links so that we can use that as a jQuery selector

@Html.ActionLink("Email", "Details", "Customers", null, new { @class = "popupLinks" })

3) Bind the Diloag functionality to those links on the DOM ready event

<script type="text/javascript">
    $(function(){
        $(".popupLinks").click(function (e) {
            var url = this.href;
            var dialog = $("#dialog");
            if ($("#dialog").length == 0) {
                dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
            }
            dialog.load(
                url,
                {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
                function (responseText, textStatus, XMLHttpRequest) {
                    dialog.dialog({                       
                        close: function (event, ui) {                            
                            dialog.remove();
                        },
                        modal: true,                            
                         width: 460, resizable: false
                    });
                }
            );           
            return false;           
        });
    });
    </script>

Now clicking on the link will show the content of the result of Details action method of Customers controller. ( you may change this according to your scenario)

Answer 2

If you are comfortable with the functionality and it works for you, then go for it. I haven't used the ajaxlogin.js, so I can't comment directly on it, but I have used FancyBox as my modal dialog for displaying partial views with great success.