ASP.NET MVC : bind form with List<Model> in view model - asp.net-mvc

Question

I have a view model with the following properties:
// I set the values from the database
public List<Document> AvailableDocuments { get; set; }
// I need to set the values from a front end <form>
public List<RequiredDocument> RequiredDocuments { get; set; }
The RequiredDocument model contains the following properties:
// This should be an Id, maybe a hidden input
public Document Document { get; set; }
// This should be a number input
public int RequiredCopies { get; set; }
// This should be a checkbox
public bool IsRequired { get; set; }
In my view I'm looping through AvailableDocuments and every iteration should bind to a RequiredDocument model (where the user may set the values for the RequiredCopies number).
The form is submitted via Ajax. How can I bind the form to RequiredDocuments?
#foreach (Document doc in Model.AvailableDocuments)
{
<div class="reqdoc">
<!-- RequiredDocument.Document -->
<input type="hidden" name="Document" value="#doc.Id" />
<div class="form-check">
<!-- RequiredDocument.IsRequired -->
<input class="form-check-input" type="checkbox" value="" />
<label class="form-check-label">
#doc.Name
</label>
</div>
<!-- RequiredDocument.RequiredCopies -->
<input class="form-control" type="number" />
</div>
}

Answer 1

You can use this kind of for loop I am doing similar in my projects & it works
<table>
#for (int i = 0; i < (int)ViewBag.Count; i++)
{
#Html.HiddenFor(model => model.AvailableDocuments.ToList()[i].ID)
<tr>
<td>
#Html.CheckBoxFor(model => model.RequiredDocuments.ToList()[i].IsRequired, new { id = "chk_" + i, #class = "custom-checkbox" })
</td>
<td>
#Html.DisplayFor(model => model.AvailableDocuments.ToList()[i].Name)
</td>
<td>
#Html.TextBoxFor(model => model.RequiredDocument.ToList()[i].RequiredCopies, new { id = "RequiredCopies" + i, #class = "form-control" })
</td>
</tr>
}
</table>
Just pass a ViewBag.Count from Your get method.

Answer 2

Work with index and modify the name attribute as:
#{
int i = 0;
foreach (Document doc in Model.AvailableDocuments)
{
<div class="reqdoc">
<!-- RequiredDocument.Document -->
<input type="hidden" name="RequiredDocuments[#i].Document.Id" value="#doc.Id" />
<div class="form-check">
<!-- RequiredDocument.IsRequired -->
<input class="form-check-input" type="checkbox" value="" name="RequiredDocuments[#i].IsRequired" />
<label class="form-check-label">
#doc.Name
</label>
</div>
<!-- RequiredDocument.RequiredCopies -->
<input class="form-control" type="number" name="RequiredDocuments[#i].RequiredCopies" />
</div>
i++;
}
}