In this article I will explain with an example, how to delay load UpdatePanel using AJAX Timer Control in ASP.Net using C# and VB.Net.
 
 
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Download and install Northwind Database
 
 
HTML Markup
The following HTML Markup consists of:
ScriptManager – For enabling AJAX functions.
UpdatePanel – For refreshing control.
ContentTemplate – For supporting Templating such as UpdatePanel.
The UpdatePanel consists of:
Timer – For triggering event handler at a specific interval of time.
Timer control has been assigned with an OnTick event handler.
Properties
Interval – For specifying the time interval between each OnTick event in milliseconds. Here it is set to 1000 i.e. 1 second.
 
GridView – For displaying data.
Columns
GridView consists of three BoundField columns.
 
Image - For displaying loading animation (loader image).
<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
    <ContentTemplate>
        <asp:Timer ID="Timer" runat="server" OnTick="TimerTick" Interval="1000">
        </asp:Timer>
        <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:BoundField DataField="Country" HeaderText="Country" />
            </Columns>
        </asp:GridView>
        <asp:Image ID="imgLoader" runat="server" ImageUrl="~/Loading.gif" />
    </ContentTemplate>
</asp:UpdatePanel>
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
 
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
 
 
Binding the GridView
Inside the TimerTick event handler, the GridView is populated with records from the SQL Server database.
Finally, Enabled property of Timer and Visible property of Image is set to FALSE.
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)
{
 
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string query = "SELECT Top 10 CustomerID,City,Country FROM Customers";
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter(query, con))
        {
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                gvCustomers.DataSource = dt;
                gvCustomers.DataBind();
            }
        }
    }
    Timer.Enabled = false;
    imgLoader.Visible = false;
}
 
VB.Net
Protected Sub TimerTick(ByVal sender As Object, ByVal e As EventArgs)
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim query As String = "SELECT Top 10 CustomerID,City,Country FROM Customers"
    Using con As SqlConnection = New SqlConnection(constr)
        Using sda As SqlDataAdapter = New SqlDataAdapter(query, con)
            Using dt As DataTable = New DataTable()
                sda.Fill(dt)
                gvCustomers.DataSource = dt
                gvCustomers.DataBind()
            End Using
        End Using
    End Using
 
    Timer.Enabled = False
    imgLoader.Visible = False
End Sub
 
 
Screenshot
Delay Load (Lazy Load) UpdatePanel using Timer Control in ASP.Net
 
 
Demo
View Demo
 
 
Downloads
Download Code