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:

controller

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.

javascript

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:

view

Where is the sample project?

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

Advertisements

31 Comments

  1. Hi Ricardo, Can you please post the sample project
    ?

    Like

    1. Hi Kotte, You can download the source code for this example here: http://infinitescroll.codeplex.com/

      Like

  2. thanks! it just worked

    Like

  3. […] 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,) […]

    Like

  4. Thanks. Amazing what magic a couple lines of code can achieve… 😉

    Like

  5. How do you use for a gridview?

    Like

  6. i am new in mvc 3, where is the data base file in this project

    Like

  7. 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

    1. Could you be more clear as to what the problem is? what do you mean everything gets stopped?

      Like

  8. Very nice and simple. Thanks

    Like

  9. 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

      2. That does sound complex Nik. I’d like to see this implementation.

        Like

  10. I tried to open this with VS2010 but I am getting an error that says “The project type is not supported by this installation.” What do I need installed to open this solution?

    Like

  11. Fixed my error. I didn’t have the ASP.NET MVC 3 package installed. Thanks!

    Like

  12. can upload the database for testing as well ?

    Like

  13. could provide us with a database, to test the example?

    Like

  14. Very interesting info!Perfect specifically what I appeared to be searching for!

    Like

  15. Gokhan Mamaci

    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

  16. 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

  17. […] Let’s have a look at how Infinite Scrolling can be implemented: […]

    Like

  18. ravichandra

    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

  19. Cool, thanks a lot, Ricardo
    Just run my own code based on your example.

    Like

  20. Thanks, by checking your example i found the bug in my own construction due my thorough check on your solution 🙂
    Regards

    Like

  21. GraficWeb

    Hi, i am new in MVC, how to pass a string between the view? i have a string called searchSrting which i need to pass, how to do?

    Like

  22. 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. Ricardo Sanchez

      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

  23. Funny how this line was NEVER mentioned in this article.

    Like

  24. Amazing.Thank you

    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

This site uses Akismet to reduce spam. Learn how your comment data is processed.