MVC 4 Razor: How to Select / Deselect All Checkboxes inside a Webgrid in ASP.NET Application using C#.NET.

Hi friends,in this article I will explain about  How to Select / Deselect All Checkboxes inside a Webgrid in ASP.NET MVC 4 Razor Application using C#.NET.

In previous articles I explained about  MVC 4 Razor: Frozen Rows and Columns Webgrid Using jQuery Like Excel Sheet , MVC 4 Razor: Bind jQuery DatePicker Calendar in MVC WebGrid Using ASP.NET MVC, C#.Net and MVC4 Razor: Handling multiple submit buttons on the same View

Write the below code in Model.

Model(UserModel):

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcSelectAllWebGrid.Models {     public class UserModel     {         public List<User> userList { get; set; }     }     public class User     {         public int UserID { get; set; }         public string UserName { get; set; }         public string Address { get; set; }         public DateTime DOB { get; set; }     } }

Controller(UserController.cs):

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcSelectAllWebGrid.Models; namespace MvcSelectAllWebGrid.Controllers {     public class UserController : Controller     {         public ActionResult Index()         {             UserModel obj = new UserModel();             obj.userList = GetUserList();             return View(obj);         }         public List<User> GetUserList()         {             List<User> user = new List<User>();             user.Add(new User { UserID = 1, UserName = "Kishore", Address = "XXXXXXXXX", DOB = new DateTime(1986, 09, 15) });             user.Add(new User { UserID = 2, UserName = "Raghav", Address = "XXXXXXXXX", DOB = new DateTime(1980, 09, 15) });             user.Add(new User { UserID = 3, UserName = "Satyam", Address = "XXXXXXXXX", DOB = new DateTime(1975, 09, 15) });             user.Add(new User { UserID = 4, UserName = "SambhaShiva", Address = "XXXXXXXXX", DOB = new DateTime(1985, 09, 15) });             user.Add(new User { UserID = 5, UserName = "Nageswar", Address = "XXXXXXXXX", DOB = new DateTime(1982, 09, 15) });             user.Add(new User { UserID = 6, UserName = "SaiR", Address = "XXXXXXXXX", DOB = new DateTime(1988, 07, 07) });             return user;         }         [HttpPost]         public ActionResult Index(string[] childChkbox)         {             UserModel obj = new UserModel();             obj.userList = GetUserList();             if (childChkbox != null)             {                 ViewBag.mes = "You have selected following User ID(s):" + string.Join(", ", childChkbox);             }             else             {                 ViewBag.mes = "No record selected";             }             return View(obj);         }     } }

View(Index.cshtml):

@model MvcSelectAllWebGrid.Models.UserModel @{     ViewBag.Title = "How to Select / Deselect All Checkboxes inside a Webgrid in ASP.NET Application using C#.NET."; } <script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script> <script type="text/javascript" language="javascript">     $(document).ready(function () {         $("#SelectAllWebGrid th").each(function () {             if ($.trim($(this).text().toString().toLowerCase()) === "{checkall}") {                 $(this).text('');                 $("<input/>", { type: "checkbox", id: "cbSelectAll", value: "" }).appendTo($(this));                 $(this).append("<span>Select All</span>");             }         });         $("#cbSelectAll").live("click", function () {             var ischecked = this.checked;             $('#SelectAllWebGrid').find("input:checkbox").each(function () {                 this.checked = ischecked;             });         });         $("input[name='childChkbox']").click(function () {             var allRows = $("#SelectAllWebGrid td :checkbox").length;             var checked = $("#SelectAllWebGrid td :checkbox:checked").length;             if (checked == allRows) {                 $("#SelectAllWebGrid").find("input:checkbox").each(function () {                     this.checked = true;                 });             }             else {                 $("#cbSelectAll").removeAttr("checked");             }         });     }); </script> <style type="text/css">     .webGrid     {         margin: 4px;         border-collapse: collapse;         width: 500px;         font-family: Tahoma;         font-size: small;     }     .grid-header     {         background-color: #990000;         font-weight: bold;         color: White !important;     }     .webGrid th a     {         color: White;         text-decoration: none;     }     .webGrid th, .webGrid td     {         border: 1px solid black;         padding: 5px;     }     .alt     {         background-color: #F4EFEF;     }     .webGrid th a:hover     {         text-decoration: underline;     }     .to-the-right     {         text-align: right;     } </style> @using (Html.BeginForm("Index", "User", FormMethod.Post)) {     var grid = new WebGrid(source: Model.userList,       rowsPerPage: 5);     @grid.GetHtml(         tableStyle: "webGrid",              htmlAttributes: new { id = "SelectAllWebGrid" },         headerStyle: "grid-header",         rowStyle: "gridRow",         alternatingRowStyle: "alt",         mode: WebGridPagerModes.All,         firstText: "<< First",         previousText: " < Previous",         nextText: "Next >",         lastText: "Last >>",         caption: "User Details",         columns: grid.Columns(        grid.Column(                         format: @<text>     <input type="checkbox" value="@item.UserID" name="childChkbox" />     </text>,                                             header: "{checkall}"                                         ),                                     grid.Column("UserID", "User ID"),                                     grid.Column("UserName", "User Name"),                                     grid.Column("Address", "Address"),                                     grid.Column("DOB", "Date of Birth")                                 ))          <input type="submit" value="Submit" />         <br />   <h3 style="color:Green;font-family:Tahoma">@ViewBag.mes</h3>    }

 The output of the above code as shown in the below figure

When we click on Submit button then it shows "You have selected following User ID(s):1,2,3,4,5.Because in above figure I selected 1,2,3,4,5 User IDs

You can download the above code by clicking in the below Download button.