Previously we have seen how to showcase the data in grid usingMVC Razor view engine. Now let us check how to do paging for the grid. Not more changes have to be made to showcase paging. Below are the steps to be followed.

 1.      Add reference of pageList to the solution as below.


 2.      Add using PagedList; name space to the controller



 3.      Add Nullable Int (int?) as a parameter to the Action result.

             public ActionResult Index(int? Page)



 4.      Convert result List to pagedList using IPageList interface that relate PagedList reference we already added

            IPagedList<Employee> employeePagedList = employeeList.ToPagedList(Page.HasValue?Convert.ToInt32(Page): pageIndex, pageSize);


      OverAll controller code as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PagingGrid.Models;
using PagedList;

namespace PagingGrid.Controllers
{
    public class EmployeeController : Controller
    {
        // GET: Employee
        public ActionResult Index(int? Page)
        {
            int pageSize = 5;
            int pageIndex = 1;
            EmployeeContext context = new EmployeeContext();
            List<Employee> employeeList = context.employee.ToList();
            IPagedList<Employee> employeePagedList = employeeList.ToPagedList(Page.HasValue?Convert.ToInt32(Page): pageIndex, pageSize);
            return View(employeePagedList);
        }
    }
       }



   5.     Go to VIEW and change IEnumerable to PagedList. Also, add the pagedList reference as below.

                           @model PagedList.IPagedList<PagingGrid.Models.Employee>
@using PagedList.Mvc;




 6.      Add the below code that showcase Paging and page numbers.

           <div id='Paging' style="text-align: center">
        Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber)
        of @Model.PageCount

        @Html.PagedListPager(Model, page => Url.Action("Index", new { page }))
    </div>


               Overall View code as follows:
     
@model PagedList.IPagedList<PagingGrid.Models.Employee>
@using PagedList.Mvc;
@{
    ViewBag.Title = "Index";
}
<style >
    .tableDesign {
        border:2px solid Black;
        padding-left:80px;
        padding-right:80px;
    }
</style>

<h2>EmployeeList</h2>

<div>
    <table >
        <th class="tableDesign" >ID</th>
        <th class="tableDesign">Name</th>
        <th class="tableDesign">Gender</th>
        <th class="tableDesign">City</th>

        @foreach (var employee in @Model)
        {
            <tr class="tableDesign">
                <td class="tableDesign">@employee.ID</td>
                <td class="tableDesign">@employee.Name</td>
                <td class="tableDesign">@employee.Gender</td>
                <td class="tableDesign">@employee.City</td>
            </tr>
        }

    </table>
    <div id='Paging' style="text-align: center">
        Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber)
        of @Model.PageCount

        @Html.PagedListPager(Model, page => Url.Action("Index", new { page }))
    </div> 
</div>


  Output as below: