在右侧窗格中,有一个ParentPage
显示PartialViewA
。
在PartialViewA
中有一个下拉列表。选择某些值后,我想将PartialViewA
替换为PartialViewB
。这可能吗?我该怎么办?
我尝试过:
(PartialViewA
:)
<script>
$(document).ready(function () {
alert('aa');
$("#drpisEmpty").change(function () {
if ($(this).val() == "loaded") {
alert($(this).val());
}
else {
window.location.href = '@Url.Action("PartialViewB", "ParentController", new { CargoType = "PartialViewA" })';
}
});
});
</script>
CallCargoTypePartialView:(ParentController)
public ActionResult CallCargoTypePartialView(string CargoType)
{
if (CargoType == "PartialViewA")
{
return View("_PartialViewA");
}
else if (CargoType == "PartialViewB")
{
return View("_PartialViewB");
}
return View("_PartialViewA");
}
我面临的问题是,当我从PartialViewB或verce中调用PartialViewA时,整个页面(连同父项)都被PartialView的外部替换。
答案 0 :(得分:1)
此行出现问题:
window.location.href = '@Url.Action("PartialViewB", "ParentController", new { CargoType = "PartialViewA" })';
通过使用location.href
,您将用控制器操作返回的页面替换现有页面中的整个元素,因此现有视图被新视图覆盖。
假设您具有以下设置:
<div id="partial">
@Html.Partial("_PartialViewA")
</div>
然后,您需要在else
块内执行AJAX回调,并将其附加到success
由先前部分视图的占位符标记的结果内,如下例所示:
<script>
$(document).ready(function () {
alert('aa');
$("#drpisEmpty").change(function () {
if ($(this).val() == "loaded") {
alert($(this).val());
}
else {
$.ajax({
type: 'GET',
url: '@Url.Action("CallCargoTypePartialView", "ParentController")',
data: { CargoType: "PartialViewB" }, // example passed data
success: function (result) {
// replace first partial view with the second one
$('#target').html(result);
},
error: function (...) {
// error handling
}
});
}
});
});
</script>
还要注意,您应该返回PartialView()
而不是View()
:
public ActionResult CallCargoTypePartialView(string CargoType)
{
if (CargoType == "PartialViewA")
{
return PartialView("_PartialViewA");
}
else if (CargoType == "PartialViewB")
{
return PartialView("_PartialViewB");
}
return PartialView("_PartialViewA");
}