ASP.NET Mvc jquery ui对话框作为视图还是部分视图?

Ali*_*hşi 1 asp.net-mvc jquery-ui partial-views jquery-ui-dialog

我想在对话框上显示视图或部分视图.ASP.NET Mvc 4默认模板(AjaxLogin.js)中有一个示例.如果login是ajax,AjaxLogin.js会捕获.并运行jsonresult或actionresult.AjaxLogin通过将参数传递给对话框来控制它.所以传递参数对我来说很重要.

我的指定表单使用此库是否有问题.或者是否有关于此主题的另一个js库?

我是关于jquery ui的新手.对于其他形式,我现在在我的项目中使用AjaxLogin.js.他们工作.我应该继续使用吗?

谢谢.

Shy*_*yju 8

您可以使用jQuery UI库进行对话.这很简单

1)在页面/布局中添加对jQuery UI库的引用(参见CDN/LocalCopy)

<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" />
Run Code Online (Sandbox Code Playgroud)

2)向链接添加一个特定的类,以便我们可以将其用作jQuery选择器

@Html.ActionLink("Email", "Details", "Customers", null, new { @class = "popupLinks" })
Run Code Online (Sandbox Code Playgroud)

3)将Diloag功能绑定到DOM ready事件上的那些链接

<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>
Run Code Online (Sandbox Code Playgroud)

现在点击链接将显示控制器Details动作方法结果的内容Customers.(你可以根据你的情况改变这个)