Pagination in MVC4

Pagination in MVC4

This post will explain pagination in MVC4.

You need to install NuGet Package manager named PagedList. You can get the same by clicking NuGet PagedList.

Once this is installed in your project, add a reference to PagedList and PagedList.Mvc dlls. In your view, include the following code at the top as:

@using PagedList;
@using PagedList.Mvc;

The model which your view will be returning should be IPagedList<> rather than IEnumerable<>.

Now you are ready to use the Html Helper for the PagedList. i.e., @Html.PagedListPager() where you can also specify various display options for the pagination.

The view will look like this:

@using PagedList;
@using PagedList.Mvc;
@model IPagedList&ltDistribution.Entities.District&gt
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="../../Content/PagedList.css" rel="stylesheet" type="text/css" />
<h2>Display</h2>
@Html.ActionLink("Create New", "Create")


The various display options for the PagedList can be found in PagedList.Mvc namespace 

inside the class PagedListRenderOptions.

You can make any changes as per the requirement.



public PagedListRenderOptions()
{
 DisplayLinkToFirstPage = PagedListDisplayMode.IfNeeded;
 DisplayLinkToLastPage = PagedListDisplayMode.IfNeeded;
 DisplayLinkToPreviousPage = PagedListDisplayMode.IfNeeded;
 DisplayLinkToNextPage = PagedListDisplayMode.IfNeeded;
 DisplayLinkToIndividualPages = true;
 DisplayPageCountAndCurrentLocation = false;
 MaximumPageNumbersToDisplay = 10;
 DisplayEllipsesWhenNotShowingAllPageNumbers = true;
 EllipsesFormat = "…";
 LinkToFirstPageFormat = "««";
 LinkToPreviousPageFormat = "«";
 LinkToIndividualPageFormat = "{0}";
 LinkToNextPageFormat = "»";
 LinkToLastPageFormat = "»»";
 PageCountAndCurrentLocationFormat = "Page {0} of {1}.";
 ItemSliceAndTotalFormat = 

"Showing items {0} through {1} of {2}.";
 FunctionToDisplayEachPageNumber = null;
 ClassToApplyToFirstListItemInPager = null;
 ClassToApplyToLastListItemInPager = null;
 ContainerDivClasses = new [] { "pagination-container" };
 UlElementClasses = new[] { "pagination" };
 LiElementClasses = Enumerable.Empty();
}

The Complete View is as:

View



@using PagedList;
@using PagedList.Mvc;
@model IPagedList<distribution .entities.district="">
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="../../Content/PagedList.css" rel="stylesheet" 

type="text/css" />
<h2>Display</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.First()

.State.StateName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.First()

.DistrictName)
        </th>
        <th></th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <td>
         @Html.DisplayFor(modelItem => item.State.StateName)
        </td>
        <td>
         @Html.DisplayFor(modelItem => item.DistrictName)
        </td>
        <td>
         @Html.ActionLink("Edit", "Edit", new 

{ id=item.DistrictId }) |
         @Html.ActionLink("Details", "Details", new 

{ id=item.DistrictId }) |
         @Html.ActionLink("Delete", "Delete", 

new { id=item.DistrictId })
        </td>
    </tr>
}
</table>
@Html.PagedListPager(Model,page=>

Url.Action("Index",new {page}), 

new PagedListRenderOptions 

{Display=PagedListDisplayMode.IfNeeded, 

DisplayPageCountAndCurrentLocation=true})

Now that your view is ready, you will have to write code for your controller for the pagination. This is as under:

Controller

public ActionResult Index(int? page)
{
return View(db.Districts.ToList()

.ToPagedList(page ?? 1,4));
}