[英]Refreshing multiple partial views in ASP.NET MVC
Thanks in advance.提前致谢。
I am working on a product filter view similar to some thing like on amazon.我正在研究类似于亚马逊的产品过滤器视图。 where I have refresh multiple views but the data for all the partial view come from single ajax call how to refresh multiple partial view.我刷新了多个视图,但所有局部视图的数据来自单个 ajax 调用如何刷新多个局部视图。 I can refresh main content area completely but some partial views are not supposed to be refreshed.我可以完全刷新主要内容区域,但不应该刷新某些部分视图。
I broke it down into steps so you can follow/modify and add your partials like here .我把它分解成几个步骤,这样你就可以像这里一样跟随/修改和添加你的部分。 First, add 3 Partial Views, they have the same code like below,首先,添加 3 个局部视图,它们具有相同的代码,如下所示,
@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, the code like below, whatever your csthml page is 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>
}
When click the " Update All Partial View Views
" button, it will call "Update" method.当单击“ Update All Partial View Views
”按钮时,它将调用“更新”方法。 If success, the return data will replace div's content如果成功,返回的数据将替换 div 的内容
Backend action ajax request.后端操作 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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.