中的MVC局部视图更新模型

Question

我想知道如何达到这样的目标？

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

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

Answer 1

以下概述了可能的解决方案。 选择您需要的东西。

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

因此，首先创建弹出窗口部分。 弹出窗口的视图控制器将具有以下内容

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

在弹出窗口视图中，您将具有可点击对象，这些对象必须更新原始部分的列表并关闭弹出窗口。 您有多种变体来实现此目的，但思路是相同的-将为HTML元素分配onclick javascript处理程序，该处理程序将读取clicked值并更新原始列表。

<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中以使其完全工作:-)