Auto Refresh Update GridView In Asp.Net Ajax With Timer

This Example describes How To Auto Refresh Or Update GridView Automatically At Regular Interval In Asp.Net Using Ajax And Timer.

Add GridView And Timer control inside UpdatePanel on the page and set Interval property to desired value in miliseconds. I have set it to 5000 (5 Seconds).

HTML SOURCE
   1:  <asp:ScriptManager ID="ScriptManager1" runat="server"/>
   2:  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
   3:  <ContentTemplate>
   4:   
   5:  <asp:Timer ID="AutoRefreshTimer" runat="server" 
   6:             Interval="5000" 
   7:             ontick="AutoRefreshTimer_Tick"/>
   8:                              
   9:  <asp:GridView ID="GridView1" runat="server" 
  10:                AutoGenerateColumns="False" 
  11:                DataSourceID="SqlDataSource1">
  12:  <Columns>
  13:  <asp:BoundField DataField="FirstName" HeaderText="FirstName"/>
  14:  <asp:BoundField DataField="LastName" HeaderText="LastName"/>
  15:  <asp:BoundField DataField="Location" HeaderText="Location"/>
  16:  </Columns>
  17:  </asp:GridView>
  18:   
  19:  <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
  20:  ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
  21:  SelectCommand="SELECT [FirstName], [LastName], [Location] 
  22:                 FROM [Details]">
  23:  </asp:SqlDataSource>
  24:   
  25:  <asp:Label ID="lblMsg" runat="server"/>
  26:  </ContentTemplate>
  27:  </asp:UpdatePanel>


Rebind GridView In Tick Event of Timer to refresh.

C#
1protected void AutoRefreshTimer_Tick(object sender, EventArgs e)
2    {
3        GridView1.DataBind();
4        lblMsg.Text = "Last Updated at " + DateTime.Now;
5    }


Image below shows the implementation.

Automatically Refresh Update Asp.Net GridView with Ajax Timer

Hope this helps.
22:14 | Category: | 1 comments

Comments (1)

On 3 June 2014 at 09:10 , Anonymous said...

778994555

 

Post a Comment