Pagination in MVC using PagedList

Lets learn how to do the Pagination in ASP.NET MVC. Pagination is a common requirement in a web application when it comes to show records from the databases or a static source. here we are going to do the pagination in MVC using PagedList nuget package.

First create the MVC project and add a controller method to display the data records. For this article I’m using a .NET 4.8 MVC project. This is a very simple way to do the pagination.

I’m not going to use database part here since its out of scope for this article. We can use just hard coded data. Once we run the project, we will see the page like below without any paging by default. You can just add a controller named Project and add a model named Project. Then use a hardcoded data for this example.

Then We need to install the PagedList nuget package from the nuget package manager. We can use the PagedList.MVC package specially designed for MVC platform . Install both PagedList packages.

Pagination in MVC using PagedList is the easiest way in the perspective of implementation. Now lets try to apply this pagination to the Index page above.

So I’m going to show 5 results per page. We can configure this number of records per page using our code. Now we need to add the PagedList namespace at the top of the Project controller.

using PagedList;

Now add the page number as a parameter in index action.

public ActionResult Index(int? page)

Then the index action will look as below.

public class ProjectController : Controller
{
  // GET: Project
  public ActionResult Index(int? page)
  {
    int pageSize = 5; // Configure paging size
    int pageNumber = (page ?? 1);

    return View(GetProjects().ToPagedList(pageNumber, pageSize));
  }
}

That’s it for the controller part. Pretty simple isn’t it? Now lets move to the view of the index action and then add the below code in the top of the Index.cshtml view of Projects Controller.

Changes in View

@model PagedList.IPagedList<Pagination.Models.Project>
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

Now change the HTML table header as below. Because we changed the model in the view.

 <tr>
<th>
Project Name
</th>
<th>
Project Manager Name
</th>
<th>
Project Status
</th>
<th>
<th></th>
</tr>

Now add the below code at the bottom of the view. This code part is for the paging element rendering.

Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount 
@Html.PagedListPager(Model, page => Url.Action("Index", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })) 

Final Look of pagination 

Now run the project and go to the Project page. Now we can see the pagination section is available and working! 🙂

This is the simplest and very straight forward way to implement the Pagination in MVC project. We can leverage this to include sorting and searching also with this pagination.

Full project for this example can be found at https://github.com/sajithdilhan/Pagination_MVC_Example