Infinite scroll with ASP.NET MVC

An infinite scroll is a nice solution when you need to display large amounts of content in page, it helps by increasing performance in such a page because only a specific number of items is shown when the page first loads. As the user scrolls down, more content is shown. An infinite scroll is a better solution than having a paginated view of the page which usually breaks the flow of the page by splitting the content into multiple pages and then users have to click on a button or link to be able to see the next group of items…

I’ve used the following infinite scroll solution with ASP.NET MVC sites and it works great and it is simple to implement, all you need is jQuery and a little code in the controller and the view.

First, add a parameter to the controller action that returns the data for your page, this parameter is the one that we’ll use to specify the page number we need to get data for. The real work happens in the GetPaginatedProducts method, every time the user scrolls down the page this method is called by the controller action, we pass the page number and then use the Skip Linq command to get the next set of items.

The Controller

Here is the code we need in the controller for the infinite scroll to work:

The JavaScript

The following is the javascript needed to display a loading image and to initiate the call to the Product action on the HomeController, see below. Also, you will need to create a loading image to display while the application is getting data from the server, I used this site to create mine.

The View

Finally, in the view we make sure we have at least two divs, one with the id “productList” where the data is appended to when scrolling to the bottom of the page and another one with the id “loading” to use it to display the loading image:

Where is the sample project?

I’ve added the sample project to CodePlex, you can download it here: https://github.com/ricardodsanchez/InfiniteScroll

31 Thoughts

  1. I’m implementing infinite scroll paging using the given exam, but not able to return the data from the database.

    Everything is working fine, until I return a simple string array along with pager object, as soon as I pass a array of object with pager, everything get stopped.

    How to get rid of this 😦

    Like

  2. When I ran this sample project I was on a large monitor where the initial page did not render a scroll bar. Thus I was not able to scroll and get the next page! When I increased the page size to about 20, I got a scroll bar which then made the example work properly. So my question is how do you force the initial load of the page to render with a scroll bar so that this approach can work?

    Like

    1. A work around to this is to add a “Load more results” button at the bottom of the list. Because the loading of new results is based on the position of the scrollbar it can not calculate or detect an action if there is no scrollbar available.

      Like

    2. You could put a “Load more results” button at the bottom of the list since there’s no other way to load the data if no scrollbar is present. Or you can make the initial height of the div 10% taller than the screens height.

      Like

      1. Thanks chanrith. I haven’t spent much time on this to be honest but my preferred approach would be to use some math to figure out how many items can fit on the user’s screen and then adjust the page size. It is slightly complex but I have done this earlier for a grid control that I was working on. You take the height of each row, use jQuery to figure out the container’s height and use some approximations to adjust the page size.

        Like

  3. The database is AdventureWorks.mdf. This is a sample database when you setup MSSQL server. So you can attach it if it is not in the list of your server. Search for the file. It will be in the data folder of the SQLServer installed folder. Furthermore you should modify web.config in order to point to the right server instance (i.e. ./SQLEXPRESS)

    A bug: IF screen is big (like 1900*1420) the screen does not have a scrollbar, then it does not work. You should resize screen smaller in order to get access to the scrollbar.

    Like

  4. Thanks for this very simple easy to follow example. This is a good base to extend and possibly apply to a grid scenario. I’ll post my implementation when I’m done with all credits due here.

    Like

  5. Source code not working. I’ve changed the connection string still its not working. Are there any required changes i’ve to make before run the project…..

    Like

  6. Either i am wrong or the author is lying. Everytime it is loading all rows in Product table. That’s NOT GOOD.
    This means it is defeating the purpose of loading as it is needed.
    var listOfProducts = _data.Products.Where(x => x.ProductLine != null); //this line is retrieving all rows evertime.=BAD=DEFEAT THE PURPOSE of doing this LOAD MORE AS IT IS NEEDED.

    Like

    1. You are correct and thank you for pointing this out. This code was written over 5 years ago. I updated the code that makes the call to the db to bypass the records that aren’t being returned: https://github.com/ricardodsanchez/InfiniteScroll/blob/master/InfiniteScroll/Controllers/HomeController.cs#L40

      The code was already only passing the next set of records to the UI as intended, but the query itself was returning all of them AND then filtering them out. Thanks.

      Like

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s