MVC Razor View: How to render a list of text boxes for a List in the model?

Question

I have a List in my model. This list contains 2 tasks(say) in it

public List Tasks { get; set; }

public class Task    {         


        

Answer 1

You should use Tasks[0].Total and Tasks[1].Total instead of Items:

@Html.TextBoxFor(m => m.Tasks[0].Title, new { @maxlength = "50"})
@Html.TextBoxFor(m => m.Tasks[0].Total, new { @maxlength = "2"})
<br/>
@Html.TextBoxFor(m => m.Tasks[1].Title, new { @maxlength = "50"})
@Html.TextBoxFor(m => m.Tasks[1].Total, new { @maxlength = "2"})

name="Tasks[0].Total" is not odd. That's exactly how the input should be named in order for the model binder to fetch the value back in the POST action. See this blog post for the wire format used by the default model binder when dealing with lists and dictionaries.

This being said I would recommend you using editor templates => instead of writing those 5 lines of code in your view replace them with:

@Html.EditorFor(x => x.Tasks)

and then inside the corresponding editor template (~/View/Shared/EditorTemplates/Task.cshtml) which will be automatically rendered for each element in the Tasks collection:

@model Task
@Html.TextBoxFor(m => m.Title, new { @maxlength = "50"})
@Html.TextBoxFor(m => m.Total, new { @maxlength = "2"})    
<br/>

Now you can leave the editor templates worry about proper naming convention, etc...

As far as your POST action is concerned:

[HttpPost]
public ActionResult Foo(MyViewModel model)
{
    // model.Tasks should be correctly bound here
    ...
}

Answer 2

In case you want to have multiple elements with textboxes.

 for (int i = 0; i < Model.Students.Count; i++)
                            {
                                @Html.HiddenFor(modelIem => Model.Students[i].StudentId)

                                <tr>
                                    <td>
                                        @Html.DisplayFor(modelItem => Model.Students[i].Student.FirstNames)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => Model.Students[i].Student.LastNames)
                                    </td>
                                    <td>
                                        @Html.TextBoxFor(modelItem => Model.Students[i].Score, new { @type = "number" })
                                    </td>
</tr> }

This is the ViewModel

public class MyModel 
{
 public List<StudentGrade> Students { get; set; }
    }

    public class StudentGrade {
        public ApplicationUser Student { get; set; }
        [Range(1, 100)]
        public int? Score { get; set; } = null;
        public string Description { get; set; } = null;
        public string StudentId { get; set; }
    }

At the End it will look like this.