Post
Ask Question

Simple Paging in MVC

In this article I am going to explain how to create simple paging in mvc.

Sometimes you need to improve performance showing data use paging. In asp.net the grid view control allows you create wizard paging, but in mvc you don’t access it, and always programmers spend a lot of times in it. Now I am going to explain a simple way for paging with minimal code.
 
First create a model called Product,
  1. public class Product  
  2.   
  3.     {  
  4.   
  5.         public int Id { get; set; }  
  6.   
  7.         public string Name { get; set; }  
  8.   
  9.   
  10.         public List<Product> GetList  
  11.   
  12.         {  
  13.   
  14.             get  
  15.   
  16.             {  
  17.   
  18.                 return new List<Product>()  
  19.   
  20.                 {  
  21.   
  22.                     new Product() { Id = 1, Name = "p1" },  
  23.   
  24.                     new Product() { Id = 2, Name = "p2" },  
  25.   
  26.                     new Product() { Id = 3, Name = "p3" },  
  27.   
  28.                     new Product() { Id = 4, Name = "p4" },  
  29.   
  30.                     new Product() { Id = 5, Name = "p5" },  
  31.   
  32.                     new Product() { Id = 6, Name = "p6" },  
  33.   
  34.                     new Product() { Id = 7, Name = "p7" },  
  35.   
  36.                     new Product() { Id = 8, Name = "p8" },  
  37.   
  38.                     new Product() { Id = 9, Name = "p9" },  
  39.   
  40.                     new Product() { Id = 10, Name = "p10" },  
  41.   
  42.                 };  
  43.   
  44.             }  
  45.   
  46.         }  
  47.   
  48.     }   

To install MVC 4 Paging, run the following command in the Package Manager Console.

Install-Package PagedList.Mvc -Version 4.0.0.

Next create a controller called Home,

  1. public class HomeController : Controller  
  2.    {  
  3.        private const int pageSize = 5;  
  4.        public ActionResult Index(int? page)  
  5.        {  
  6.            int pageNumber = (page ?? 1);  
  7.            var model = Product.GetList.ToList().ToPagedList(pageNumber, pageSize);  
  8.            return View(model);  
  9.        }  
  10.    }   
Finally create a Index view :
  1. @using PagedList.Mvc  
  2. @model PagedList.IPagedList<MVCPaging.Models.Product>  
  3. @{  
  4.     ViewBag.Title = "Index";  
  5. }  
  6. <link href="~/Content/PagedList.css" rel="stylesheet" />  
  7.   
  8. <style>  
  9.     body {  
  10.         width: 80%  
  11.     }  
  12.      table {  
  13.          width: 60%;  
  14.          border-collapse: collapse;  
  15. }  
  16.     table tr {  
  17.       border: solid thin;  
  18.     }  
  19.   
  20.     table tr td {  
  21.         width: 20%;  
  22.     }  
  23.     #pager {  
  24.         padding-left : 5%  
  25.     }  
  26.     #pager p{  
  27.         margin-left: 5%;  
  28.     }  
  29.   
  30. </style>  
  31. <h2>Index</h2>  
  32. <table>  
  33.     <thead>  
  34.         <td>ID</td>  
  35.         <td>Name</td>  
  36.     </thead>  
  37.   
  38.     @foreach (var item in Model)  
  39.     {  
  40.         <tr>  
  41.             <td>@item.Id</td>  
  42.             <td>@item.Name</td>  
  43.         </tr>  
  44.     }  
  45. </table>  
  46.    
  47. <div id="pager">  
  48.    <p> Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount</p>  
  49.     @Html.PagedListPager(Model, page => Url.Action("Index", new { page }))  
  50. </div> 
I hope this was helpful.