Want to load the data dynamically as Facebook feeds?
Need to populate the data when scrollbar comes down to page/panel?
In Facebook, we use to see the post feeds would load dynamically when you scroll to bottom of the page. I did attempt the same to achieve it in ASP.NET and finally end up with a very basic example with the help of JQuery Ajax.
In this blog, we can discuss on this how to implement it in ASP.Net with the help of JQuery in step by step procedure way.
To achieve this in ASP.NET, I have added a DIV tag to webpage. Upon the page load, I am filling up DIV container with initial data and if the scrollbar of DIV container coming to down, I have make a JQuery Ajax call to get the records and appending them to DIV container. Here are the steps to be followed to achieve this:
At first download the latest JQuery library and refer to your webpage as shown below. In my example code, I have referred the JQuery version 1.10.1
|
<script src="js/jquery-1.10.1.min.js" type="text/javascript">script> |
In the next step we can add a DIV tag to webpage used to load the data dynamically (as facebook/twitter feeds) as shown below:
|
<div id="dvAutoFetch">div> <div id="dvLoading"><i>Loading…i>div> |
The above mentioned DIV tag (dvAutoFetch) is used to populate the required records from database (in my example hardcoded data) and it is styled with vertical scrollbar and border. To apply this styling we can use the below CSS:
|
#dvAutoFetch { height: 500px; width: 300px; overflow-y: scroll; } |
In order to get the data from server and populate them on DIV container, we need one static method on code behind page, which would be called by JQuery Ajax. In order to make ajax calls to this static method, it would be defined as Web Method. Here is my sample web method, it will return a sting array records.
|
[System.Web.Services.WebMethod] public static string GetRecords(int Total) { List<string> lstRecords = new List<string>();
lstRecords.Add("Requested Time: " + DateTime.Now.ToString());
for (int i = 0; i < Total; i++) { lstRecords.Add("Record: " + (i + 1)); }
StringBuilder sBuilder = new StringBuilder(); System.Web.Script.Serialization.JavaScriptSerializer jSerializer = new System.Web.Script.Serialization.JavaScriptSerializer(); jSerializer.Serialize(lstRecords.ToArray(), sBuilder);
return sBuilder.ToString(); } |
Once the web method is ready on code behind page or in web service, we can a call to web method using JQuery AJAX.
So, make a JQuery Ajax call to webmethod, get the data and populate inside the DIV container. As all these happening at client side, you would see the better performance while loading data. The below code makes a ajax call to webmethod and loads the data into DIV container.
|
var IsLoading = false; $(document).ready(function () { AddRecords(25); $('#dvAutoFetch').scroll(function () { if ($('#dvAutoFetch').scrollTop() >= ($('#dvAutoFetch')[0].scrollHeight – $('#dvAutoFetch').height() – 10)) { if (!IsLoading) { AddRecords(10); } } }); });
function AddRecords(total) { $('#dvLoading').show(); $.ajax({ type: "POST", url: "FacebookTypeFeeding.aspx/GetRecords", contentType: "application/json; charset=utf-8", data: "{'Total':'" + total + "'}", async: false, dataType: "json", success: function (msg) { IsLoading = true; var result = eval(msg.d); for (i = 0; i < result.length; i++) { $('#dvAutoFetch').append(result[i] + ' } $('#dvAutoFetch').append(' ');
$('#dvLoading').hide(); }, error: function (a) { //var err = JSON.parse(a.responseText); //alert("ERROR: " + err.Message); alert(a.responseText); } }); IsLoading = false; } |
In the above example, you can see that a scroll event is attached to DIV container and calculating the height and top of the scroolbar. By measuring the scrollbar and finding the location of it, at a time 10 records are loaded into page.
The below screenshot shows how it render on webpage:
Very special thanks to JQuery to help me out on this..!