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它在共享位置或与其他视图的文件夹中？如何更新控制器类以满足局部视图？

很抱歉，如果这些很容易，我可以在3天内进入mvc：）

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

在jquery.dialog中加载局部视图

2 个答案: