Loading data as Facebook posts in ASP.NET

In Facebook, we use to see the post feeds would load dynamically when you scroll to bottom of the page. I did attempted the same to achieve it in ASP.NET and finally finished a very basic example with the help of JQuery Ajax.

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:

Step1: Add an aspx page to your current project

Step2: Add two DIV tags to body of the form

<div id="dvAutoFetch"></div>
<div id="dvLoading"><i>Loading...</i></div>

One DIV is for filling up records (form feeds) and other for waiting notification when the server needs to respond. Optionally you can set the CSS style to first DIV tag as below:

#dvAutoFetch
{
     border: 1px solid gray;
     height: 500px;
     width: 300px;
     overflow-y: scroll;
}

Step3: Add the JQuery script reference to your page. You can get the latest JQuery script libraries here.

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>

Step4: You 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();
}

Step5: Add the following script under head tag.

<script type="text/javascript">

        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: "AutoFetch.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] + '<b r />');
                    }
                    $('#dvAutoFetch').append('<hr />');
                    $('#dvLoading').hide();
                },
                error: function (a) {
                    var err = JSON.parse(a.responseText);
                    alert("ERROR: " + err.Message);
                }
            });
           
            IsLoading = false;
        }      

    </script>

That's It! If you run the above code you will get to see the records would be loading to DIV tag automatically when the scroll bar of DIV tag reaches to end.