Subscribe - It's FREE!!

Stay Connected Here

Stay Updated With Us Here


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

Share with WhatsApp

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.

Add new mvc project in visual studio

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.

New model class in MVC

View name must match with the name of model and it must be under folder called “EditorTemplates”.

In that template view following code is there.

@model EditorForSample.Models.ProductViewModel

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

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 class="row">
        <div class="col-md-12">
            <table class="table table-bordered table-striped">
                        <th><input type="checkbox" id="chkSelectAll" /></th>
                        <th colspan="3">
                            Product Name

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

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.

Ouput of the sample application EditorFor

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.

Binded data to model in mvc using EditorFor

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

If you enjoyed this post take 5 seconds to share it! Be Socialable. :-)

Share with WhatsApp

Posts To Read Next

Swagger - Powerful Opensource Framework for RESTful API

With a Swagger-enabled API, you get interactive documentation, client SDK generation and discoverability. Swagger Editor allows you to generate code, documentation with ease.

What is Hoisting in JavaScript?

Hoisting in JavaScript, one of the most misunderstood or little understood concept in the JavaScript and remain famous as interview question for JavaScript developers and now also for angular js developer. Lets check out what it means exactly.

Visual Studio Code - Lighweight but powerful source code editor available for Windows, OS X and Linux

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, OS X and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (C++, C#, Python, PHP) and runtimes.

How to post JSON string as a string in jQuery AJAX

Know how to post JSON String as string to the action method of controller in MVC.

How to call click or any event only once in jQuery

Know how to execute an click event or any event only once for any element in jQuery. Perform action only once and even not required to unbind event.

Your opinion is valuable for us! Comments, suggetions are welcome.

Submit your Email Id to stay updated with us and get notified with our new posts. It's FREE!
Vu 32'' TV Vu 24'' TV
We know this popup is disturbing you!
But We would greatly appreciate if you share us with your friends below!

It will not take more than 2 seconds but will motivate us greatly to write more,share more!