Custom Pager in MVC Pagedlist - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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" />


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+
Latest


EmoticonEmoticon