Registration open for April 2018 batches of ASP.NET MVC and Design Patterns instructor-led online courses. Conducted by Bipin Joshi on weekends. Register today ! Click here for more details.

Infinite scrolling using jQuery Ajax and ASP.NET MVC

Web applications such as Facebook and Twitter use a technique known as
infinite scrolling or endless scrolling wherein data is loaded on the fly when a
user scrolls to the bottom of a web page. There are many jQuery plugins that
help you enable such a feature in your web application. However, if you wish to
avoid any third-party dependency or have some specific needs, you can add your
own infinite scrolling with a few lines of jQuery code and ASP.NET MVC. This
article tells you how that can be accomplished.

The overall logic to implement infinite scrolling is similar to Ajax driven
paging. However, unlike paging where a user explicitly clicks on a page link,
here you need to detect the scroll position and load the records automatically.

Begin by creating a new ASP.NET MVC web application. Add HomeController and
Index view to the newly created application.

The code declares two global variables - pageSize and pageIndex - to hold the
number of records to load at a time through an ajax call and current index of a
data page.

The ready() handler, invokes GetData() function that makes an ajax call to
the server and fetches the initial data to be displayed. This function is
discussed shortly. Notice the code marked in bold letters. This is where the
magic of infinite scrolling happens. The code wires a scroll event handler to
the window object. To decide whether a user has reached the bottom of the
scrollable region we use the scrollTop() and height() values. If user has
reached the bottom we call GetData() to retrieve the next set of records.

The GetData() function uses jQuery $.ajax() method to call GetData() action
method from the HomeController. The GetData() server side method is invoked
using a GET request and pageIndex and pageSize is passed to the server. This way
you don't need to hard-code these values in the server side code.

The success callback receives the data in the form of array. In this example
we use data from the Customers table of the Northwind database. The for loop
iterates through the data and appends CompanyName to the container <div> element
using append() method. The pageIndex is incremented for the sake of next ajax
call.

The beforeSend and complete callbacks simply show and hide the progress
indicator <div> element using show() and hide() methods. The error callback
simply displays an error message.

The GetData() server side method used by the GetData() client side function
resides in the HomeController and is shown below:

The GetData() action fetches data from the Customers table. Notice the use of
Skip() and Take() to fetch only the required number of records. The records are
returned to the client side code in JSON format. This is done using Json()
methood. The Sleep() is just for the sake of testing progress indicator. You can
remove it in the production code.

That's it! Run the application and test whether it works as expected. The
following figure shows a sample run of the application:

Notice how the progress indicator is being displayed when a user scrolls to
the bottom of the window.

Bipin Joshi is a software consultant, trainer, author and yoga mentor having 22+ years of experience in software development. He also conducts online courses on ASP.NET MVC, ASP.NET Core and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click here.