Infinite scroll with ASP.NET MVC

Written in


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:

31 responses to “Infinite scroll with ASP.NET MVC”

  1. Kotte Avatar

    Hi Ricardo, Can you please post the sample project


    1. Ricardo Avatar

      Hi Kotte, You can download the source code for this example here:


  2. henry Avatar

    thanks! it just worked


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


  4. devio Avatar

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


  5. Daniel Avatar

    How do you use for a gridview?


  6. wpro Avatar

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


  7. Ganesh NJ (@GaneshNJ) Avatar

    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 😦


    1. Ricardo Avatar

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


  8. AbP Avatar

    Very nice and simple. Thanks


  9. Nik Avatar

    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?


    1. Chanrith Peth Avatar

      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.


    2. chanrith Avatar

      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.


      1. Nik Avatar

        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.


      2. chanrith Avatar

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


  10. adevelopersnotes Avatar

    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?


  11. adevelopersnotes Avatar

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


  12. Steven Teow Avatar

    can upload the database for testing as well ?


  13. Igor Avatar

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


  14. floor lamps for living room Avatar

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


  15. Gokhan Mamaci Avatar
    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.


  16. chanrith Avatar

    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.


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


  18. ravichandra Avatar

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


  19. Alex Avatar

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


  20. Lelala Avatar

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


  21. GraficWeb Avatar

    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?


  22. MVC fan Avatar

    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.


    1. Ricardo Sanchez Avatar
      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:

      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.


  23. MVC fan Avatar

    Funny how this line was NEVER mentioned in this article.


  24. ehab20osama Avatar

    Amazing.Thank you


Leave a Reply

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

You are commenting using your 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.

Create a website or blog at

%d bloggers like this: