Implementing Pagination in ASP.NET MVC: Simple and Powerful
For several years, I’ve been developing web applications from the ground up. One common requirement in each project is implementing pagination for lists. While there are tools available for creating pagination in ASP.NET Core, I found the need for a more flexible, customizable, and reusable solution that wouldn’t impact the Controller, View, or ViewModel.
That’s why I created MvcPagedList.Core, which I’ve published as a NuGet package
What is MvcPagedList.Core ?
It is a lightweight tool designed for easily implementing paging in ASP.NET Core, all while fetching data in manageable chunks from the database.
Here’s what makes it stand out:
- Very simple to use
- Quick access to pages by scrolling
- Enable ajax with full support for data-ajax attributes
- Built-in ajax loading
- Full control to customize the UI
- No effect on Controllers, Views and ViewModels
- No need to link any js or css file
- Improve performance by getting data for each pages as a new chunk from database
- Free and open-source
- Full documentation on GitHub
- Easy installation via NuGet
- Support all MVC projects with netcoreapp3.1 TargetFramework and after
Install via NuGet
To install MvcPagedList.Core, run the following command in the Package Manager Console.
pm> Install-Package MvcPagedList.CoreHow to use ?
It’s incredibly easy to use MvcPagedList.Core. In your controller, all you need to do is provide the PageCount, CurrentPage, and TotalItemCount, and send them to the view using ViewBags. Then, in the view, simply call PagedList.Pager() to display the pagination. For a hands-on example, you can check out the sample project on GitHub.
That’s it! Just by adding the above lines of code, You will have the pagination.
How to pass route values to the controller?
PagedList.Pager() has a routeValues parameter you can use like below to pass your data to the controller:
How to enable ajax pagination?
PagedList.Pager() has an ajaxAttributes parameter you can use like below to enable ajax:
Here you can use all data-ajax attributes. Just replace “-” with “_”
Don’t forget to add ajax unobtrusive scripts to your page
How to set a custom ajax loading?
Default ajax loading is enabled by default but if you want to have your own loading just add your loading html and css to the page and then set its id for data_ajax_loading in ajaxAttributes like below:
Don’t forget to add # at the begginig of the id. for example, if your loading elemnt id is my-custom-ajax-loading, It should be
data_ajax_loading = "#my-custom-ajax-loading"
How to customize the pagination UI?
PagedList.Pager() has a pagerOptions parameter. It has many properties that you can use to customize the pagination UI. For example, you can change the labels, have your own style or add your own classes to pagination elements. For a comprehensive list of customizable items, please refer to the package repository on GitHub.
Supporting
We greatly appreciate your support! You can help us by giving the project repository on GitHub a star ⭐, contributing, or sharing it with anyone who might find it beneficial.
