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

  1. 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>

 

  1. public ActionResult Index()
  2. {
  3. int currentPageIndex = 0;
  4. var categories = categoryService.GetCategories()
  5. .ToPagedList(currentPageIndex, defaultPageSize);
  6. return View(categories);
  7. }
  8. public ActionResult AjaxIndex(int? page)
  9. {
  10. int currentPageIndex = page.HasValue ? page.Value - 1 : 0;
  11. var categories = categoryService.GetCategories()
  12. .ToPagedList(currentPageIndex, defaultPageSize);
  13. return PartialView("CategoryList", categories);
  14. }

 

Step 3 – Use the Pager HtmlHelper in Views

The below code specifies the model in View as generic type IPagedList<T>

  1. @model MvcPaging.IPagedList<Category>

The below code in View is using Pager Ajax helper

  1. <div class="pager">
  2. @Ajax.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount,
  3. "AjaxIndex", new AjaxOptions { UpdateTargetId = "divCategoryList" })
  4. </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

pager

 

IPagedList<T> Interface

 

  1. public interface