• Download LoadOnScroll - 375.74 KB

Introduction

This article will demonstrate how to load data from server while scrolling. Loading data from server using ajax will help any application in improving the performance because data which is displayed on the screen is only loaded at first time and more data if required will get loaded from the server as user scroll.

Background

Facebook is the application which inspired me to write the code to load data from server while scrolling. While browsing facebook I was amazed to see that as I scroll on the page new data from the server get appended to the existing one. I became curious to implement the same functionality in C#.Net. I search for the same but did not found any article or blog for doing this stuff in C#.Net. Of course there were few articles for Java and PHP. I read them carefully and started writing the code in C#.Net. As it works successfully I thought to share it, so I am posting it here.

The code

To implement the load on scroll functionality we will require very fewer lines of code. A WebMethod that will be called from client side which returns the content to append while scrolling and a client side function (document.ready) where we will bind scroll event to load data from server. Let us see these server and client side methods in detail.

Server Method: This method is used to get data from database or any source and prepare HTML string depending on the control you are using for appending data to. Here I have just added a message with serial number.

[WebMethod]
public static string  GetDataFromServer() 
{ 
string resp = string.Empty; 
for(int i = 0; i <= 10; i++)
{
resp += "<p><span>"  + counter++ + "</span> This content is dynamically appended to the existing content on scrolling.</p>" ; 
} 
return resp; 
} 

Client Method: At client side I have used document.ready method in which I have registered event binding for scroll on div. I have used two div elements one is mainDiv and other one is wrapperDiv. I have registered scroll event for mainDiv and append dynamic data to wrapperDiv.

$(document).ready( 
<pre>function()
{
$contentLoadTriggered = false;
$("#mainDiv").scroll(
function()
{
if($("#mainDiv").scrollTop() >= ($("#wrapperDiv").height() - $("#mainDiv").height()) &&
$contentLoadTriggered == false)
$contentLoadTriggered == false)
{
$contentLoadTriggered = true;
$.ajax(
{
type: "POST",
url: "LoadOnScroll.aspx/GetDataFromServer",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (msg) 
{
$("#wrapperDiv").append(msg.d);
$contentLoadTriggered = false;
},
error: function (x, e)
{
alert("The call to the server side failed. " +
x.responseText);
}
}
);
}
}
);
}
); 

Here, to check whether scroll is moved at the end following condition is used.

if($("#mainDiv").scrollTop() >= ($("#wrapperDiv").height() - $("#mainDiv").height()) &&
$contentLoadTriggered == false) 

This condition will identify whether scroll is moved at the en or not. If it is moved at the end dynamic data will get loaded from the server and get appended to wrapperDiv. Client script to append data to desired div element is written in the script to run when asynchronous call results in success.

success: function (msg) 
{
$("#wrapperDiv").append(msg.d);
$contentLoadTriggered = false;
} 

Here one thing you will notice that request will go to the server only when user has scrolled at the end.

I have attached the sample application with this article. 

 

Output

 

 

History 

First version.