在jquery.dialog中加载局部视图

Question

我是一个全新的mvc,并试图创建一个虚拟应用程序来学习mvc 3.我已经通过音乐商店的例子,现在我试图将它稍微扩展到一个更真实的世界应用程序.有了这个例子你想要任何新项目,你被重定向到创建视图,这是好的,但我想要而不是做一个完整的页面回发我想使用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加载局部视图而我真的不知道应该放置局部视图的位置.Shoukld它在共享位置或与其他视图的文件夹中？如何更新控制器类以满足局部视图？

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

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");
}

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;">