Reader Level:
Articles

Auto Refresh Data on Page Using AJAX

By Raj Kumar Beniwal on September 29, 2007
In this article, I explain how to auto-refresh data on an ASP.NET page after a certain interval using AJAX UpdatePanel and other controls.
  • 0
  • 0
  • 107457
 

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

In this article, I explain how to 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 a SQL Server database and a Data Grid control. The Database name is Northwind. In this application my interval time for refresh data is 30 seconds. You can change your time by the times interval property.

Here is a snapshot:

refreshgrid1.JPG

This code is for binding data:

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();

    }

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

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

And the grid refresh time is:

protected void Timer1_Tick(object sender, EventArgs e)

    {

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

    }

Here is the HTML design 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 then drop me a line or write a comment below in the comments section.

Raj Kumar Beniwal

Raj Kumar Beniwal is two times Microsoft MVP(Client App Dev) and four times C# Corner MVP,  working as asst project manager with lots of hands on experience using ASP.NET 2.0/3.5, AJAX, MVC, C#, Visual Basic .NET, S... Read more

COMMENT USING

Trending up