Using MvcPaging in ASP.NET MVC Apps
In this post, I will demonstrate how to use NuGet package MvcPaging in ASP.NET MVC apps. MvcPaging provides a Pager HtmlHelper that renders a pager based on a PagedList implementation. MvcPaging’s Pager helper is also providing Ajax functionality for the paging implementation. You can add MvcPaging package via NuGet. The following command in the NuGet console will install MvcPaging in your project.
PM> Install-Package MvcPaging
Using MvcPaging
Step 1 – Add MvcPaging Namespace
- using MvcPaging;
Step 2 – Return the Model object as generic type IPagedList<T>
MvcPaging’s pager helper is working based on PagedList implementation and providing extension method ToPagesList that will return a generic type IPagedList
The following action methods would pass model object as IPagedList<T>
- public ActionResult Index()
- {
- int currentPageIndex = 0;
- var categories = categoryService.GetCategories()
- .ToPagedList(currentPageIndex, defaultPageSize);
- return View(categories);
- }
- public ActionResult AjaxIndex(int? page)
- {
- int currentPageIndex = page.HasValue ? page.Value - 1 : 0;
- var categories = categoryService.GetCategories()
- .ToPagedList(currentPageIndex, defaultPageSize);
- return PartialView("CategoryList", categories);
- }
Step 3 – Use the Pager HtmlHelper in Views
The below code specifies the model in View as generic type IPagedList<T>
- @model MvcPaging.IPagedList<Category>
The below code in View is using Pager Ajax helper
- <div class="pager">
- @Ajax.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount,
- "AjaxIndex", new AjaxOptions { UpdateTargetId = "divCategoryList" })
- </div>
MvcPaging is providing normal paging and Ajax paging. In the above code, we have used Ajax pager helper and the value AjaxIndex is the name of the action method for Ajax request and the UpdateTargetId is the id of the HTML element would be used to update after the Ajax request. In this example, div element divCategoryList is using for display table data.
The below is the screenshot of the UI with paging functionality
IPagedList<T> Interface
- public interface IPagedList<T> : IList<T>
- {
- int PageCount { get; }
- int TotalItemCount { get; }
- int PageIndex { get; }
- int PageNumber { get; }
- int PageSize { get; }
- bool HasPreviousPage { get; }
- bool HasNextPage { get; }
- bool IsFirstPage { get; }
- bool IsLastPage { get; }
- }
The above code blcok shows the IPagedList<T> Interface from the MvcPaging codebase. You can download the source code of MvcPaging from GitHub