In this article, we are going to learn how to do pagination in ASP.NET MVC. ASP.NET MVC 4 version and PagedList.Mvc is used to achieve this quick pagination.
Introduction
People who come from ASP.NET MVC Web Form background like me expect pagination in ASP.NET MVC also the same way where there would be a server control and we have set necessary property and handle some event to do the pagination. ASP.NET MVC doesn't work that way.
Here we have to do many things manually or using some plugins or third party component. Here comes the NuGet Packages of Visual Studio that automatically takes care of version conflicts and installation.
Objective
After going through this article, you will be able to do pagination in ASP.NET MVC 4+.
Lets start coding now
Here article assumes that before pagination, your list page looks like this. In the case below, view is Index.cshtml, Action is Index and Model is VideoModel.
Code - 1
<div class="table">
@foreach (var item in Model)
{
<div class="tr">
<div class="td">
<img src="@Html.DisplayFor(modelItem => item.ThumbnailUrl)" alt="" class="thumbnailFloat" />
<span class="listTitle"><a href="@Url.RouteUrl("Default", new { controller = "Video", action = "Details", id = item.VideoId, title = KidsFunda4.Utility.impFunctions.FilterOutStringForURL(item.Title) })">@item.Title</a></span><br />
<span class="postInfo">Posted by <a href="@Url.RouteUrl("Profile", new { controller = "Profile", action = "Index", username = item.UserName })">@item.UserName</a> on @Html.DisplayFor(modelItem => item.CreatedDateTime) | Views: @Html.DisplayFor(modelItem => item.ViewCount) </span>
<div class="desc"> @Html.DisplayFor(modelItem => item.Description) </div>
</div>
</div>
}
</div>
In the above code, we are looping through the Model object and listing the items. Its as simple as returning collection of items from the Controller and listing on the page.
How to do pagination in ASP.NET MVC?
To do pagination in ASP.NET MVC, we need to install PagedList.Mvc package using Manage NuGet Packages.... so right click your project and select "Manage NuGet Packages ..."
That will give above dialogue box, here select Online from left panel and write PagedList in the search box, after a few moment PagedList and other component will come in the middle panel.
Click on Install button against PagedList.Mvc (in the above picture, in place of green button, Install button comes and once the installation is complete then the green button appears). You must have noticed that in my case PagedList.Mvc and PagedList both are installed because PagedList.Mvc is dependent on PagedList.
Once the installation of PagedList is successful, at least two reference .dll's will be added in the Reference folder, like in below picture.
In addition to the .dll, PagedList.css file is also added in the Content folder.
In few scenarios, it may ask in which project you want to implement this to select your current project.
ASP.NET MVC Pagination code implementation
At the top of the view page, write below
@using PagedList
@using PagedList.Mvc
@model IPagedList<KidsFunda4.Models.VideoModel>
Notice that the article uses some namespaces that will help us to use classes for those namespaces that helps in pagination.
In the third line of code, instead of using IEnumerable, IPagedList is used that is part of PagedList installation.
Now, just below the Code - 1, write below code snippet or wherever you want the page numbers to appear just copy paste below code.
<div class="pagedList">
@Html.PagedListPager(Model, page => Url.Action("Index", new { page }), PagedListRenderOptions.PageNumbersOnly)
</div>
Now in the controller, modify your Action method like below
private KidsFundaDB db = new KidsFundaDB();
//
// GET: /Video/
public ActionResult Index(int page = 1)
{
return View(db.VideoModels.OrderByDescending(v => v.VideoId).ToPagedList(page, 3));
}Noice the
.ToPagedList(page, 3), this is the magic word. It accepts the page number that user is requesting to and no. of records in a page. In my case its 3. Now build the application and run it and paginated list appears like below.
PagedList Options
The good thing is, you have different choices on how pagination can appear. Below are some of them
In the View page, you can choose
PagedListRenderOptions as Classic, or ClassicPlustFirstAndLast etc.
Conclusion
Despite, ASP.NET MVC is not rich of ASP.NET inbuilt server control, the Manage NuGet Packages comes to the rescue and of course people who have made those packages to help us develop application fast, easy and efficiently.
Hope you liked this article, thanks for reading.
Do share to your friends and colleagues on social websites.