MVC4 bind model to ICollection or List in partial

Given a Model

public class Task
{
public int TaskId { get; set; }
public string Title { get; set; }
public ICollection<SomeData> Information { get; set; }
}

where

public class SomeData
{
    public int SomeDataId { get; set; }
    public string Description { get; set; }
}

I have a view

@model myProject.Models.Task

<div>
    @Html.LabelFor(model => model.Title)
</div>

<table>
@Html.Partial("_InformationEdit", Model.Information.ToList(), new ViewDataDictionary(Html.ViewDataContainer.ViewData) {
                TemplateInfo = new System.Web.Mvc.TemplateInfo { HtmlFieldPrefix = "Information" }})
</table>

and my partial is

@model IList<myProject.Models.SomeData>

@for (int i = 0; i < Model.Count(); i++)
{
    <tr>
        <td>
            @Html.EditorFor(modelItem => Model[i].Description)
        </td>
    </tr>
 }

However

My Html fields are being rendered like

<input class="text-box single-line" id="Information__0__Description" name="Information.[0].Description" type="text">

Where the names should be Information[0].Description. It’s got an additional dot in there, so is not being bound back to the model correctly when posted. How can I fix this?

As per Model binding to a list I can see what my Id’s are supposed to be, but I just can’t figure out the correct syntax.

Also, is there a more elegant way to achieve this with an IEnumerable using a @foreach ?

ASP.NET MVC model binding an IList<> parameter

Contents hide

Answers:

Method 1

Method 2

Method 3

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You could use the <input... directly like this:

Page:

<table>
    @Html.Partial("_InformationEdit", Model.Information)
</table>

Partial Page:

@for (int i = 0; i < Model.Count(); i++)
{
    <tr>
        <td>
            <input class="text-box single-line" id="Information[@i]Description" name="Information[@i].Description" type="text" value="@Model[i].Description" />
        </td>
    </tr>
}

Or, to be able to pass the prefix as in your example you could keep the Page code the same and change your partial like:

Page:

<table>        
    @Html.Partial("_InformationEdit", Model.Information, 
        new ViewDataDictionary(Html.ViewDataContainer.ViewData) 
        {
            TemplateInfo = new System.Web.Mvc.TemplateInfo { HtmlFieldPrefix = "Information" }
        })
</table>

Partial Page:

@for (int i = 0; i < Model.Count(); i++)
{
    <tr>
        <td>
            @{
                string fieldName = string.Format("{0}[{1}].Description", ViewData.TemplateInfo.HtmlFieldPrefix, i);
                <input class="text-box single-line" id="@fieldName" name="@fieldName" type="text" value="@Model[i].Description" />
            }
        </td>
    </tr>
}

Method 2

Changing my partial to

@model IList<myProject.Models.SomeData>

@{
    var Information = Model;
}

@for (int i = 0; i < Information.Count(); i++)
{
    <tr>
        <td>
            @Html.EditorFor(modelItem => Information[i].Description)
        </td>
    </tr>
 }

Works, but this seems a bit odd!

I guess ensuring that the object being bound is of the same name as the property it needs to be bound to does some wizardry… Other suggestions or explanations are welcome!

Method 3

your partial should be:

@model IList<myProject.Models.SomeData>

@for (int i = 0; i < Model.Count(); i++)
{
  <tr>
    <td>
      @Html.EditorFor(model => model[i].Description)
    </td>
  </tr>
}

also it’s easier to read if you replace i by the item name

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating