MVC Partial View 中的更新模型答案

【问题标题】：MVC Partial View update model inMVC Partial View 中的更新模型
【发布时间】：2014-01-15 20:35:21
【问题描述】：

我想知道我怎样才能实现这样的目标？

我有一个 view1，其中有一个带有列表的表单和部分视图。

现在，当单击某个按钮时，我需要用另一个列表打开模态表单。通过选择模态表单中的元素之一，我需要更新 view1 中的列表并关闭模态表单。

【问题讨论】：

弹出窗口从哪里获取数据重要吗？从“主机”页面的模型还是通过 ajax 服务器调用？
最好来自服务器调用。
“一些按钮”在哪里 - 直接在 view1 的表单上，还是在部分视图中？

标签： c# asp.net-mvc-3 jquery asp.net-ajax

【解决方案1】：

以下是可能的解决方案的概述。选择你需要的。

view1 呈现的局部视图需要实现一个弹出对话框，以显示另一个局部视图。

所以从创建弹出部分开始。 Popup 的视图控制器会有这样的东西

// in FooController
public ActionResult PopupPartialViewName() 
{
    // prepare model for your pop-up
    return PartialView(PopUpModel);
}

在弹出视图中，您将拥有必须更新原始部分列表并关闭弹出窗口的可点击对象。你有很多变体如何实现这个，但想法是一样的 - 一些 HTML 元素将被分配 onclick javascript 处理程序，它将读取点击值并更新原始列表。

<ul id="popupClickableList">
    @foreach(var item in Model)// PopUpModel
    {
    <li>
        <input id="id@(item.ID)" type="checkbox" value="@item.ID" />                
        <label for="id@(item.ID)">@item.DisplayValue</label>
    </li>       
    }
<ul>

现在，在您的原始部分中，您需要弹出窗口的标记和打开它的链接或按钮，以及初始化和驱动弹出窗口的 javascript。在这个例子中我使用jQuery Dialog:

<!-- in your original partial -->
<div id="popupView"></div>
<a href="#" id="popUpShow">...</a>

<script type="text/javascript">
    $(function () {
        $('#popupView').dialog({
            autoOpen: false,
            resizable: false,
            modal: true
        });
         $('#popUpShow').click(function() {
            $('#popupView').load("@Url.Action("PopupPartialViewName")", function() { 

                // assign the click handler for popupView's clickable list
                $('#popupClickableList li').click(function() {
                    // get a hold of the clicked value
                    // update element in original list (it's here on this view)
                    $('#popupView').dialog('close');
                });

                $(this).dialog('open');
            });
            return false;
        });
     });
</script>

如果我下次午休有更多时间，我会将其放入 Visual Studio 中以使其完全正常工作:-)

【讨论】：