In this article I will explain with an example, how to bind (Load) GridView after Page load is completed using AJAX UpdatePanel and 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 following controls:
ScriptManager – For enabling AJAX functions.
UpdatePanel – For refreshing control.
 
The UpdatePanel consists of:
Timer – For triggering event (TASK) 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.

Events

Timer control has been assigned with an OnTick event handler.
 
GridView – For displaying data.
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.
One the GridView is populated, the Timer control is disabled and the Image control is hidden.
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

Bind (Load) GridView after Page load is completed using AJAX UpdatePanel in ASP.Net
 
 

Demo

View Demo
 
 

Downloads

Download Code