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

如何设计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>

如果您需要重新定义其内容，也可以这样做

建议：

部分视图非常棘手，如果其中一个或所有视图中声明了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>

$（函数（）{
EventBinder（）；
})
函数EventBinder（）{
$（'.clickable'）。单击（函数（）{
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）；
});
}

关于PartialView（出于演示目的，我使用了一个p1视图）

@{
随机r=新随机（）；
}
@ViewBag.P1

您可以根据需要使用数据属性。

---

希望这能对您有所帮助。

您可以使用ajax回调服务器，根据通过调用传递的数据更新部分视图。是的，我可以做到。然而，我想设计一个基于服务器响应的回调来更新多个视图。这种更新可以不同，比如更新一个视图的颜色，根据服务器的响应刷新另一个视图。我只知道一种方法一次从控制器返回一个部分视图。我猜如果你把部分作为字符串传递回去，你可以在一个调用中传递多个，但我认为这可能会变得很糟糕。为什么不试试angular js？@dhinesh ys，那么从ajax调用调用操作，以模型形式获取响应（数据），以字符串形式在json中应用哪个模板，识别模板，分配数据并显示。。

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>

@{
    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"/>