Auto Refresh update panel on page using AJAX - c#

In this article, I am going to explain how we can auto refresh data on an ASP.NET page after a certain interval using AJAX UpdatePanel and other controls (assuming you have some basic knowledge of AJAX Toolkit). I am using some Ajax controls and using SQL server database and Data Grid control. Lets for the time, use database north wind and set our interval time for refreshing data as 30 seconds.




Code behind page :

public void BindData()
{
con = new SqlConnection("Initial Catalog=Northwind; Data Source=localhost; Uid=sa; pwd=;");
cmd.CommandText = "select * from Employees ";
cmd.Connection = con;
con.Open();
da = new SqlDataAdapter(cmd);
da.Fill(ds);
cmd.ExecuteNonQuery();
GridData.DataSource = ds;
GridData.DataBind();
}


protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = "Grid Refreshed at: " + DateTime.Now.ToLongTimeString();
}



Here is HTML desing code:

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="30000">
</asp:Timer>
</div>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Grid not refreshed yet."></asp:Label><br />
<asp:Label ID="Label4" runat="server" Text="(Grid Will Referesh after Every 30 Sec)" Font-Bold="true"></asp:Label>
<br /><br />
<asp:DataGrid ID=GridData runat="server" Width="100%" GridLines="Both" HeaderStyle-BackColor="#999999" AutoGenerateColumns="false">
<Columns>
<asp:BoundColumn DataField="EmployeeID" HeaderText="Employee ID"></asp:BoundColumn>
<asp:BoundColumn DataField="FirstName" HeaderText="First Name"></asp:BoundColumn>
<asp:BoundColumn DataField="LastName" HeaderText="Last Name"></asp:BoundColumn>
<asp:BoundColumn DataField="City" HeaderText="City"></asp:BoundColumn>
</Columns>
</asp:DataGrid>
</ContentTemplate>
</asp:UpdatePanel>
</form>


I hope you liked this article..if yes please drop some comments