MVC部分视图更新模型

时间:2014-01-15 20:35:22

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

我想知道我怎么能得到这样的东西?

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

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

1 个答案:

答案 0 :(得分:0)

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

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