PagedLIst.MVC grid

How to configure PageListGrid in MVC

Posted on

This article explains how to implement paging and sorting in MVC using PagedList with Ajax:

PagedList is a library that enables you to easily take an IEnumerable/IQueryable, chop it up into “pages”, and grab a specific “page” by an index. PagedList.Mvc allows you to take that “page” and display a pager control that has links like “Previous”, “Next”, etc.

PagedList grid

Configuration for loading Grid with Ajax :-

Install “PagedList.Mvc” via NuGet – that will automatically install “PagedList” as well.

  • Make sure you are adding the unobtrusive in the scripts section of the view as below code.
    View
  • Create a partial view for Grid which is (UnobtrusiveAjax_Partial) in the below example
    Partial View
  • Call PagedListPager method in the view by passing the list of parameters below:-
    data(“Names”),

    Action Name(“Index”),

    PageNumber ,

    PagedListRenderOptions – EnableUnobtrusiveAjaxReplacing is the option type in ajax based call.

    UpdateTargetId (“unobtrusive”)- the ID of the which need to be updated on paging.

    OnComplete (“PagedOnComplete”) – The javascript function PagedOnComplete() will be triggered OnComplete of Grid loading.

  • In Controller the action method must have ‘page’ as the first parameter to identify the page number

  • Return the partial view if it is AjaxRequest from client. So that the partial view will get return and the partial view will be reloaded.