Binding List with checkbox and post back

Question

I have a object that I am binding to my view. This object has a list of items with a boolean field on them. I use this boolean field to bind to a checkbox on the form. I am wanting the user to select the items they want and then submit. This issue is, when it is submitted and passed to the post action, the list of items is null.

Here is the View Model passed into the view.

public class ReAssignVM
{
    public string ToUsername { get; set; }

    public string FromUsername { get; set; }

    public IEnumerable<ReAssignTaskVM> Tasks { get; set; }
}  // End of Class

Here is the view:

    @model SRM.ClassLibrary.V1.ViewModels.TaskViewModels.ReAssignVM

@{
    ViewData["Title"] = "Re-Assign Tasks";
}

<h2>Re-Assign Tasks</h2>

<br />

<div class="row">
    <div class="col-md-1 alignRight">
        <b>From:</b>
    </div>
    <div class="col-md-3">
        @Model.FromUsername
    </div>
    <div class="col-md-1 alignRight">
        <b>To:</b>
    </div>
    <div class="col-md-3">
        @Model.ToUsername
    </div>
</div>

<br />

<form asp-action="ReAssignTasks">
    <input type="hidden" asp-for="FromUsername" />
    <input type="hidden" asp-for="ToUsername" />

    <div include-if="@Model.Tasks != null && Model.Tasks.Count() > 0">
        <table class="table table-hover">
            <thead class="thead-light">
                <tr>
                    <th></th>
                    <th>
                        Status
                    </th>
                    <th>
                        Date
                    </th>
                    <th>
                        Student
                    </th>
                    <th>
                        Description
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var task in Model.Tasks.OrderBy(n => n.TaskDate))
                {
                    <tr>
                        <td>
                            @Html.HiddenFor(item => task.TaskID)
                            @Html.CheckBoxFor(item => task.Assign)
                        </td>
                        <td>
                            @Html.DisplayFor(item => task.TaskStatus)
                        </td>
                        <td>
                            @task.TaskDate.ToLocalTime().ToString("M/d/yyyy")
                        </td>
                        <td>
                            @Html.DisplayFor(item => task.StudentUsername)
                        </td>
                        <td>
                            @Html.DisplayFor(item => task.Description)
                        </td>
                    </tr>
                }
            </tbody>
        </table>

        <br />

        <div class="row">
            <div class="col-md-12 alignRight">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#assignment">
                    Re-Assign
                </button>
            </div>
        </div>
    </div>

    <div class="modal fade" id="assignment" tabindex="-1" role="dialog" aria-labelledby="assignmentLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="assignmentLabel">Confirm Re-Assignment of Tasks?</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">Selected tasks will be re-assigned from @Model.FromUsername to @Model.ToUsername</div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                    <input type="submit" value="Confirm" class="btn btn-primary" />
                </div>
            </div>
        </div>
    </div>
</form>

<div exclude-if="@Model.Tasks != null && Model.Tasks.Count() > 0">
    <div class="alert alert-info">
        There are no tasks to re-assign.
    </div>
</div>

Can someone help me understand how to do this correctly?

Answer 1

You will need to provide the indexing to your Collection items to posted back in the model as Model binder would use those to bind back the objects to action. So you should be using For loop and IList<T> as your model in view :

@for(int i=0; i< Model.Tasks.Count(); i++)
{

     @Html.HiddenFor(item => Model.Tasks[i].TaskID)
     @Html.CheckBoxFor(item => Model.Tasks[i].Assign)

     ............
     ............
}

and in your model change it to be IList<T> as you wouldn't have indexer on IEnumerable<T>:

public class ReAssignVM
{
    public string ToUsername { get; set; }

    public string FromUsername { get; set; }

    public IList<ReAssignTaskVM> Tasks { get; set; }
}  // End of Class