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

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.


Visual Studio 2008 Shell and TFS integration

Visual Studio 2008 Shell and TFS integration is the problem for all newbies of BIDS and TFS. Here is the solution.


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.


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.


Best CSS Gradient background generator tools online

Here are some best CSS gradient background code generator online tools using which you can create a cross browser css code for gradient backgrounds.


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