Friday, October 6, 2017

Custom Pager in MVC Pagedlist

In this article I am going to explain how to customize the pager in MVC Pagedlist.

Description:
I want to show total number of records and number records are showing out of total records. Change the pagesize using dropdown.

Implementation:

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 an empty controller to project. Create an action to fetch the data 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;
using PagedList;
using System.IO;
using System.Text;
namespace mvctest2017.Controllers
{
    public class EmployeeController : Controller
    {
        private DemoEntities db = new DemoEntities();

        //
        // GET: /Employee/
        public ActionResult Index(int? page, int? PageSize)
        {
            var employee = db.Employees.OrderBy(e => e.Id).Count();
            ViewBag.PageSize = new List<SelectListItem>()
            {
                new SelectListItem() { Value="5", Text= "5" },
                new SelectListItem() { Value="10", Text= "10" },
                new SelectListItem() { Value="15", Text= "15" },
                new SelectListItem() { Value="25", Text= "25" },
                new SelectListItem() { Value="50", Text= "50" },
            };          
            int pageNumber = (page ?? 1);
            int pagesize = (PageSize ?? 5);
            ViewBag.psize = pagesize;          
            ViewBag.Count = employee;
            return View(db.Employees.OrderBy(c => c.Id).ToList().ToPagedList(pageNumber, pagesize));
        }     
    }
}

Add View
Add view for Index action.

Complete source code of view
@*@model IEnumerable<mvctest2017.Models.Employee>*@

@model PagedList.IPagedList<mvctest2017.Models.Employee>
@using PagedList.Mvc;
@{
    ViewBag.Title = "ASP.NET MVC : Custom pager Pagedlist";
}
<style>
    table th {
        padding: 20px;
    }
    table td {
        text-align: center;
    }
</style>
<table align="center" style="margin-top: 50px; padding: 10px;">
    <tr>
        <th><input id="checkAll" type="checkbox" /></th>
        <th>
           Name
        </th>
        <th>
            Phone
        </th>
        <th>
            Salary
        </th>
        <th>
           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>
                @if (item.Name != "")
                {
                    @Html.DisplayFor(modelItem => item.Name)
                }
                else
                {
                    <span style="color:red">-NA-</span>
                }
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Phone)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Salary)
            </td>
            <td>
                @if(item.Department != null)
                {
                     @Html.DisplayFor(modelItem => item.Department)
                }
                else
                {
                    <span style="color:red">-NA-</span>
                }
            </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">-NA-</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>
@using (Html.BeginForm("Index", "Employee", FormMethod.Get, new { id = "form1" }))
    {
<div class="pager">
    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount<br/>
    @if (Model.Count == ViewBag.psize)
{
    <span>Showing @(((Model.PageNumber * Model.Count) - Model.Count) + 1)-@(Model.PageNumber * Model.Count) of @ViewBag.Count</span>
}
else
{
        <span>Showing @((ViewBag.Count - Model.Count) + 1)-@(ViewBag.Count) of @ViewBag.Count</span>
    }
    @Html.PagedListPager(Model, page => Url.Action("Index", new {page, pageSize = ViewBag.psize })) 
            @Html.DropDownList("pageSize")
</div>
    }
<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>
<script type="text/javascript">
    $(function () {
        $("#pageSize").change(function () {
            $("#form1").submit();
        });
    });
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />


No comments:

Post a Comment