In this article I will explain how to bind (load) GridView asynchronously after Page Load is completed using ASP.Net AJAX UpdatePanel and Timer control in ASP.Net.
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
You will need to import the following 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
