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

  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 IPagedList<T> : IList<T>
  2.     {
  3.         int PageCount { get; }
  4.         int TotalItemCount { get; }
  5.         int PageIndex { get; }
  6.         int PageNumber { get; }
  7.         int PageSize { get; }
  8.         bool HasPreviousPage { get; }
  9.         bool HasNextPage { get; }
  10.         bool IsFirstPage { get; }
  11.         bool IsLastPage { get; }
  12.     }

 

The above code blcok shows the IPagedList<T> Interface from the MvcPaging codebase. You can download the source code of MvcPaging from GitHub

Published Wednesday, July 6, 2011 1:51 AM by shiju

Comments

# re: Using MvcPaging in ASP.NET MVC Apps

Friday, July 8, 2011 5:11 AM by calabonga

I have my own realization ASP.NET MVC3 PagedList (and AJAX) in my blog (www.calabonga.com/.../ViewPost.aspx and www.calabonga.com/.../ViewPost.aspx).

And you can use as Nuget-package named PagedListExt

# re: Using MvcPaging in ASP.NET MVC Apps

Friday, July 22, 2011 11:30 PM by Steve B

Thanks for the post!

# re: Using MvcPaging in ASP.NET MVC Apps

Thursday, July 28, 2011 6:28 AM by Arash Karami

nice post

# re: Using MvcPaging in ASP.NET MVC Apps

Friday, July 29, 2011 8:12 PM by nhim nham nhi

can we strore data to javascript so that i can take advantage of knockout js in our application

# re: Using MvcPaging in ASP.NET MVC Apps

Saturday, July 30, 2011 9:36 AM by prahlad

cool post. I have another question. Can we have edit and add in a modal pop up instead of going to new page.

I have never seen those examples for MVC apps.

Thanks

# re: Using MvcPaging in ASP.NET MVC Apps

Sunday, July 31, 2011 10:00 PM by Mikee

This is great! I migrated the demo project to Razor but when paging with ajax it keeps on redirecting to "/Paging/AjaxPage?page=xx"... Any clue? Thanks :)

# re: Using MvcPaging in ASP.NET MVC Apps

Tuesday, August 23, 2011 5:10 PM by youtubeline

great post shiju

# re: Using MvcPaging in ASP.NET MVC Apps

Thursday, April 5, 2012 4:55 PM by Reza

Thanks for cool post,a have a question.

is Paging in this article server side?or just is extension for UI?

# re: Using MvcPaging in ASP.NET MVC Apps

Sunday, June 17, 2012 11:06 AM by Shakun Shrestha

Can we implement sorting using mvcPaging?

# re: Using MvcPaging in ASP.NET MVC Apps

Sunday, June 17, 2012 11:06 AM by Shakun Shrestha

Can we implement sorting using mvcPaging?

# re: Using MvcPaging in ASP.NET MVC Apps

Monday, December 23, 2013 2:56 AM by MVC4 Learner

@Ajax.Pager ......  (Not Working)

Leave a Comment

(required) 
(required) 
(optional)
(required)