Announcement

Tuesday, 8 April 2014

Pagenation in MVC4

Pagenation in MVC4
This post will explain pagenation 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 pagenation.
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 pagenation. This is as under:

Controller

public ActionResult Index(int? page)
{
return View(db.Districts.ToList().ToPagedList(page ?? 1,4));
}

No comments: