Loop through Table, look for checked checkbox, add to database?

Question

I've been searching for an article or example but can't seem to find what I'm looking for. If I write out a table in a View with a checkbox in one of the columns, how would I go about looping through the row, seeing if the checkbox is checked, and if it is then add the record to a database?

I'm still learning about checkboxes and dropdownlists in MVC so I will eventually have to figure out how I would assign the UserID to the row or checkbox and then I'll look at a dropdownlist for the GroupId to assign them to.

The basic scenario is to have a list of unassigned users with a dropdownlist of Groups above the table. The Admin will then make a selection of which group from the DDL and then check the users he wants to assign to it. Then I need to loop through get the UserId for the records that were checked and add them to a database with EntityFramework.

Anyone know of any examples or articles for something similar?

<table class="table table-bordered table-striped table-hover table-condensed tbackground">
        <tr>
            <th class="text-center">

            </th>
            <th class="text-center">
                First Name
            </th>
            <th class="text-center">
                Last Name
            </th>
            <th class="text-center">
                Email
            </th>
            <th class="text-center">
                Phone
            </th>
        </tr>

        @foreach (var item in Model)
        {
            if (item.GroupId == 0)
            {
                <tr>
                    <td>
                        @Html.CheckBox("isSelected")
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.FirstName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.LastName)
                    </td>
                    <td>
                        <a href="mailto:@item.EmailPrimary">@item.EmailPrimary</a>
                    </td>
                    <td class="text-center">
                        @Html.DisplayFor(modelItem => item.PhonePrimary)
                    </td>
                </tr>
            }
        }
    </table>

Answer 1

You can do it in a couple ways:

If you wanna check everything and post the form that contains your table

Add IsSelected property to your model and change your foreach to a for loop. This way your table for will look like this:

    @for (var i = 0; i < Model.Count(); i++)
    {
        if (item.GroupId == 0)
        {
            <tr>
                <td>
                    @Html.CheckBoxFor(x => x[i].IsSelected)
                </td>
                <td>
                    @Html.DisplayFor(x => x[i].FirstName)
                </td>
                <td>
                    @Html.DisplayFor(x => x[i].LastName)
                </td>
                <td>
                    <a href="mailto:@Model[i].EmailPrimary">@Model[i].EmailPrimary</a>
                </td>
                <td class="text-center">
                    @Html.DisplayFor(x => x[i].PhonePrimary)
                </td>
            </tr>
        }
    }

Using index allows your ModelBinder to know that you're posting a list and will bind the properties of this list. That is, if a checkbox is checked, you'll get a true value for your IsSelected property in Controller. Then, you can do this in Controller to get the selected records:

var selecteds = MyPostedModel.Where(x => x.IsSelected);

or...

If you want to check and save then

First add an data-* property to the checkbox which will hold your Id:

 @Html.CheckBox("isSelected", false, new { data_group_id = item.GroupId})

Then add an event listner to your checkbox click with jquery:

$("input[name='isSelected']").on('click', function() {
    var groupId = $(this).data("group-id");
    var isChecked = $(this).is(":checked");
    $ajax.... //Use an ajax call and pass the values to your action
});