09Jun
Populate data as Facebook feeds in ASP.NET
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
{
border: 1px solid gray;
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..!
Related
Securing ASP.NET Web API using Custom Token Based AuthenticationProviding a security to the Web API&...
Read More >
Here in this blog I am going to show some advanced and common functionalities of Angular JS which ca...
Read More >
When you are working with certain projects which involves the Customer records, you might need to tr...
Read More >
Introduction:Ionic framework is a simple, beautiful and structured Software Development Kit by using...
Read More >
Visual studio installation comes with the various predefined project templates, and we can use one o...
Read More >
Introduction on SignalRReal–Time Web ApplicationThe real-time web is a set of technologies tha...
Read More >
IntroductionSharePoint is a browser-based collaboration, content management, and extensible platform...
Read More >
What is KnockOut.Js?Knockout.Js (simply KO) is a powerful JavaScript library which allows developers...
Read More >
Share