MVC 4 - 将视图模型从视图页面传递到 jQuery 弹出窗口并再次返回答案

【问题标题】：MVC 4 - Passing view model from view page to jQuery popup and back againMVC 4 - 将视图模型从视图页面传递到 jQuery 弹出窗口并再次返回
【发布时间】：2012-06-18 20:19:15
【问题描述】：

我有一个绑定到视图模型的视图。在那个视图上，我有一个链接，它将弹出一个模态 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 modal popup）。第二步是在对话框关闭后将更新后的模型传回视图。

【问题讨论】：

标签： asp.net-mvc-3 razor asp.net-mvc-4

【解决方案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');
    });
});

【讨论】：

【解决方案2】：

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

或者，只修改ZipLocator action 方法的参数，使其接受字符串等“简单”对象，然后在 action 方法中实例化复杂对象，会更简单。

我不知道 VB 中的等价物，但在 C# 中，您可以像这样修改您的操作：

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

【讨论】：