Sunday, July 16, 2017

Check/uncheck all checkboxes using Jquery in MVC

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