In this article I’ll explain how to load part of page with delay using an UpdatePanel and AJAX so that we can load the page faster by loading the heavy data like Grids, etc. later.
For this tutorial I am using Microsoft’s NorthWind Database, which you can download using the link below
To start with I have a simple GridView in my ASPX page
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial"
Font-Size="11pt" AlternatingRowStyle-BackColor="#C2D69B" HeaderStyle-BackColor="green">
<Columns>
    <asp:BoundField ItemStyle-Width="200px" DataField="CustomerID" HeaderText="CustomerID" />
    <asp:BoundField ItemStyle-Width="100px" DataField="City" HeaderText="City" />
    <asp:BoundField ItemStyle-Width="50px" DataField="Country" HeaderText="Country" />
</Columns>
</asp:GridView>
 
And below is the method to bind the GridView with data. Thus function simply fires a select query on the Customers table of the NorthWind Database and binds the results to the ASP.Net GridView Control
C#
private void BindCustomers()
{
    String strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
    SqlConnection con = new SqlConnection(strConnString);
    SqlCommand cmd = new SqlCommand();
    SqlDataAdapter sda = new SqlDataAdapter();
    DataSet ds = new DataSet();
    cmd.CommandType = CommandType.Text;
    cmd.CommandText = "select Top 10 CustomerID,City,Country from customers";
    cmd.Connection = con;
    sda.SelectCommand = cmd;
    try
    {
        con.Open();
        sda.Fill(ds);
        GridView1.EmptyDataText = "No Records Found";
        GridView1.DataSource = ds;
        GridView1.DataBind();
    }
    catch (Exception ex)
    {
        throw ex;
    }
    finally
    {
        con.Close();
        con.Dispose();
    }
}
 
VB.Net
Private Sub BindCustomers()
        Dim strConnString As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString
        Dim con As SqlConnection = New SqlConnection(strConnString)
        Dim cmd As SqlCommand = New SqlCommand
        Dim sda As SqlDataAdapter = New SqlDataAdapter
        Dim ds As DataSet = New DataSet
        cmd.CommandType = CommandType.Text
        cmd.CommandText = "select Top 10 CustomerID,City,Country from customers"
        cmd.Connection = con
        sda.SelectCommand = cmd
        Try
            con.Open()
            sda.Fill(ds)
            GridView1.EmptyDataText = "No Records Found"
            GridView1.DataSource = ds
            GridView1.DataBind()
        Catch ex As Exception
            Throw ex
        Finally
            con.Close()
            con.Dispose()
        End Try
End Sub
 
Now in order to build the Lazy Loading or Delay functionality we will have to make use of ASP.Net AJAX Timer Control.
First we will add an ASP.Net Timer Control, an UpdatePanel and a ScriptManager to our page. Thus our HTML Markup looks like below
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Timer ID="Timer1" runat="server" OnTick="TimerTick" Interval="2000">
        </asp:Timer>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial"
            Font-Size="11pt" AlternatingRowStyle-BackColor="#C2D69B" HeaderStyle-BackColor="green">
            <Columns>
                <asp:BoundField ItemStyle-Width="200px" DataField="CustomerID" HeaderText="CustomerID" />
                <asp:BoundField ItemStyle-Width="100px" DataField="City" HeaderText="City" />
                <asp:BoundField ItemStyle-Width="50px" DataField="Country" HeaderText="Country" />
            </Columns>
        </asp:GridView>
        <asp:Image ID="imgLoader" runat="server" ImageUrl="~/loading7.gif" />
    </ContentTemplate>
</asp:UpdatePanel>
</div>
 
Above you will notice I have added an ASP.Net Timer Control with Interval of 2000 milliseconds (2 Seconds) and also wired its OnTick event. So that the Timer is invoked after a delay of 2 seconds, below on the OnTick event handler I am calling the BindGrid method we created earlier. Also I have added a Loading GIF Image so that it displays animation until the content is loaded.
C#
protected void TimerTick(object sender, EventArgs e)
{
    this.BindCustomers();
    Timer1.Enabled = false;
    imgLoader.Visible = false;
}
 
VB.Net
Protected Sub TimerTick(ByVal sender As Object, ByVal e As EventArgs)
        Me.BindCustomers()
        Timer1.Enabled = False
        imgLoader.Visible = False
End Sub
 
Above you will notice I am disabling the Timer control and also making hiding Loading GIF image since the content is now loaded.
That’s it your delayed loading of Update Panel is now ready to use. The below Animated Flash displays how the Delayed loading of UpdatePanel actually works
You can download the sample source code in C# and VB.Net using the download link below.

LoadUpdatePanelWithDelay.zip