Paging Like Facebook In ASP.NET

Let's learn how to create paging in which we can auto load the content at the bottom after scrolling. Every every time you reach the end of the page, new data will arrive from the database. Here, I will add static content for binding the data in GridView. You can manage or can try this with the database at your end. Just create a table and a stored procedure from which you will pass the page index which will help you get the new data each time you scroll.

 

Description

First, we will take a Webform and add a GridView in this. Then, we will bind the GridView with static content, using For Loop. I have already mentioned that you make it more real by using database stored procedures.

ASPX page(Html)

<form id="form1" runat="server">
    <asp:ScriptManager ID="scrtmng" runat="server">
        <Services>
            <asp:ServiceReference Path="~/WebService.asmx" /> </Services>
    </asp:ScriptManager>
    <div style="margin:auto; width:50%;">
        <asp:GridView ID="grdlst" runat="server" AutoGenerateColumns="true" Width="100%"></asp:GridView>
        <div id="loading"> <img id="loading-image" src="loading.gif" alt="Loading..." /> </div>
    </div>
</form>

CSS

<style>
    #loading
    {
        width: 100%;
        height: 100%;
        top: -90px;
        left: -48px;
        position: relative;
        display: block;
        opacity: 1.00;
        background-color: #fff;
        z-index: 99;
        text-align: center;
    }

    #loading-image
    {
        position: absolute;
        top: 100px;
        left: 240px;
        z-index: 100;
    }
</style>

JavaScript

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
    $(document).scroll(function()
    {
        if ($(window).scrollTop() + $(window).height() == $(document).height())
        {
            //if condition is true then you are reached at the bottom of web page
            $("#loading").show().delay(4000).queue(function()
            {
                CallWebMethodForMoreRecords();
                $(this).dequeue();
            });
        }
    });

    function CallWebMethodForMoreRecords()
    {
        WebService.BindGridView(onSuccess);
    }

    function onSuccess(result)
    {
        if (result != "")
        {
            $("#grdlst > tbody").append(result);
            $("#loading").hide();
        }
    }
</script>

Now, we bind the GridView with the data, as shown below,

public partial class _Default: System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        List < EmployeeData > lstEmp = new List < EmployeeData > ();
        for (Int32 i = 1; i <= 50; i++)
        {
            EmployeeData objEmp = new EmployeeData();
            objEmp.EmployeeId = i;
            objEmp.EmployeeName = "Employee_" + i;
            objEmp.Designation = "Dot Net Developer";
            objEmp.Experience = "3 years";
            lstEmp.Add(objEmp);
        }
        grdlst.DataSource = lstEmp;
        grdlst.DataBind();
    }
}
public class EmployeeData
{
    public Int32 EmployeeId {
        get;
        set;
    }
    public String EmployeeName {
        get;
        set;
    }
    public String Designation {
        get;
        set;
    }
    public String Experience {
        get;
        set;
    }
}

Here, I just created a simple class, added four properties in it, and added value with the For Loop up to 50. This is just static data but you can bind GridView with the database also. I am doing this to make the concept of paging more clear, here. This is why I am not using the database for fast posting of the article. So, our GridView is bound. If you run the web page, you will see the output. Our work is half one.

 

Now, let's start the second part, i.e., Scrolling the page.

First, what we need to know is that we want to load more data when we have reached the end of the page. So, we need an indication that we have reached the bottom of the page. This we can achieve using jQuery. You can see in the above code that using the scroll event function in jQuery, we get to know if we have reached the end of the page or not.

 

And, what next?

 

Now, we need to load more data when the scroll bar is at the bottom. But, we don't want a post back. So, how we can do this? Simple! By using web service for binding more data in GridView. So, we will take a web service, add the reference of that web service at our web page, and create a function in web service for loading more data. Again, don't forget that I am using For Loop and static data but you might be using this method for the database. Let's take a look at the web service web method.

Web Service

[WebMethod]
public string BindGridView()
{
    String data = String.Empty;
    for (Int32 i = 1; i <= 50; i++)
    {
        data = data + "<tr>";
        data = data + "<td>" + i + "</td>";
        data = data + "<td>Employee_" + i + "</td>";
        data = data + "<td>Dot Net Developer</td>";
        data = data + "<td>3 years</td>";
        data = data + "</tr>";
    }
    return data;
}

You can see, here, that I am loading the data in a string and returning that string when this web method is called. For more clear understanding, you can refer to the blog about how to call a Web Service. So, our web method is ready. Now, we just need to call it whenever the scroll bar reaches at the end of page. Here, we will also show a loading gif image at the end, so that the viewer is able to know that data is actually loading here. So, in jQuery, we will do the following coding:

$(document).scroll(function()
{
    if ($(window).scrollTop() + $(window).height() == $(document).height())
    {
        //if condition is true then you are reached at the bottom of web page
        $("#loading").show().delay(4000).queue(function()
        {
            CallWebMethodForMoreRecords();
            $(this).dequeue();
        });
    }
});

function CallWebMethodForMoreRecords()
{
    WebService.BindGridView(onSuccess);
}

function onSuccess(result)
{
    if (result != "")
    {
        $("#grdlst > tbody").append(result);
        $("#loading").hide();
    }
}

Now, see the above jQuery code. What we did is, we created a method CallWebMethodForMoreRecords and called the web service Webmethod here. After getting the records from webmethod, we are binding those records into GridView which renders as table in browser window. So, using the GridView id, I append the result in that. Since the result already is in the tabular form, we don't have any problem in the outlook of the page.

Now, the last thing to know is from where we are calling this method. In the code, you can see that we are calling the CallWebMethodForMoreRecords from the loading event, and doing a delay of four seconds. It is because it is loading the data so fast that we don't even realize that the data is loaded. Also, we want to make our web page look good. So, it will show loading for 4 seconds and then it will call the web service Webmethod; that's it. We are done and ready to rock. We will have the output like this when we scroll at the end of the page.

 

 

 

We are done here. I hope you are going to like it. Thanks. "Happy Coding!"