A new version of the MvcPaging component is available via NuGet with the following changes:

• Added ItemStart and ItemEnd properties to IPagedList (Displaying items {ItemStart} – {ItemEnd}).
• Non-canonical url’s for page 1 (https://github.com/martijnboland/MvcPaging/issues/2).

So the core library hasn’t changed much, and in all honesty, I think it’s pretty much done. Please leave a reply if you think otherwise.

What did change substantially is the sample application. It was still very much ASP.NET 1.0 with WebForms views. This is now a proper ASP.NET MVC 3 application with Razor views and the default ASP.NET MVC 4.0 template for look & feel.

The sample application can be found at GitHub.

It’s now possible to add the MVC pager to your own project with NuGet.

Or from Visual Studio with ‘Manage NuGet Packages…’ and then search for ‘MvcPaging’.

After installing, you can immediately use the Pager HtmlHelper in your views:

et voilà!

We also have include the IPagedList for your convenience:

For more info, check out the original blogpost that started it or the github project page.

Enjoy!

The MVC pager now has support for AJAX scenario’s, thanks to Bart Lenaerts. This was my first GitHub pull request and everything went pretty smoothly.

Check out the demo application for an example. Visit the GitHub project page to download the solution.

Just a short message to let you know that the MVC Pager demo is upgraded to ASP.NET MVC3 and VS 2010. Get it at https://github.com/martijnboland/MvcPaging.

During work, I discovered that the pager that I created a while ago didn’t work properly when using ASP.NET MVC2 area’s. The links that were generated didn’t count for the current area that the controller and views were in, resulting in wrong urls. Luckily the ASP.NET MVC team also ran into this issue and created an GetVirtualPathForArea() extension method on RouteCollection. Calling this one, instead of GetVirtualPath() made things work properly in area’s.

You can get the code for ASP.NET MVC 2 at http://github.com/martijnboland/MvcPaging/tree/mvc2 (mvc2 branch of the MvcPaging repository).

The sample project that belongs to the Paging with ASP.NET MVC post is upgraded to ASP.NET MVC RC. Get it from here.

The post about paging in ASP.NET MVC still gets many hits, but the demo was created with ASP.NET MVC preview 5, so therefore I upgraded the demo to ASP.NET MVC Beta. I also removed a little bug that occurred when paging an already filtered list.

You can download the updated demo here.

Updated 2011-05-12: Added NuGet package: http://blogs.taiga.nl/martijn/2011/05/12/nuget-package-for-mvc-pager/

Updated 2011-03-22: Changed download link: https://github.com/martijnboland/MvcPaging. See also http://blogs.taiga.nl/martijn/2011/03/23/mvc-pager-update-now-with-ajax-support/

Updated 2009-02-04: Upgraded source and demo to ASP.NET MVC RC1

Updated 2009-01-16: Upgraded source and demo to ASP.NET MVC Beta

Updated 2008-09-09: Source and Demo now use ASP.NET MVC preview 5

On my latest gig, we used ASP.NET MVC and it was a very pleasant experience! Very clean code, clean html output and the productivity was great (which is not very common when using a technology for the first time).

Of course, since ASP.NET MVC isn’t finished yet, it leaves something to desire. At one time we needed paging and there isn’t an out-of-the-box solution for it (yet). Some googling revealed that others had already addressed this, but to be honest, I wasn’t entirely pleased with the solutions, so I grabbed the best parts and build a generic solution out of it.

I’m in a hurry, take me to the download immediately

IPagedList<T>

First, there was the PagedList<T> that Scott Guthrie already used in one of the earliest MVC demo’s and that later appeared in improved incarnations from Rob Conery and  Troy Goode. This was a nice starting point, especially because we also used LINQ To SQL as our data access layer. To provide an extra extension point, I created an IPagedList<T> interface instead of using the PagedList<T> directly.

public interface IPagedList<T> : IList<T>
{
    int PageCount { get; }
    int TotalItemCount { get; }
    int PageIndex { get; }
    int PageNumber { get; }
    int PageSize { get; }
    bool HasPreviousPage { get; }
    bool HasNextPage { get; }
    bool IsFirstPage { get; }
    bool IsLastPage { get; }
}

Html.Pager()

After choosing the IPagedList<T> implementation I started thinking about how I could create an HtmlHelper extension method that renders the page links. First, I made the mistake to couple the helper to the IPagedList<T> and it took me a little while to realize that a paging HTML helper doesn’t need anything to know about the underlying data source. It’s sole purpose is to generate a list of hyperlinks for pages and the only thing we need to know is the total amount of items, the page size and the current page. This is what the most basic HtmlHelper extension looks like:

public static string Pager(this HtmlHelper htmlHelper, int pageSize, int currentPage, int totalItemCount)

We’re assuming that the page links point to the the current controller and current action. Alternatively, it’s possible to supply a different action:

public static string Pager(this HtmlHelper htmlHelper, int pageSize, int currentPage, int totalItemCount, string actionName)

Combining the Pager html helper and IPagedList<T> in a view page (that inherits from ViewPage<IPagedList<Product>>):

<table class="grid">
    <thead>
        <tr>
            <th>Product name</th>
            <th>Category</th>
        </tr>
    </thead>
    <tbody>
        <% foreach (var product in Model) { %>
            <tr>
                <td><%= product.Name %></td>
                <td><%= product.Category %></td>
            </tr>
        <% } %>
    </tbody>
</table>
<div class="pager">
    <%= Html.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount) %>
</div>

results in this:

You probably recognize the digg-style appearance of the pager. Thanks to the ASP.NET MVC sample application KIGG for inspiration .

Internally, the pager uses RouteTable.Routes.GetVirtualPath() to render the url’s so the page url’s can be configured via routing to create nice looking url’s like for example ‘/Categories/Shoes/Page/1′ instead of ‘/Paging/ViewByCategory?name=Shoes&page=1′.

Advanced scenarios

Many scenarios where you want to use paging also use filtering. It’s possible to pass extra parameters to the Pager helper via a RouteValueDictionary or an anonymous type. This adds these parameters to the page links that are generated:

<div class="pager">
    <%= Html.Pager(ViewData.Model.PageSize, ViewData.Model.PageNumber, ViewData.Model.TotalItemCount, new { categoryname = ViewData["CategoryDisplayName"] } )%>
</div>

That’s it. A complete solution with demo project can be downloaded below. Feel free to leave any comments or remarks. One of the things I’m not happy about is that I failed to properly unit test the pager, but that’s for a different post.

Download

Download the paging sample solution, incl. the demo MVC web project

Check also the AJAX version of the pager written by Daniel Iglesias: http://danieliglesiaseng.blogspot.com/2010/01/ajax-paging-with-aspnet-mvc.html.