MVC Editor在一个页面上为多个编辑表单进行模型绑定

Question

I have a class called CategoryModel , one of the properties of which is a list of objects of the same type. So CategoryModel.Categories is of type List<CategoryModel> .

On the category index page, I display an editor for each category so that the user can change any of the category names without having to go to a dedicated page to do so. Like so:

<ul id="categories>
    @Html.EditorFor(model => model.Categories)
</ul>

And the editor template for CategoryModel looks like this:

<li class="folder">
    @using (Html.BeginForm("Edit", "Category", new { id = Model.Key }, FormMethod.Post, new { @class = "ajaxoff"})) {
        @Html.ValidationSummary(true)
        @Html.HiddenFor(model => model.Key)
        @Html.HiddenFor(model => model.ParentKey)
        @Html.HiddenFor(model => model.Sequence)
        @Html.HiddenFor(model => model.IncludeDeleted)

        @Html.TextBoxFor(model => model.Name, null, new { @class = "catName" })
        @Html.ValidationMessageFor(model => model.Name)

        <input type="submit" value="Save" class="icon save" />
    }
</li>

The problem I have is that submitting the form does not bind correctly to the Edit action of the CategoryController :

[HttpPost]
public ActionResult Edit(CategoryModel category)
{
    // At this point all properties in category are null
}

If I check the names on the hidden fields and textboxes, they are labelled based on their position in the current category (eg Categories[0].Name ). If I create a dedicated edit view, however, they are simply named according to the field name (eg Name ).

I have tried changing the controller to accept a list of Categories:

[HttpPost]
public ActionResult Edit(List<CategoryModel> categories)
{
    var category = categories.First();
}

This works if I submit the very first category, but none of the others (in those cases Categories is null).

I have also tried changing how I display my EditorFor, by doing this:

<ul id="categories>
    @foreach (var cat in Model.Categories)
    {
        @Html.EditorFor(model => cat);
    }
</ul>

Which changes the field names to be the same for each category (eg all category names are called cat.Name ), which I believe is a step in the right direction.

So how do I bind correctly to my controller? I realise that I could submit the whole parent category and then save each subcategory, but this seems like a very inefficient way to submit a single change.

Answer 1

I discovered how to do this. There is an overload for Html.EditorFor that allows you to specify the htmlFieldName property (the third parameter in the example below):

@foreach (var cat in Model.Categories)
{
    @Html.EditorFor(model => cat, null, "");
}

This renders all of the field names without any prefix and allows me to submit any single category successfully.

Answer 2

Your Edit action accept CategoryModel category so you need to reset model prefix for right binding. For this you need to create your own extension method for HtmlHelper like this:

public class BeginHtmlScope : IDisposable
    {
        private readonly TemplateInfo templateInfo;
        private readonly string previousHtmlFieldPrefix;

        public BeginHtmlScope(TemplateInfo templateInfo, string htmlFieldPrefix)
        {
            this.templateInfo = templateInfo;

            previousHtmlFieldPrefix = templateInfo.HtmlFieldPrefix;
            templateInfo.HtmlFieldPrefix = htmlFieldPrefix;
        }

        public void Dispose()
        {
            templateInfo.HtmlFieldPrefix = previousHtmlFieldPrefix;

        }
    }
    public static class MyHtmlExtensions
    {
        public static IDisposable BeginHtmlScope(this HtmlHelper html, string htmlFieldPrefix)
        {
            return new BeginHtmlScope(html.ViewData.TemplateInfo, htmlFieldPrefix);
        }
    }

And then use it inside your editor template:

@using (Html.BeginHtmlScope(""))
{
   <li class="folder">
    @using (Html.BeginForm("Edit", "Category", new { id = Model.Key }, FormMethod.Post, new { @class = "ajaxoff"})) {
        @Html.ValidationSummary(true)
        @Html.HiddenFor(model => model.Key)
        @Html.HiddenFor(model => model.ParentKey)
        @Html.HiddenFor(model => model.Sequence)
        @Html.HiddenFor(model => model.IncludeDeleted)

        @Html.TextBoxFor(model => model.Name, null, new { @class = "catName" })
        @Html.ValidationMessageFor(model => model.Name)

        <input type="submit" value="Save" class="icon save" />
    }
</li>

}