In this tutorial I am going to explain how to check and
uncheck all checkboxes using Jquery in MVC.
Description:
I am displaying list of employees in which every row have
checkbox to select/check in front of them. There is one more checkbox in header,
when check this checkbox all visible records will be selected/checked and
unchecked. This functionality will be implemented using jquery.
Implementation:
I am using database approach to implement this tutorial. I
have create a table employee.
Model
public partial class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public Nullable<int> Phone { get; set; }
public Nullable<int> Salary { get; set; }
public string Department { get; set; }
public string ImagePath { get; set; }
public string EmailId { get; set; }
}
Add
controller
Add empty controllers to project. Create action to get
employee list from database.
Complete code of Controller:
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using mvctest2017.Models;
namespace mvctest2017.Controllers
{
public class EmployeeController : Controller
{
private DemoEntities db = new DemoEntities();
//
//
GET: /Employee/
public ActionResult Index()
{
return View(db.Employees.ToList());
}
}
}
Add View
Add view for Index action.
Jquery function use to check/uncheck checkboxes:
<script>
$(document).ready(function () {
$("#checkAll").click(function () {
if (this.checked)
{
$(".chkbox").prop('checked', $(this).prop('checked', true));
}
else {
$('.chkbox').each(function () { this.checked = false; });
}
});
$('.chkbox').on('click', function () {
if ($('.chkbox:checked').length == $('.chkbox').length) {
$('#checkAll').prop('checked', true);
} else {
$('#checkAll').prop('checked', false);
}
});
});
</script>
Complete source of Index View:
@model IEnumerable<mvctest2017.Models.Employee>
@{
ViewBag.Title = "Check/uncheck Checkboxes";
}
<table>
<tr>
<th><input id="checkAll" type="checkbox" /></th>
<th>
@Html.DisplayNameFor(model
=> model.Name)
</th>
<th>
@Html.DisplayNameFor(model =>
model.Phone)
</th>
<th>
@Html.DisplayNameFor(model =>
model.Salary)
</th>
<th>
@Html.DisplayNameFor(model =>
model.Department)
</th>
<th>
Image
</th>
<th>
Email
</th>
<th>Action</th>
</tr>
@foreach (var item in Model) {
<tr>
<td><input type="checkbox" class="chkbox" value="@item.Id" /></td>
<td>
@Html.DisplayFor(modelItem =>
item.Name)
</td>
<td>
@Html.DisplayFor(modelItem =>
item.Phone)
</td>
<td>
@Html.DisplayFor(modelItem =>
item.Salary)
</td>
<td>
@Html.DisplayFor(modelItem =>
item.Department)
</td>
<td>
@if(item.ImagePath !=null)
{
<img src="@Url.Content(item.ImagePath)" alt="aspmantra.com" height="100px" width="100px" />
}
else
{
<img src="@Url.Content("~/images/image.jpg")" alt="aspmantra.com" height="100px" width="100px" />
}
</td>
<td>
@if (item.EmailId != null)
{
@Html.DisplayFor(modelItem =>
item.EmailId)
}
else
{
<span style="color:red">Email not available</span>
}
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
@Html.ActionLink("Details", "Details", new { id=item.Id }) |
@Html.ActionLink("Delete", "Delete", new { id=item.Id })
</td>
</tr>
}
</table>
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#checkAll").click(function () {
if (this.checked)
{
$(".chkbox").prop('checked', $(this).prop('checked', true));
}
else {
$('.chkbox').each(function () { this.checked = false; });
}
});
$('.chkbox').on('click', function () {
if ($('.chkbox:checked').length == $('.chkbox').length) {
$('#checkAll').prop('checked', true);
} else {
$('#checkAll').prop('checked', false);
}
});
});
</script>
No comments:
Post a Comment