Menu

Select all check box in MVC

Hello Friend,

Here we have give demo for Select all check box in MVC with jQuery Following below step.

Download Source Code :=> SelectAllCheckBox.rar

1. Create Model : Here we have create “MdlStudent.cs”


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace SelectAllCheckBox.Models
{
public class MdlStudent
{
public MdlStudent()
{
StudentList = new List<MdlStudent>();
}
public int StudentId { get; set; }
public String StudentName { get; set; }
public String Address { get; set; }
public IList<MdlStudent> StudentList { get; set; }
}
}

2. Create Controller :Here we have create “StudentController.cs” controller.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SelectAllCheckBox.Models;

namespace SelectAllCheckBox.Controllers
{
public class StudentController : Controller
{
//
// GET: /Student/

public ActionResult Index()
{
var model = new MdlStudent();
//Add record in list
model.StudentList.Add(new MdlStudent { StudentId = 1, StudentName = "Sandeep", Address = "India" });
model.StudentList.Add(new MdlStudent { StudentId = 2, StudentName = "Dev", Address = "India" });
model.StudentList.Add(new MdlStudent { StudentId = 3, StudentName = "Amit", Address = "India" });
model.StudentList.Add(new MdlStudent { StudentId = 4, StudentName = "Ankit", Address = "India" });
model.StudentList.Add(new MdlStudent { StudentId = 5, StudentName = "Dhaval", Address = "India" });
model.StudentList.Add(new MdlStudent { StudentId = 6, StudentName = "Rakesh", Address = "India" });
return View(model);

}

//Posr Method
[HttpPost]
public ActionResult Index(int[] sid, MdlStudent objStudent)
{
//get selected student id into sid
string str = "";
foreach (var i in sid)
{
str += ick + ", ";
}
ViewBag.SelectedId = str;
return View(objStudent);
}
}
}

3. Add View : Create Strongly typed view look like below.

select all checkbox

 4. jQuery Code : Create jQuery Function For Select all Checkbox.


<script>
$("document").ready(function () {
$("#chkAll").click(function () {
var checked = $(this).is(':checked');
$(".sid").attr("checked", checked);
});
$(".sid").click(function () {
var valid = true;
$(".sid").each(function () {
var checked = $(this).is(':checked');
if (!checked) {
valid = false;
}
});
$("#chkAll").attr("checked", valid);
});
});
</script>

5.  View :   Create View


@using (Html.BeginForm("Index", "Student", FormMethod.Post))
{
<table width="98%" border="0" cellpadding="1" cellspacing="1" align="center">
<tbody>
@if (Model.StudentList != null &amp;amp;amp;amp;&amp;amp;amp;amp; Model.StudentList.Count > 0)
{
<tr>
<td>

<input type="submit" value="Save" class="button" name="Save" id="Save" />
</td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" border="0">
<tr>
<th style="text-align: center;">
<input type="checkbox" name="chkAll" value="All" id="chkAll" />
</th>
<th>
Student Name
</th>
<th>
Address
</th>
</tr>
@foreach (var item in Model.StudentList)
{
<tr>
<td style="width: 3%;" align="center">
<input type="checkbox" name="sid" value="@item.StudentId" class="sid" />
</td>
<td>
@Html.DisplayFor(modelItem => item.StudentName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Address)
</td>
</tr>
}
</table>
</td>
</tr>
}
else
{
<tr>
<td>
Selected Student id is=>@ViewBag.SelectedId
</td>
</tr>
}
</tbody>
</table>
}

6. Ouput Run your project click on top first check box for select all check box.

select all checkbox

Get Selected id to Click save button to get selected id.
selectallcheckbox3

No comments

Leave a Reply


5 × = 40

Categories