Question

我有一个绑定到视图模型的视图。在该视图中，我有一个链接，它将弹出一个模态jquery对话框（使用局部视图）。

我需要的是能够将模型传递给模型弹出窗口，更新它，然后将其传递回视图页面。

我的模态弹出窗口在我的控制器中加载了一个动作方法（局部视图）。但是努力将模型传递给它。

有什么建议吗？

非常感谢。

脚本（在浏览页面上）：

// ZipLocator modal popup
$(function () {
    $('#ZipLocatorDialog').dialog({
        autoOpen: false,
        width: 400,
        resizable: false,
        draggable: false,
        title: 'hi there',
        modal: true,
        show: { effect: 'blind' },
        open: function (event, ui) {
            // Load the ZipLocator action which will return the partial view _ZipLocator
            $(this).load('@Url.Action("ZipLocator", "Shop", New With { .area = "Shop"})');
        },
        buttons: {
            "Close": function () {
                $(this).dialog('close');
            }
        }
    });

    $('#ZipLocatorOpener').click(function () {
        $('#ZipLocatorDialog').dialog('open');
    });
});

部分视图的控制器操作：

<HttpGet()>
    <Compress()>
    Public Function ZipLocator(model As ShopModel) As ActionResult

        Return PartialView("~/Areas/Shop/Views/Shared/Partials/Popups/_ZipLocator.vbhtml", model)

    End Function

正如我所说，jQuery模式弹出窗口正在工作，我只是很难将模型传递给它。

第一步是将模型传递给局部视图（jQuery模式弹出窗口）。第二步是在解除对话框后将更新的模型传递回视图。

Answer 1

在阅读了一些文档并进一步研究之后，jQuery UI对话框中有一个数据参数。

// ZipLocator modal popup
$(function () {
    $('#ZipLocatorDialog').dialog({
        autoOpen: false,
        width: 400,
        resizable: false,
        draggable: false,
        title: 'hi there',
        modal: true,
        **data: $("#ShopPane").serialize(),**
        show: { effect: 'blind' },
        open: function (event, ui) {
            // Load the ZipLocator action which will return the partial view _ZipLocator
            $(this).load('@Url.Action("ZipLocator", "Shop", New With { .area = "Shop"})');
        },
        buttons: {
            "Close": function () {
                $(this).dialog('close');
            }
        }
    });

    $('#ZipLocatorOpener').click(function () {
        $('#ZipLocatorDialog').dialog('open');
    });
});

Answer 2

您将需要使用AJAX POST将“复杂”模型发送到您的控制器操作 - GET将无效（这是.Load正在使用的）。

或者，仅修改ZipLocator动作方法的参数以使其接受像字符串这样的“简单”对象，然后在动作方法中实例化复杂对象将更加简单。

我不知道VB中的等价物，但在C＃中你会修改你的动作：

[HttpGet]
public ActionResult(string areaName)
{
   var model = new ShopModel { Area = areaName };
    Return PartialView("~/Areas/Shop/Views/Shared/Partials/Popups/_ZipLocator.vbhtml", model);
}

MVC 4 - 将视图模型从视图页面传递到jQuery弹出窗口，然后再返回

2 个答案: