ASP.NET MVC - Multiple checkboxes for row selection in HTML table

This post covers information about how you can display multiple checkboxes in HTML table for row selection in ASP.NET MVC using EditorTemplate.

Many fresher developers or experienced in ASP.NET and recently migrated to MVC find it difficult to show multiple checkboxes in HTML table for row selection and persist the selection to model.

Let’s see how you can achieve this in MVC using EditorTemplates.

First of all I have created one sample MVC project like below.

Then I added Model class named “ProductViewModel” in which I have created classes like below which I have used to create strongly typed view.

public class ProductPageViewModel
{
        public string Message { get; set; }
       
        public List<ProductViewModel> ProductsList { get; set; }
}

public class ProductViewModel
{
        public bool Selected{ get; set; }
        public string Name { get; set; }
        public int Price { get; set; }
}

Then added two methods in controller one is get method to show the data and another is to handle posted data. (Refer sample project for more details)

Then created a folder named “EditorTemplates” under folder in which I am having my parent view or else you can add it in shared folder of Views. And then add a View in it with same name as of model, in this case it is “ProductViewModel”. Refer below image.

In that template view following code is there.

@model EditorForSample.Models.ProductViewModel

<tr>
    <td class="text-nowrap">@Html.CheckBoxFor(m => m.Selected, new { @class="chkSelect"})</td>
    <td colspan="3">
        @Model.Name
        @Html.HiddenFor(m => m.Name)
    </td>
    <td>
        @Model.Price
        @Html.HiddenFor(m => m.Price)
    </td>
</tr>

Then add required HTML in your parent view like below.

@model EditorForSample.Models.ProductPageViewModel

@{
    ViewBag.Title = "Select Products Page";
}
<br />

@using (Html.BeginForm())
{
    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-info">
                <strong> @Model.Message </strong>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="chkSelectAll" /></th>
                        <th colspan="3">
                            Product Name
                        </th>
                        <th>
                            Cost
                        </th>

                    </tr>
                </thead>
                <tbody>
                    @Html.EditorFor(m => m.ProductsList)
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <input type="submit" value="Submit" class="btn btn-info" />
        </div>
    </div>
    <script>
        $("#chkSelectAll").bind("change", function () {
            $(".chkSelect").prop("checked", $(this).prop("checked"));
        });
        $(".chkSelect").bind("change", function () {
            if (!$(this).prop("checked"))
                $("#chkSelectAll").prop("checked", false);
        });
        $(".alert").hide().fadeIn("slow");
    </script>
}

If you notice, I have added some jQuery code to handle check and uncheck of checkboxes which I think you can easily understand.

Now if you run the application you will the result like below.

If you select some products now and click on submit then you are able to get the changes in model in post method. In sample I have checked the count of selected a product and have shown a message on top like below.

Hope you have benefitted from this simple post. Do share in comment section if you are having anything to add this post positively.

Download Sample Project Here