在 jquery.dialog 中加载局部视图 [英] Loading a partial view in jquery.dialog

问题描述

我是 mvc 的新手，正在尝试创建一个虚拟应用程序来学习 mvc 3.我已经完成了音乐商店示例，现在我正在尝试将其稍微扩展到更真实的应用程序中.在示例中，每当您想要任何新项目时，您都会被重定向到创建视图，这很好，但是我想要而不是进行整页回发，我想使用 jquery.dialog 打开一个模式弹出窗口，这将允许用户插入一个新项目.

到目前为止我有

 <div id="dialog" title="创建相册" style="overflow: hidden;">@Html.Partial("_CreateAlbumPartial")

问题是每次都加载部分视图而不是通过 ajax，我真的不知道我应该在哪里放置部分视图.它应该在共享位置还是在其他视图的文件夹中?如何更新控制器类以适应局部视图?

抱歉，如果这些很容易做到，我 3 天就可以进入 mvc 了 :)

解决方案

试试这个:

<div id="dialog" title="创建相册" style="overflow: hidden;">

我们使用了打开对话框时触发的 open 函数，在里面我们发送一个 AJAX 请求到一个控制器动作，它将返回部分:

public ActionResult CreateAlbumPartial(){返回视图(_CreateAlbumPartial")；}

I am a completely new to mvc and trying to create a dummy application to learn mvc 3. I have worked my way through the music store example and now I am trying to extend it slightly into a more real world application. With the example whenever you want to any new item you are redirected to the Create view which is fine however I want instead of doing a full page post back I want to use the jquery.dialog to open a modal popup which will allow the user to insert a new item.

so far I have

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

Problems with this is the partial view is loaded everytime not through ajax and I dont really know where I should be placing the partial view. Shoukld it be in the shared location or in the folder with the other views? How do I update the controller class to cater for the partial view?

Sorry if these are easy to do, im 3 days into mvc :)

解决方案

Try something like this:

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

We used the open function which is triggered when the dialog is opened and inside we send an AJAX request to a controller action which would return the partial:

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

这篇关于在 jquery.dialog 中加载局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！