Loop List In View And Bind Values to Model Depending on List Index

Question

I have this Model:

public class ClassRoom
{
    public List<Student> Students { get; set; }
}
public class Student
{
    public int ID { get; set; }
    public int Type { get; set; }
    public string Name { get; set; }
    public string LastName { get; set; }
}

The values of the ID and Type are already full, I need to create a view where the student can add his name and last name. So I need to loop the list of students in the view.

I am doing the following:

@model Models.ClassRoom

@{
    ViewBag.Title = "Classroom";
}


@if (Model != null)
{
<form action="Controller/Method">
    foreach (var item in Model.Students)
    {
        @Html.HiddenFor(model => model.ID) 
        <div>
            @Html.TextBoxFor(model => model.Name)
            @Html.TextBoxFor(model => model.LastName)
        </div>

    }
    <input type="submit">
  </form>
  }

I want to eventually submit a model of type Classroom with a list of students filled with Name and Last Name for each ID

But this is not working.

How can I bind values From the View to item on a certain index in a list?

For each ID in the hidden input,I want to save the written name and last name.

Please help

I need to create a form and submit the ClassRoom with a full List of Students eventually. What should be the types in my Controller method and views?

Answer 1

If you want to send your model back to controller, then you would need to generate naming correctly. There are several ways, one of them would look like this:

@using (Html.BeginForm("Index", "Home")) {
    <div style="margin-top: 100px;">
        @if (Model != null) {
            for (var i = 0; i <= Model.Students.Count - 1; i++) {
                @Html.HiddenFor(model => model.Students[i].ID)
                <div>
                    @Html.TextBoxFor(model => model.Students[i].Name)
                    @Html.TextBoxFor(model => model.Students[i].LastName)
                </div>
            }
        }
        <input type="submit" value="Go"/>
    </div>
}

And in controller dont forget to add:

[HttpGet]
public async Task<IActionResult> Index() {
    var classroom = new ClassRoom();
     ... //add some students to the classroom
    return View(classroom);
}

[HttpPost]
public async Task<IActionResult> Index(ClassRoom classRoom) {
    ...
}

Here can be found some more reading.