Grids, Paging and Infinite Scrolling

In Good Old ASP.Net, if you wanted to display a large data set, you chose a DataGrid or a GridView, connected it to a DataSet, and you got paging and sorting with a couple of clicks. If you wanted something fancy, like Ajax-style partial postbacks, there was the UpdatePanel. And if you wanted to achieve database-side paging and sorting (rather than C# = client-side), you needed to add some magic to get it to work.

Things change as we move on the ASP.Net MVC. The simplest way to display data is to have a foreach loop iterating a List<T> or array T[], and render the <tr>’s or <div>’s for each record. The MvcContrib project on CodePlex contains a Grid helper for every version of MVC. As of MVC 3, there is a WebGrid (blog, blog, blog) which also implements paging and sorting.

Server-side paging again is not the default functionality, but can be implemented with a couple lines of code, as illustrated on MSDN and SO. (The clarify the term “server-side”: it means that the database query returns only the records resulting from paging and sorting parameters. In case of a web application, even though running on a web server, the code that retrieves the database result is considered to be the client, as in “database client”)

But hey, the web moves on, and paging is out, and infinite scrolling is the new hype UI paradigm. Even though I already knew it from Google image search, Twitter, WordPress, or Facebook, I became aware that there was a term for it from the Coding Horror blog. Of course, the new approach has its drawbacks, and the blog also lists a couple of them, and not everybody likes it, at least not everywhere.

Infinite Scrolling also has some “funny” consequences, as stated in this comment:

Personally, I dislike the feature, but it does work better on some sites than others. Pinterest and Twitter use the technique appropriately. Facebook on the other hand, does not. Why do I say that? Have you tried to access the links they place at the very bottom of the page? It’s impossible when content is being continually added, pushing those links out of view time and time again.

Therefore, no footer on endless pages!

To implement infinite scrolling in ASP.Net MVC, there are already a couple of libraries available: Infinite Scroll on CodePlex (blog), the Endless Scroll (jquery archive, github, blog) and Infinite Scroll (web, github, sample,) jQuery Plugins, or custom jQuery code (sample, demos).

While researching this post, I also came across a hybrid of pagination and infinite scroll:

So here’s a hybrid solution that still separates content into pages and loads them when you scroll down but also allows you to skip around.

Page links are inserted between the content that’s been loaded and appended.

This solves multiple problems:

  • Separates content into pages so users know how “far” they are into your site and can find his/her way back to their favorite content by remembering the “page” they were last on.
  • No more linear flow, users can skip pages if they know the content they’re looking for is much further in.
  • If you skip pages they won’t load, saving time and bandwidth.
  • If you did skip pages, you can go back and load them by clicking on their page number.

 

One Response to Grids, Paging and Infinite Scrolling

  1. […] In ASP.Net MVC you can display lists of data either as a grid with paging, just as in ASP.Net, or, as I prefer most often, using Infinite Scrolling. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 72 other followers

%d bloggers like this: