Pages

Monday 7 April 2014

Pagination in MVC4


Here I am going to show you how to apply pagination in mvc4. Many time while showing list of items from database there may be situation where you want to show only limited number of items at a time in this situation pagination is used.

To apply pagination in mvc4 you need to download PagedList.mvc package from nuget package manager. To download this follow following steps:

1.open your project and click on Tools menu.
2. Tools --> Library Package Manager --> manage nuget packages for solutions
3.Now choose online as option from left hand side list.
4.And in search box type PagedList.Mvc 
5.Now in search result you will get PackgedList.Mvc 
     and install button click install button.
6. After installation in your project reference two references 
        will be get added. And also PagedList.css added into your content 
        directory.
7.Add following reference on your view and controller to this package
a. using PagedList;
   b. using PagedList.Mvc;

Controller Action:
      public ActionResult Index(int? page )
        {
            return View(db.IrdMasters.ToList().ToPagedList(page ?? 1,2));
        }

In above code I passed nullable reference named page this is necessary in case of first page loading. And also added ToPagedList(page ?? 1,2) here I specified number of record i.e. 3 will be displayed at a time.

View:
@using PagedList;
@using PagedList.Mvc;
@model IPagedList<Distribution.Entities.IrdMaster>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
    Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table border="1">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.First().IrdCode)
        </th>
        <th>
        Edit
        </th>
        <th>
        Details
        </th>
        <th>
        Delete
        </th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.IrdCode)
            </td>
            <td>@Html.ActionLink("Edit", "Edit", new { id = item.IrdId })
            </td>
            <td>@Html.ActionLink("Details", "Details", new { id = item.IrdId })
            </td>
            <td>
                @Html.ActionLink("Delete", "Delete", new { id = item.IrdId })
            </td>
        </tr>
    }
</table>

@Html.PagedListPager(Model, Page => Url.Action("Index", new { Page }),
new PagedListRenderOptions {Display=PagedListDisplayMode.IfNeeded, DisplayPageCountAndCurrentLocation=true})

In above code I replaced IEnumerable with IPagedList because here we are giving the only that much record that are set into controller action instead of whole list.

Also I added one html helper at the end after the table that shows the Pagination option at bottom of table that is shown into our view. Here in this helper I specified lots of option like where to redirect(Index Action) and passing current clicked pagination option.

No comments:

Post a Comment