我正在关注this standard pattern使用Ajax重新加载局部视图。但是,重新加载局部视图时,视图中的控件具有不同的ID。他们失去了父模型的名称。这意味着当回发表单时,模型绑定将不起作用。
所以在下面的例子中,当首次加载页面时,复选框id是“PenguinEnclosure_IsEnoughPenguins”,但是在重新加载部分之后,复选框id是“IsEnoughPenguins”ID必须是“PenguinEnclosure_IsEnoughPenguins”才能进行模型绑定以正确地将其绑定到VM的PenguinEnclosure属性。
模型:
public class ZooViewModel
{
public string Name { get; set; }
public PenguinEnclosureVM PenguinEnclosure { get; set; }
}
public class PenguinEnclosureVM
{
public int PenguinCount { get; set; }
[Display(Name = "Is that enough penguins for you?")]
public bool IsEnoughPenguins { get; set; }
}
控制器:
public ActionResult Index()
{
var vm = new ZooViewModel
{
Name = "Chester Zoo",
PenguinEnclosure = new PenguinEnclosureVM { PenguinCount = 7 }
};
return View(vm);
}
public ActionResult UpdatePenguinEnclosure(int penguinFactor)
{
return PartialView("DisplayTemplates/PenguinEnclosureVM", new PenguinEnclosureVM { PenguinCount = penguinFactor * 10 });
}
视图:
@model PartialProblem.Models.ZooViewModel
@Scripts.Render("~/bundles/jquery")
<p>
Welcome to @Model.Name !
</p>
<p>
<div id="penguin">
@Html.DisplayFor(m => m.PenguinEnclosure)
</div>
</p>
<button id="refresh">Refresh</button>
<script>
$(document).ready(function () {
$("#refresh").on("click", function () {
$.ajax({
url: "/Home/UpdatePenguinEnclosure",
type: "GET",
data: { penguinFactor: 42 }
})
.done(function (partialViewResult) {
$("#penguin").html(partialViewResult);
});
});
});
</script>
局部视图:
@model PartialProblem.Models.PenguinEnclosureVM
<p>
We have @Model.PenguinCount penguins
</p>
<p>
@Html.LabelFor(m => m.IsEnoughPenguins)
@Html.CheckBoxFor(m => m.IsEnoughPenguins)
</p>
我使用的方法是在响应您的ajax调用(UpdatePenguinEnclosure)的操作中设置“ViewData.TemplateInfo.HtmlFieldPrefix”属性。这告诉Razor为控件名称和/或ID添加前缀。
您可以选择是否对HtmlFieldPrefix进行硬编码,或将其传递给ajax调用中的操作。我倾向于做后者。例如,在页面上添加一个隐藏的输入及其值:
<input type="hidden" id="FieldPrefix" value="@ViewData.TemplateInfo.HtmlFieldPrefix" />
在你的ajax调用中访问它:
$.ajax({
url: "/Home/UpdatePenguinEnclosure",
type: "GET",
data: { penguinFactor: 42, fieldPrefix: $("#FieldPrefix").val() }
})
然后在你的行动中:
public ActionResult UpdatePenguinEnclosure(int penguinFactor, string fieldPrefix)
{
ViewData.TemplateInfo.HtmlFieldPrefix = fieldPrefix;
return PartialView("DisplayTemplates/PenguinEnclosureVM", new PenguinEnclosureVM { PenguinCount = penguinFactor * 10 });
}
试试这个:控制器:
public ActionResult UpdatePenguinEnclosure(int penguinFactor)
{
PenguinEnclosureVM pg = new PenguinEnclosureVM { PenguinCount = penguinFactor * 10 };
return PartialView("DisplayTemplates/UpdatePenguinEnclosure", new ZooViewModel { PenguinEnclosure = pg });
}
你的偏爱:
@model PartialProblem.Models.ZooViewModel
<p>
We have @Model.PenguinEnclosure.PenguinCount penguins
</p>
<p>
@Html.LabelFor(m => m.PenguinEnclosure.IsEnoughPenguins)
@Html.CheckBoxFor(m => m.PenguinEnclosure.IsEnoughPenguins)
</p>
我认为这样做会有所帮助