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.
 
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here
 
HTML Markup
The HTML Markup consists of an ASP.Net GridView.
<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>
 
 
Namespaces
C#
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
 
VB.Net
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
 
 
Binding the GridView
Following method is used to bind the GridView with data, it simply fires a select query on the Customers table of the Northwind Database and binds the fetched records 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
 
 
Lazy Loading: loading GridView using AJAX UpdatePanel when after Page Load is completed
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>
 
The 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 after the Page is loaded completely.
Inside 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.
Note: It is important to disable the Timer Control in its OnTick event handler so that it does run continuously.
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
 
Bind (Load) GridView after Page load is complete using AJAX UpdatePanel in ASP.Net
 
Demo
 
Downloads