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