Question

如何设计ASP.NET MVC以更新多个部分视图？

喜欢基于视图上的客户端操作，如何更新其他部分视图。

示例：假设有3个局部视图，并且在其中一个局部视图中选中复选框时，其他2个局部视图应该更新。

我是否必须为不同的视图设计不同的Javascript模块，然后从一个局部视图中提升事件，然后订阅其他两个部分视图？

是否有任何支持这类事件的js框架，或两个视图如何相互通信？

Answer 1

请记住，因为那些是部分视图并不意味着它们不属于当前的DOM。

这意味着如果我有这个js

function ClickEventListener(partialView)
{
alert(partialView.innerHTML);
}

我有这个：

    <div id="view_1" onclick="ClickEventListener(this)">
<!--Your content-->
    </div>

    <div id="view_2" onclick="ClickEventListener(this)">
<!--Your content-->
    </div>

    <div id="view_3" onclick="ClickEventListener(this)">
<!--Your content-->
    </div>

会正常工作。考虑到这一点，你可以相互联系部分视图，编辑其内容（分配id或类，这取决于你想要它），你可以只有一个ajax请求服务器响应和编辑所需的局部视图

这里的例子：

这些已经显示的3个视图

    <div id="view_1" onclick="ClickEventListener(this)">
<!--Your content-->
    </div>

    <div id="view_2" onclick="ClickEventListener(this)">
<!--Your content-->
    </div>

    <div id="view_3" onclick="ClickEventListener(this)">
<!--Your content-->
    </div>

<script>

            function ClickEventListener(partialView)
            {

    var id;
        // base on which partial was click, send request the server a background color for example
                $.get('localhost/ChangeBGColor',{id: $(partialView).prop('id')},function(response){
    $(response.partialTarget).css({background:response.color});
    })

        }
            }

<script>

服务器：

public JsonResult ChangeBGColor(int id){
object response;
switch(id)
{
case 1:
response = new { partialTarget= 'view_2',color = 'blue'};
break;
case 2:
response = new { partialTarget= 'view_3',color = 'black'};
break;
case 3:
response = new { partialTarget= 'view_1',color = 'green'};
break;
}

return Json(response,JsonRequestBehavior.AllowGet);

}

如果您需要重新制作其内容，也可以这样做。

建议：

部分视图非常棘手，如果您在其中一个或所有这些中声明了javascript代码，则删除部分视图无关紧要。变量，方法，对象等等都会留在内存中，不会随之删除它。

Answer 2

更新

尝试使用数据属性

例如：让部分视图返回的动作在主控制器中作为p1，p2，p3 您可能需要将值传递给这些操作。这些操作所依赖的因素可以存储在数据属性中。

public ActionResult Index()
    {
        return View();
    }
    public ActionResult p1(int id)
    {
        ViewBag.P1 = id;
        return PartialView();
    }
    public ActionResult p2(string id)
    {
        ViewBag.P1 = id;
        return PartialView("p1");
    }
    public ActionResult p3(int id)
    {
        ViewBag.P1 = id;
        return PartialView("p1");
    }

在索引视图

    <input type="checkbox" class="clickable" data-val1="12" data-val2="hello1" data-val3="1" />
    <input type="checkbox" class="clickable" data-val1="13" data-val2="hello2" data-val3="2" />
    <input type="checkbox" class="clickable" data-val1="14" data-val2="hello3" data-val3="3" />
    <div id="partialContainer1"></div>
    <div id="partialContainer2"></div>
<div id="partialContainer3"></div>

 <script>
    $(function () {
        EventBinder();
    })

    function EventBinder() {
        $('.clickable').click(function () {
            var dataval1 = $(this).data('val1');
            var dataval2 = $(this).data('val2');
            var dataval3 = $(this).data('val3');
            $("#partialContainer1").load("/home/p1/" + dataval1,EventBinder);
            $("#partialContainer2").load("/home/p2/" + dataval2,EventBinder);
            $("#partialContainer3").load("/home/p3/" + dataval3,EventBinder);

        });
    }
</script>

在PartialView上（出于演示目的，我使用了单个p1视图）

@{
    Random r = new Random();
}

<h2>@ViewBag.P1</h2>
<input type="checkbox" class="clickable" data-val1="@r.Next(30)" data-val2="@r.Next(30)" data-val3="@r.Next(30)" value="Hi2"/>

您可以根据自己的要求使用数据属性。希望这对你有帮助。

设计客户端以使用ajax更新多个部分视图

2 个答案:

更新