articles

Home / DeveloperSection / Articles / Paging in ASP.NET MVC 4.0

Paging in ASP.NET MVC 4.0

Amit Kumar5368 06-Apr-2017
In this article, we will learn how to use paging in ASP.NET MVC 4, using PagedList. First, show the Table script.. For paging we will use PagedList.mvc package which we will download from Nuget Package Manager. 

What is PagedList.mvc?
PagedList.mvc is a package for paging and sorting for ASP.NET MVC. PagedList package installs a PagedList collection type and extension methods for IQueryable and IEnumerable collections.

Open a New Project. 

Paging in ASP.NET MVC 4.0

Click on OK button.

Paging in ASP.NET MVC 4.0

After opening the project, go to Solution Explorer and right click on References.

Click on Manage NuGet Packages and type PagedList.mvc in the top right corner

for search.

Paging in ASP.NET MVC 4.0

Click on Install button.

Paging in ASP.NET MVC 4.0

Now, it is installing. After the installation, the page will look like the following:

Paging in ASP.NET MVC 4.0

Close this window. Now, you can see that PagedList.mvc is installed in our project. We add its reference in our controller show, as shown below:

Paging in ASP.NET MVC 4.0

Add a student.cs class in Models folder.

Paging in ASP.NET MVC 4.0

Without using PagedList.mvc my controller code :

  1. [HttpGet]    
  2.         public ActionResult Index(int? page)    
  3.         {    
  4.     
  5.             BL buisnessLogic = new BL();      
  6.             student objStudent = new student();      
  7.             List<student> objStudentList = new List<student>();      
  8.             objStudentList = buisnessLogic.studentListBind();      
  9.             objStudent.std = objStudentList;      
  10.             return View(objStudent);     
  11.          }   
Simple output without paging will look like:

Paging in ASP.NET MVC 4.0
After successfully adding the references and creating student.cs class, we will write the Controller code, as shown below: 

Paging in ASP.NET MVC 4.0

Business logic
  1. using System;    
  2. using System.Collections.Generic;    
  3. using System.Linq;    
  4. using System.Web;    
  5. using System.Data;    
  6. using System.Data.SqlClient;    
  7.     
  8. namespace mvcpaging.Models    
  9. {    
  10.     public class BL    
  11.     {    
  12.         SqlHelper sql1 = new SqlHelper();    
  13.     
  14.         public List<student> studentListBind() {    
  15.             DataTable dt = new DataTable();    
  16.             SqlParameter[] GetBalance_Parm = new SqlParameter[]                 
  17.             {     
  18.                    
  19.             };    
  20.             DataSet _DS = SqlHelper.GetDataSet(SqlHelper.mainConnectionString, CommandType.StoredProcedure, "[GetStdInfo]", GetBalance_Parm);    
  21.             List<student> lst = new List<student>();    
  22.             if (_DS.Tables[0].Rows.Count > 0)    
  23.             {    
  24.                 foreach (DataRow  item in _DS.Tables[0].Rows)    
  25.                 {    
  26.                     lst.Add(new student    
  27.                     {    
  28.                         Id=Convert.ToInt32(item["id"]),    
  29.                         Name =Convert.ToString(item["name"]),    
  30.                         Fathername = Convert.ToString(item["fathername"]),    
  31.                         Mothername = Convert.ToString(item["mothername"]),    
  32.                         Age = Convert.ToInt32(item["age"]),    
  33.                         Country = Convert.ToString(item["country"]),    
  34.                         State = Convert.ToString(item["state"]),    
  35.                         Nationality = Convert.ToString(item["nationality"])    
  36.     
  37.                     });    
  38.                 }    
  39.                   
  40.             }    
  41.             return lst;    
  42.         }    
  43.             
  44.     }    
  45. }    
Add View
  1. @using PagedList.Mvc    
  2. @model  PagedList.IPagedList<mvcpaging.Models.student>    
  3.     
  4. @{    
  5.     ViewBag.Title = "Student Details";    
  6. }    
  7.     
  8. <style>    
  9.     .ul.pagination    
  10.     {    
  11.         display: inline-block;    
  12.         padding: 0;    
  13.         margin: 0;    
  14.     }    
  15.     
  16.     ul.pagination li    
  17.     {    
  18.         display: inline;    
  19.     }    
  20.     
  21.         ul.pagination li a    
  22.         {    
  23.             color: black;    
  24.             float: left;    
  25.             padding: 8px 16px;    
  26.             text-decoration: none;    
  27.             transition: background-color .3s;    
  28.         }    
  29.     
  30.             ul.pagination li a.active    
  31.             {    
  32.                 background-color: #4CAF50;    
  33.                 color: white;    
  34.             }    
  35.     
  36.             ul.pagination li a:hover:not(.active)    
  37.             {    
  38.                 background-color: #ddd;    
  39.             }    
  40. </style>    
  41. @using (Html.BeginForm())    
  42. {    
  43.     <center>    
  44.          <h2>Student Details</h2>    
  45.     <div  style="border:1px solid red; margin-left:25%; margin-right:20%">    
  46.     <table style="width:100%" border="1">    
  47.         <tr>    
  48.             <th style="width:10%; text-align:left"> @Html.Label("Student ID")</th>    
  49.             <th style="width:10%; text-align:left">@Html.Label("Name")</th>    
  50.             <th style="width:15%; text-align:left">@Html.Label("Father Name")</th>    
  51.             <th style="width:15%; text-align:left">@Html.Label("Mother Name")</th>    
  52.             <th style="width:5%; text-align:left">@Html.Label("Age")</th>    
  53.             <th style="width:15%; text-align:left">@Html.Label("Country")</th>    
  54.             <th style="width:15%; text-align:left">@Html.Label("State" )</th>    
  55.             <th style="width:15%; text-align:left">@Html.Label("Nationality")</th>    
  56.                           
  57.         </tr>    
  58.     
  59.    @for (int i = 0; i < Model.Count; i++)    
  60.    {    
  61.        <tr style="border:1px solid red">    
  62.            <td>@Model[i].Id</td>    
  63.            <td>@Model[i].Name</td>    
  64.            <td>@Model[i].Fathername</td>    
  65.            <td>@Model[i].Mothername</td>    
  66.            <td>@Model[i].Age</td>    
  67.            <td>@Model[i].Country</td>    
  68.            <td>@Model[i].State</td>    
  69.            <td>@Model[i].Nationality</td>    
  70.        </tr>    
  71.            
  72.    }    
  73.  </table>    
  74.          
  75.        
  76.     </div>    
  77.           </center>    
  78.     <div id="container" style="margin-left: 20px">    
  79.         <p></p>    
  80.         <p></p>    
  81.         <div class="pagination" style="margin-left: 400px">    
  82.             Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber)    
  83.             of @Model.PageCount   @Html.PagedListPager(Model, page => Url.Action("Index"new { page }))    
  84.         </div>    
  85.     </div>    
  86.     
  87. }   
After executing this application, the default first page (1) will open. Every page contains 5 records and the total number of records is 19 in the database. 

Paging in ASP.NET MVC 4.0

After click on 2nd page records will be show of 2nd page.

Paging in ASP.NET MVC 4.0


Paging in ASP.NET MVC 4.0

In this article, we learned how to use paging in ASP.NET MVC 4.0, using PagedList.mvc . In the next article, we will learn how to use paging with sorting in ASP.NET MVC 4.0, using PagedList.mvc.



Updated 15-Jan-2019

Leave Comment

Comments

Liked By