Refresh or Reload part of page periodically at regular intervals in ASPNet

In this article I will explain with an example, how to refresh a part of page periodically in ASP.Net without using AJAX or JavaScript.

Database

Here I am making use of Microsoft’s Northwind Database. The download and install instructions are provided in the following article.

Download and install Northwind Database

Concept

The part of the Page to be refreshed will be another Child Page and it will be embedded in the Main page with the help of IFRAME element.

The Child Page will contain a REFRESH Meta Tag in its HEAD section which will refresh the Page periodically at regular intervals.

Child Page

The Child Page consists of an ASP.Net GridView which is populated with the help of SqlDataSource control.

Note: For more information on populating GridView using SqlDataSource control, please refer my article Populate (Bind) GridView control using SqlDataSource in ASP.Net.

Above the GridView, the Current Date and Time is printed which will help us determine the Refresh rate of the page.

In the HEAD section of the Child page, the REFRESH Meta Tag has been added and the Content value is set to 2 i.e. the Page will be refreshed every 2 seconds.

Note: For more information on REFRESH Meta Tag, please refer my article Reload, Refresh and Redirect Pages using Meta Tags in ASP.Net.

</head>

<body>

Child Page - Last Refreshed: <%=DateTime.Now.ToString () %>

<br />

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false">

<asp:BoundField DataField="CustomerId" HeaderText="Customer Id" />

<asp:BoundField DataField="ContactName" HeaderText="Contact Name" />

<asp:BoundField DataField="Country" HeaderText="Country" />

</Columns>

</asp:GridView>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:constr %>"

SelectCommand="SELECT TOP 10 * FROM Customers"></asp:SqlDataSource>

</form>

</body>

</html>

Main Page

The Main Page consists of an IFRAME element whose SRC attribute is set to the Child Page.

Above the IFRAME element, the Current Date and Time is printed which will help us compare the Main Page and the Child Page and prove that the Main Page is constant while the Child Page is refreshing periodically at regular intervals.