在jquery.dialog中加载部分视图

Question

我完全不会 MVC，正在尝试创建一个虚拟应用程序来学习 MVC 3。我已经按照音乐商店示例的方式进行了操作，现在我正在尝试将其稍微扩展成一个更真实的应用程序。

使用该示例时，每当您想要添加新项目时，都会重定向到Create视图，这很好，但是我希望在不进行完整页面回传的情况下，使用jquery.dialog打开一个模态弹出窗口，允许用户插入新项目。

到目前为止，我已经...

  <script type="text/javascript">

    $(function () {

        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: "hi there",
            modal: true,
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });
        $('#my-button').click(function () {
        $('#dialog').dialog('open');
        });}); </script>

     <div id="dialog" title="Create Album" style="overflow: hidden;">
    @Html.Partial("_CreateAlbumPartial")</div>

问题在于这个局部视图每次都是通过非 Ajax 加载的，而我并不知道应该将局部视图放在哪里。它应该放在共享位置还是与其他视图所在的文件夹中？ 如何更新控制器类以处理局部视图？

如果这些操作很容易，请见谅，我才刚接触 MVC 三天 :)

- Diver Dan

---

在这里发布了一种替代方法: http://stackoverflow.com/questions/10759742/load-and-edit-data-in-jquery-ui-dialog/10763559#10763559 - amarnath chatterjee

Answer 1

可以尝试像这样做：

<script type="text/javascript">
    $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'hi there',
            modal: true,
            open: function(event, ui) {
                //Load the CreateAlbumPartial action which will return 
                // the partial view _CreateAlbumPartial
                $(this).load("@Url.Action("CreateAlbumPartial")");
            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $('#my-button').click(function () {
            $('#dialog').dialog('open');
        });
    });
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">

我们使用了open函数，当对话框打开时触发，其中发送一个AJAX请求到一个控制器动作，该动作将返回部分内容：

public ActionResult CreateAlbumPartial()
{
    return View("_CreateAlbumPartial");
}

- Darin Dimitrov

---

谢谢Darin，为什么_layout.cshtml的样式会应用于局部视图？我以为它们应该像asp.net用户控件一样？当视图在不同文件夹中时，使用@Url.Content也可以吗？再次感谢您的帮助。 - Diver Dan

@user293545，您可以通过在部分视图中添加@{ Layout = null; }或在控制器操作中返回PartialView("_CreateAlbumPartial")来禁用此功能。 - Darin Dimitrov

Darin，我可以问一下关于传递参数到CreateAlbumPartial的问题吗？如果我有要传递给该Action的参数，你会怎么做？谢谢 - InspiredBy

@Shenaniganz，你可以使用视图模型。 - Darin Dimitrov

@Shenaniganz，这是我所做的：public ActionResult GetPatFormData(int id) { return PartialView("_PatDetails", vm); }在Jquery中：var url = '@Url.Action("GetPatFormData", "Pat")?id=' + patId; $("#PatDetailDialog").load(url, function (response, status, xhr) { $('#PatDetailDialog').dialog('open'); }); - Sandeep

Answer 2

为了改进Darin的回答，我们可以将div加载代码移动到按钮点击事件中。通过这种方式，对话框的所有位置算法都能够基于新文本进行工作，从而正确地放置对话框。

<script type="text/javascript">
   $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'hi there',
            modal: true,           
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $('#my-button').click(function () {
            //Load the CreateAlbumPartial action which will return 
            // the partial view _CreateAlbumPartial
            $('#dialog').load("@Url.Action("CreateAlbumPartial")", 
                    function (response, status, xhr) {
                        $('#dialog').dialog('open');
                    });   
        });
    });
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">

- Marco