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

Design client side for updating multiple partial views with ajax

本文关键字：更新 个局 视图 ajax 客户端      更新时间：2023-09-26

如何设计用于更新多个局部视图的ASP.NET MVC？

类似于基于客户端对视图的操作，如何更新其他局部视图。

示例：假设有3个局部视图，选中其中一个局部视图中的复选框后，其他2个局部视图应该得到更新。

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

有没有支持这种事件的js框架，或者两个视图是如何相互对话的？

请记住，因为这些是局部视图并不意味着它们不属于当前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代码，那么删除部分视图也没关系。变量、方法、对象等将保留在内存中，不会随它一起删除。

已更新

尝试使用数据属性

例如：让部分视图返回的动作在主控制器中作为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"/>

您可以根据需要使用数据属性。希望这能对你有所帮助。

相关文章：