Online courses in ASP.NET MVC / Core, jQuery, Angular, and Design Patterns conducted by Bipin Joshi. Read more...
Learn ASP.NET MVC / Core, jQuery, Angular, and Design Patterns through our online training programs. Courses conducted by Bipin Joshi on weekends. Read more details here.

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.

Then open the Index view and add the following markup to it.

...
<body>
    <div id="container"></div>
    <div id="progress" style="display:none">
        <h4>Loading...</h4>
    </div>
</body>

The main part of the markup consists of two <div> elements - the container where the actual data is displayed and  progress indicator that is displayed only during an ajax call.

Next, add a <script> reference to the jQuery library in the <head> section of the Index view and also add an empty <script> block. Then add the following code in the <script> block.

<script src="~/Scripts/jquery-1.10.2.js"></script>

<script type="text/javascript">

    var pageSize = 10;
    var pageIndex = 0;

    $(document).ready(function () {
        GetData();

        $(window).scroll(function () {
            if ($(window).scrollTop() == 
               $(document).height() - $(window).height()) {
                GetData();
            }
        });
    });

    function GetData() {
        $.ajax({
            type: 'GET',
            url: '/home/GetData',
            data:{"pageindex":pageIndex,"pagesize":pageSize},
            dataType: 'json',
            success: function (data) {
                if (data != null) {
                    for (var i = 0; i < data.length; i++) {
                        $("#container").append("<h2>" + 
                        data[i].CompanyName + "</h2>");
                    }
                    pageIndex++;
                }
            },
            beforeSend : function () {
                $("#progress").show();
            },
            complete : function () {
                $("#progress").hide();
            },
            error: function () {
                alert("Error while retrieving data!");
            }
        });
    }
</script>

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:

public ActionResult GetData(int pageIndex,int pageSize)
{
    System.Threading.Thread.Sleep(4000);
    NorthwindEntities db = new NorthwindEntities();
    var query = (from c in db.Customers
                    orderby c.CompanyName ascending
                    select c)
                 .Skip(pageIndex * pageSize)
                 .Take(pageSize);
    return Json(query.ToList(), JsonRequestBehavior.AllowGet);
}

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 a yogi having 21+ years of experience in software development. He conducts online courses in ASP.NET MVC / Core, jQuery, AngularJS, and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced Yoga way of life he also teaches Ajapa Meditation to interested individuals. To know more about him click here.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 27 Jul 2015



Tags : ASP.NET MVC C# jQuery JavaScript