ARTICLE

Auto Refresh data on page using AJAX

Posted by Raj Kumar Articles | ASP.NET AJAX in VB.NET March 19, 2009
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.
 
Reader Level:

Hi this is my first article on C# corner. I have some good topics in my mind, stay tuned. 

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.  I am using some Ajax controls and using SQL server database and Data Grid control. Database name is north wind. In this application my interval time for refresh data is 30 second. You can change your time by times interval property.

Here is a snapshot:

autorefresh.JPG

This code for bind data:

Public Sub 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()

End Sub
 

You can check your current time on page load. Write this code:

       MyLabel.Text = System.DateTime.Now.ToString()
        BindData()

and grid refresh time is:

Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As EventArgs)

    Label1.Text = "Grid Refreshed at: " + DateTime.Now.ToLongTimeString()

End Sub

Here is HTML desing code:

<form id="form1" runat="server">

     <asp:Label ID="Label2" runat="server" Text="This is Time, When The Full Page Load :" Font-Bold="true"></asp:Label>&nbsp;

     <asp:Label ID="MyLabel" runat="server"></asp:Label><br /><br />       

  

    <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="Label3" runat="server" Text="This is The Time when Only Data Grid will Referesh :" Font-Bold="true"></asp:Label>&nbsp;

                <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>&nbsp;

                <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 will like this article. If yes drop me a line or write a comment below in the comments section.

Login to add your contents and source code to this article
share this article :
post comment
 

Thanks for this. It was great help!

Posted by Faraz Ahmed Jun 15, 2010
Become a Sponsor
PREMIUM SPONSORS
  • ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications.
    ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications. Visit DynamicPDF here
Become a Sponsor