What is MvcPagedList.Core ?

It is a light tool to create easily paging in ASP.NET Core MVC that gets data as chunks from database.

• 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.Core

You can also view the package page on NuGet.

How to use ?

It is very simple to use. You just need to provide PageCount, CurrentPage and TotalItemCount in your controller and send them by ViewBags to the view. Then in the view you just need to call PagedList.Pager() to show the pagination. It also has a sample project on GitHub.

PagedList.Pager() has some parameters. You can use actionName, controllerName and areaName to send requests created by the pagination. Another parameters are routeValues, ajaxAttributes and pagerOptions that are described in the following.

@PagedList.Pager(actionName: "search", controllerName: "home",
    pagerOptions: new PagerOptions
    {
        CurrentPage = (int)ViewBag.CurrentPage,
        PageCount = (int)ViewBag.PageSize,
        TotalItemCount = (int)ViewBag.TotalItemCount,
    } )
    

That's it! Just by adding the above lines of code, You will have the pagination.

How to provide needed data for the pager ?

PagerOptions parameter in PagedList.Pager() needs CurrentPage, PageCount and TotalItemCount to make the pagination. A simple way to pass them from controller to the pager in the view is using ViewBags. For providing these items you need to run some queries on database, Here is an example to provide these data in a controller by using an application service. Review the codes to learn how to do it.

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:

@PagedList.Pager(actionName: "search", controllerName: "home",
    routeValues: new
    {
        //Here we set term as a value and send it to the controller
        term = Context.Request.Query["term"],
    },
    pagerOptions: 
    {
      ...
    } )
    

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

@PagedList.Pager(actionName: "search", controllerName: "home",
    ajaxAttributes: new
    {
        data_ajax = "true",
        data_ajax_update = "#ajax-show-list",
        data_ajax_method = "GET",
        data_ajax_mode = "replace"
    },
    pagerOptions: 
    {
      ...
    } )
    

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 first of the id. for example, if your loading elemnt id is my-custom-ajax-loading should set data_ajax_loading = "#my-custom-ajax-loading"

@PagedList.Pager(actionName: "search", controllerName: "home",
    ajaxAttributes: new
    {
        data_ajax = "true",
        data_ajax_loading = "#my-custom-ajax-loading",
        data_ajax_update = "#ajax-show-list",
        data_ajax_method = "GET",
        data_ajax_mode = "replace"
    },
    pagerOptions: 
    {
      ...
    } )
    

How to customize the pagination UI?

PagedList.Pager() has a pagerOptions parameter. It has many properties that you can use to customize the pagination. Here is a table to describe the properties:

Prop Name	Description
TotalItemCount	It is used to show total items count and should be provided by Controller
PageCount	It is used to show total pages count and should be provided by Controller
CurrentPage	It is used to show current page and should be provided by Controller
DisplayMode	It used to controll display mode for the pagiation and has 3 options: • use DisplayMode.Never when you want to hide the pagination in UI • use DisplayMode.IfNeeded when you want to show the pagination if there is atleast 2 page to show • use DisplayMode.Always when you want to show the pagination even there is 0 or 1 page
DisplayLinkToPreviousPage	Set it to false if you dont want to show the previous btn
DisplayLinkToNextPage	Set it to false if you dont want to show the next btn
DisplayInfoArea	Set it to false if you dont want to show the information area and just need to show the pages. information area is a section below the pages to show TotalItemCount and PageCount and CurrentPage
DisplayPageCountAndCurrentLocation	Set it to false if you dont want to show PageCount and CurrentPage in info area
CurrentLocationFormat	It is a lable for currentPage. for example 'page' in 'page 1 of 12'
PageCountFormat	It is a lable for PageCount. for example 'of' in 'page 1 of 12'
DisplayTotalItemCount	Set it to false if you dont want to show TotalItemCount in info area
TotalItemCountFormat	It is a lable for TotalItemCount. for example 'total items count' in 'total items count 400'
LinkToNextPageFormat	It is a lable for next btn. for example 'next' or '>>'
LinkToPreviousPageFormat	It is a lable for prev btn. for example 'prev' or '<<'
WrapperClasses	It is used to add a class from your custom css for main wrapper of the pagination
UlElementClasses	It is used to add a class from your custom css for ul tage that wrapps all page numbers
LiElementClasses	It is used to add a class from your custom css for li tags that wrapps each page number
GetStyleSheetFileFromCdn	Set it to false if you dont want to load css file from CDN. Then you have to add it to your pages. Also you can download the css file and modify it to make your own style then add it to your pages
DisplayPageNumbers	Set it to false if you dont want to show the pages and just need to show info area
EnableDefaultAjaxLoading	Set it to false if you dont want to show ajax loading element
AjaxLoadingFormat	Let it empty if you want to show default ajax loading or write a text to show when ajax request is sending by the pagination. for example you can write 'Please wait ... ' and it will be shown during an ajax request

Supporting

We work hard to make something useful for .NET community, please give a star ⭐ if this project helped you! We need your support by giving a star or contributing or sharing this project with anyone who can benefit from it.

Author & License

This project is developed by Hamed Shirbandi under MIT licensed. Find Hamed around the web and feel free to ask your question.

Screenshots