如何在 MVC 中打开 jquery 对话框答案

【问题标题】：How to open a jquery dialog in MVC如何在 MVC 中打开 jquery 对话框
【发布时间】：2011-03-17 21:12:41
【问题描述】：

我有一个 aspx 页面和 UserControl [它包含一个按钮，文本框] 并将 userControl 添加到 aspx 页面上

所以当我单击 aspx 页面中的按钮时，它应该对控制器进行 Jquery ajax 调用以打开一个对话框。

我该怎么做......在这个我们必须调用控制器

【问题讨论】：

这里有东西：stackoverflow.com/questions/8541821/…

标签： jquery

【解决方案1】：

这很简单 - 您创建一个将作为实际对话内容的部分视图（我们称之为 MyDialogPV） - 在控制器中创建一个返回 PartialView (GetMyDialogPV) 的方法 - 您使用 ajax 调用 PartialView 并在运行时将其呈现为对话框（在示例中我使用 JqueryUI 插件）。

控制器代码：

public PartialViewResult GetMyDialogPV() { 
        //do some stuff, probably you'll need to set up a model given input parameters
        ViewBag.Text = "This is my dialog text, opened at " + DateTime.Now.ToLongTimeString();
        //retunr the partialview rendered
        return PartialView("MyDialogPV");
    }

对话框的局部视图：

<div>Title</div>
<div>
    @ViewBag.Text
</div>

父页面代码：

@{ViewBag.Title = "Home Page";}
<script>
$(document).ready(function () {
    $('#lod').click(function () { //click event of the link            
        //load the dialog via ajax
        $.ajax({
            url: '@(Url.Action("GetMyDialogPV"))',
            type: "GET",
            dataType: "html",
            cache: false,
            success: function (data) {
                $('#myDialogContainer').html(data); //write the dialog content into the diaog container
                $("#myDialogContainer").dialog({ //dialogize it with JqueryUI
                    autoOpen: false,
                    height: 400,
                    width: 450,
                    modal: true,
                    buttons: {
                        "Chiudi": function () { $(this).dialog("close"); }
                    },
                    close: function () { }
                });
                $("#myDialogContainer").dialog("open"); //open it!
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert('Error');
            }
        });
    });
});
</script>
<a id="lod">Load And Open Dialog</a>
<div id='myDialogContainer' style="background:red">this is the container for the html retrieved by the controller action GetMyDialogPV</div>

【讨论】：