Subscribe - It's FREE!!

Stay Connected Here

Stay Updated With Us Here



Google

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

<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.

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

Typewriter - Automatic TypeScript Template generation from C# classes in Visual Studio

Typewriter, an extension for visual studio that generates TypeScript files from C# code files using TypeScript templates. Convert your C# model classes to TypeScript automatically.


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.


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.


Assembla - Free and private repository to manage your source code online with SVN subversion hosting

With Assembla you can share source code with others online. Free & Private source code repository with SVN Subversion, Git & Perforce Hosting.


Top 10 Visual Studio things which can boost developers coding speed

Visual Studio 2012 provides some coding features by which you can code faster if use them properly. This post will cover top 10 things among them to boost your development speed.


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!

x