ASP.NET MVC Paging Done Perfectly

In what now seems like ages ago, I once wrote about a paging solution that I had created for my ASP.NET MVC 1.0 applications in my article, "Add Paging Functionality to your ASP.NET MVC site." Over the years, I've used that solution in a few of my own ASP.NET MVC 1.0 and 2.0 applications and received several different requests for the code samples accompanying the article. However, I've always felt that paging solutions were a bit of a kludge that needed some serious help, additions, changes, and a thorough overhaul.

Building the Perfect ASP.NET Paging Solution

Recently, I found myself needing paging functionality in an app I was writing. Amazingly, it's actually also been a while since I've written an MVC app that really needed paging, so I haven't touched my paging functionality in quite a while. When I dusted it off recently, I felt the abject horror that most of us do when we look at code we've written years ago. Calling my previous solution sophomoric would have been generous. The code was filled with hideous coupling errors, it violated a couple of key tenets of MVC, and really left a lot to be desired. In its defense, though, it did actually get the job done early on—with a bit of a price.

Still, going forward, I wanted to build the perfect paging solution; something that took advantage of all the later MVC goodies, such as fun templates, expressions, and other improvements that shipped around the MVC 3.0 timeframe. To that end, I wanted very clean semantics, where objects were completely decoupled from rendering and presentation (i.e., HTML), and where I could easily unit test all of my assumptions and functionality to verify that things would behave as expected. Having a paging solution like that would let me avoid spending gobs of time debugging and troubleshooting HTML, outputs, and intermingled classes, as I've done in the past.

I created a quick laundry list of all the features this paging solution would need, only to realize that this wasn't going to be a simple undertaking. At that exact moment, I wondered if wasn't being a bit dumb to assume that nothing else was available. Happily, a bit of time on Google led me to a fantastic solution—one that exceeded my own needs and expectations.

Troy Goode's PagedList.MVC—A Fantastic Solution

Within just a few minutes of glancing at the samples on the PagedList.MVC GitHub page, I knew I had found a winner. The examples showed how the core functionality of this paging solution is effectively an extension of the same notion of an IPagedList<> that I had used in my own original solution, only the example was implemented in a much cleaner way and with better features and functionality than what I had initially created. In short, this was and is the solution I was dreaming of.

Deploying and using this paging solution was also trivial. Here's what I had to do, in case anyone else finds this article and is looking for simple instructions on how to add paging functionality to their ASP.NET MVC site:

To better put this into perspective, assume I've got the following code, which returns 50+ results that are just handed out to my current view and displayed as one long, scrollable, list of results:

After dropping in the PagedList.Mvc NuGet package and wiring up CSS, I'd end up with a method where I'm now passing a PagedList to my view:

In my view, I'll also have to change my @model declaration as well. Prior to adding paging my @model would have looked like this:

After paging, it'll look like this:

The beauty of this is that both List and PagedList are just implementations of IEnumerable, so any code that looped over my List will still loop over my PagedList without any changes. The only difference, of course, is that it'll only spit out pageSize records and will be paged to the current page value found in the query string.

All you need to do from here is to drop an @Hmtl.PagedListPager() into the mix. Doing so can be pretty simple to start with, because all you need is an action or page to return to, along with a means of expressing which page you're currently on. Optionally, you can also define how big your pageSize is. You can tweak or set via a drop down somewhere on your page that lets users to set this value themselves:

As you can see, the @Model, as a PagedList also exposes some additional members that can be very easily queried to give users some fantastic context as pictured below:

Scratching the Surface

The best part is that I've only scratched the surface of what this solution can do. Additional information on how to style or control pager output can be found on the main site, or by simply testing and poking around with various overloads and options; I found the usage of this solution to be very intuitive.