Перезагрузить частичное представление через Ajax: элементы управления в частичном переименованы

Question

Я следую этому стандартному шаблону за использование Ajax для перезагрузки частичного представления.Однако, когда частичное представление перезагружается, элементы управления в представлении имеют разные идентификаторы.Они теряют название родительской модели.Это означает, что когда форма отправляется обратно, привязка модели не будет работать.

Таким образом, в приведенном ниже примере, когда страница загружается в первый раз, идентификатором флажка является «PenguinEnclosure_IsEnoughPenguins», но после частичной перезагрузки,идентификатор флажка «IsEnoughPenguins» Идентификатор должен быть «PenguinEnclosure_IsEnoughPenguins» для привязки модели, чтобы правильно связать это со свойством 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

Подход, который я использовал, - установить свойство «ViewData.TemplateInfo.HtmlFieldPrefix» в действии, которое отвечает на ваш вызов ajax (UpdatePenguinEnclosure). Это говорит Razor префикс ваших имен и / или идентификаторов элементов управления.

Вы можете выбрать, следует ли жестко кодировать 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 });
}

Answer 2

Попробуйте это: Контроллер:

    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>

Думаю, это сработает