Infinite Scroll In ASP.Net MVC4 Using Jquery Ajax

             The infinite scroll pattern is simply a different kind of pagination. In this article, we will see how to implement an infinite scroll using HTML,CSS,ASP.NETMVC4, Jquery and Ajax.

   Infinite Scroll is a web design technique that prevents the browser scroll bar from scrolling to the bottom of the page, causing the page to grow with additional content instead.

Here, We have implemented Infinite Scroll with ASP.NET MVC, Ajax post and JSON result. With rendering Partial View to string, it makes it easy to use Ajax post and JSON result to display any complex view.

STEP1: XML Data

   Here is the xml file with book items

STEP 2: Book Class
      Here is the Book class file with the properties to load xml data.

STEP 3: DataManager Class

        Here is the DataManager Class get the book data from xml file and generate as a collection list.
BookNumber is growing by one at every time, when scroll down and next block loads.

Step 4: Controller
                     This Action result function runs at every time we scroll page down.

   




  This action returns the HtmlString of Booklist.

STEP 5: View
      
            And now let's see JavaScript we use to do Ajax post. On Index view, we have:

      We have used the foreach binding to bind the views property of the ViewModel. Inside the section, we have multiple divs to layout the Author, Title and Text.

DEMO:

       Finally run the application and see the result as below.Now scroll down and you’ll see more posts get added as you reach the bottom. You’ll notice the scrollbar goes up indicating more data is available and when you scroll down further, it shows the newly loaded data.

  

Conclusion:
        The infinite scroll pattern is simply a different kind of pagination. Use it judiciously and where appropriate. I believe it’s appropriate for streams of data rather than a fixed set of say 100 records broken up into 10 pages. For smaller fixed sets of data it’s still okay to have pagination.