ASP.NET Core 2部分视图列表模型绑定

Question

I have a model which has a list of models public List<BaseModuleModel> modules { get; set; } public List<BaseModuleModel> modules { get; set; }

In my razor file I do a for each loop on all of these modules and then generate the partial view of them and pass in the model.

@foreach (BaseModuleModel module in Model.modules)
        {
            <div class="section row col-lg-8">
                <div class="section-header">
                    <p class="header-text">@module.PartialName</p>
                </div>
                <div class="row col-lg-12 section-content">
                    @await Html.PartialAsync("~/Views/Partials/" + module.PartialName + "Partial.cshtml", module)
                </div>
            </div>
        }

This all works as intended. But when I submit my form the partial view does not change any variables of the BaseModuleModels in the list and all of them still have all variables set to null.

How do I make it so even these partial views bind when I click submit my form.

Partial view:

@model Lidmaatschap.Models.modules.VoorwaardenModule

<div class="row col-lg-12 section-content">
    <div class="col-lg-6">
        <label asp-for="PrivacyStatement" class="control-label"></label><br />
        <input asp-for="PrivacyStatement" type="checkbox" value="false" /> Ik ga akkoord met de privacy voorwaarden.
        <span asp-validation-for="PrivacyStatement" class="text-danger"></span>
    </div>
    <div class="col-lg-6">
        <label asp-for="FirstName" class="control-label"></label>
        <input asp-for="FirstName" class="form-control wide-full" />
        <span asp-validation-for="FirstName" class="text-danger"></span>
    </div>
</div>

The Model class:

public class VoorwaardenModule : BaseModuleModel
    {
        public VoorwaardenModule() : base("Voorwaarden")
        {

        }

        [Display(Name = "Privacy Verklaring")]
        //[Range(typeof(bool), "true", "true", ErrorMessage = "Je moet akkoord gaan met het privacy beleid om door te gaan.")]
        public bool PrivacyStatement { get; set; }

        [Display(Name = "Voornaam")]
        [Required]
        public string FirstName { get; set; }
    }

My Index.cshtml: https://pastebin.com/ErXcJz0a

MemberModel.cs : https://pastebin.com/KaSVUV6Q

HomeController.cs : https://pastebin.com/YNxJPvmX

Answer 1

The partial view needs the parent context to name the form fields properly. By default, it's just going to use the property name of the model that's passed into, so your PrivacyStatement -bound input will have name="PrivacyStatement" , when what you actually need is name="modules[N].PrivacyStatement" , in order to properly bind it back on post. As such, you have two issues.

First, you cannot use foreach . The partial view is going to need the index of the item in the list, which means you need to actually pass it an indexed item, ie modules[N] . Second, you need to supply the HtmlFieldPrefix from the parent view, while that's possible to do with Html.PartialAsync , utilzing the viewData param, it's quite arduous and ugly code. It's far better to use the <partial> tag helper (which the docs recommend anyways) and its for attribute.

Long and short, change you code to:

@for (var i = 0; i < Model.modules.Count; i++)
{
    <div class="section row col-lg-8">
        <div class="section-header">
            <p class="header-text">@Model.modules[i].PartialName</p>
        </div>
        <div class="row col-lg-12 section-content">
            <partial name="~/Views/Partials/@(Model.modules[i].PartialName)Partial.cshtml" for="modules[i]" />
        </div>
    </div>
}