Pagination in ASP.NET MVC 4

Sheonarayan
Posted by in ASP.NET MVC category on for Intermediate level | Points: 250 | Views : 97537 red flag
Rating: 5 out of 5  
 6 vote(s)

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.
Page copy protected against web site content infringement by Copyscape

About the Author

Sheonarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com

Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Brij on: 10/24/2013 | Points: 25
Nicely explained!!
Posted by: Sheonarayan on: 10/24/2013 | Points: 25
Thanks Brij.
Posted by: stevenpkenticloud-24799 on: 11/27/2013 | Points: 25
Sheo, thank you thank you thank you!!!!! This is the best explanation of how to use PagedList in MVC4. EXCELLENT EXPLANATION!!!
Steven
Posted by: Sheonarayan on: 11/27/2013 | Points: 25
Thanks Steven !
Posted by: Dhrumil247 on: 2/9/2015 | Points: 25
Thanx bro...keep it ip.. :)

Login to post response

Comment using Facebook(Author doesn't get notification)