在 jquery.dialog 中加载部分视图答案

【问题标题】：Loading a partial view in jquery.dialog在 jquery.dialog 中加载部分视图
【发布时间】：2011-01-26 08:00:04
【问题描述】：

我是一个全新的 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 加载的，我真的不知道应该将局部视图放在哪里。它应该在共享位置还是在与其他视图一起的文件夹中？如何更新控制器类以适应局部视图？

对不起，如果这些很容易做到，我 3 天进入 mvc :)

【问题讨论】：

在此处发布了另一种方法：stackoverflow.com/questions/10759742/…

标签： asp.net-mvc-3 razor

【解决方案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，为什么 _layout.cshtml 样式会应用于局部视图？我认为它们应该像 asp.net 用户控件？当视图位于不同的文件夹中时，也可以使用 @Url.Content 吗？再次为您的帮助喝彩
太棒了，这一切都慢慢地融合在一起了:)这两种方法都有性能问题吗？还是它们都相似
谢谢。你也可以回复stackoverflow.com/questions/9413467/…吗？
达林，我能问一下将参数传递给 CreateAlbumPartial 吗？如果我有参数要传递给那个动作，你会怎么做？谢谢

【解决方案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;">

【讨论】：