通过 Ajax 重新加载部分视图：部分中的控件已重命名

Question

我正在关注 this standard pattern 使用 Ajax 重新加载部分视图。但是，当重新加载分部视图时，视图中的控件具有不同的 ID。他们失去了父模型的名称。这意味着当表单回发时，模型绑定将不起作用。

因此在下面的示例中，当页面首次加载时，复选框 ID 为 "PenguinEnclosure_IsEnoughPenguins" 但部分重新加载后，复选框 ID 为 "IsEnoughPenguins" ID 必须为 [=28] =] 用于模型绑定以将其正确绑定到 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>

Answer 1

试试这个：控制器：

    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>

我认为这会成功

Answer 2

我使用的一种方法是在响应您的 ajax 调用 (UpdatePenguinEnclosure) 的操作中设置 "ViewData.TemplateInfo.HtmlFieldPrefix" 属性。这告诉 Razor 为您的控件名称添加前缀 and/or IDs.

您可以选择是对 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 });
}

通过 Ajax 重新加载部分视图：部分中的控件已重命名

Reload partial view via Ajax: controls in partial are renamed

ajax

asp.net-mvc

partial-views