在 ASP.NET MVC 中刷新多个局部视图

Question

提前致谢。

我正在开发类似于亚马逊上的产品过滤器视图。我刷新了多个视图，但所有局部视图的数据来自单个 ajax 调用如何刷新多个局部视图。我可以完全刷新主要内容区域，但不应该刷新某些部分视图。

Answer 1

我将其分解为多个步骤，以便您可以关注/修改并添加您的部分内容，例如 here。首先，添加 3 个 Partial View，它们的代码相同，如下所示，

@model int
<div class="container fluid">
    <h1>PartialDemo@(Model)</h1>
    <h3>The views will all update when you click update button below</h3>
</div>

---

DashboardWidgets.cshtml，如下代码，无论你的csthml页面是什么

//<div class="row-fluid">
// <div class="col">
<div id="WidgetID_1" class="container">
    @Html.Partial("_PartialWidget1", 1)
</div>
<div id="WidgetID_2" class="container">
    @Html.Partial("_PartialWidget2", 2)
</div>
<div id="WidgetID_3" class="container">
    @Html.Partial("_PartialWidget3", 3)
</div>
<div id="WidgetID_4" class="container">
    @Html.Partial("_PartialWidget3", 4)
</div>
//</div> // the col
//</div> // the row

// lcik below button to update the partials above
// *****  One button will update them all like you wanted
<button type="button" onclick="UpdateMyWidgets()" class="btn btn-primary">Update All Partial View Views</button>

@section scripts{
    <script type="text/javascript">
        // this one button will update all your partials/widgets, you can add more partials in this function and just copy paste.
        function UpdateMyWidgets() {
            $.ajax({
                url: "@Url.Action("Widget1")",    // whom to call
                type: "POST",
                datatype: "HTML",
                success: function (data) {
                    $("#WidgetID_1").html(data);  // tell it which div to append on return
                }
            })
            $.ajax({
                url: "@Url.Action("Widget2")",
                type: "POST",
                datatype: "HTML",
                success: function (data) {
                    $("#WidgetID_2").html(data);
                }
            });
            $.ajax({
                url: "@Url.Action("Widget3")",
                type: "POST",
                datatype: "HTML",
                success: function (data) {
                    $("#WidgetID_3").html(data);
                }
            });
        }
    </script>
}

当点击“Update All Partial View Views”按钮时，会调用“更新”方法。如果成功，返回的数据将替换div的内容

---

后端操作 ajax 请求。

// these actions get called from the Update Buttons
public ActionResult Widget1()   
{
     return PartialView("_PartialWidget1", 11);
}
public ActionResult Widget2()
{
     return PartialView("_PartialWidget2", 21);
}
public ActionResult Widget3()
{
     return PartialView("_PartialWidget3", 31);
}