ASP.NET MVC : bind form with List<Model> in view model

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++;
    }
}