Code Simplified – Viral Sarvaiya

Code Simplified – Viral Sarvaiya, Web Developer Friends, dot net Developer, Sql Server Developer

Refresh or Reload part of page

Posted by Viral Sarvaiya on July 10, 2009

This article will described how to refresh a part of page periodically in ASP.Net Web applications without using AJAX or JavaScript in a very simple way.

Concept

The first question that comes in mind is how?

So the answer is IFRAMES and META Tags make a great combination and thus help us achieve the same in a simple manner in just 2 steps. The main advantage of this approach is that it will refresh the part in the Iframe and not the whole page thus giving an AJAX effect without using AJAX or Timers.

Step 1: Adding Iframe

You will first need to add an Iframe to the page at any location that you prefer to be refreshed on regular basis or periodic refresh. As shown below


<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Update part of page periodically</title>

</head>

<body>

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

<div>

This is the Main Page

<br /><br /><br /><br />

<iframe id = "frame1" src = "refresh.aspx" frameborder = "0"

style="width: 493px;height: 295px" >

</iframe>

</div>

</form>

</body>

</html>

You will notice above I have added an Iframe and set the src property to the page called refresh.aspx which will be refreshed periodically. That’s it we are half done let’s move to Step 2.

Step 2: Adding Meta Tag

Step 2 is also fairly simple you will need to add the following meta tag to the head section of the page


<meta http-equiv="Refresh" content="5" />

The above tag will refresh the page every 5 seconds For more information on how this works and how to set it dynamically from code behind refer my article
Reload, Refresh and Redirect Pages using Meta Tags in ASP.Net


<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Page to be Refreshed</title>

<meta http-equiv="Refresh" content="5" />

</head>

<body>

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

<div>

<asp:Label ID="lblTime" runat="server" Text=""></asp:Label>

<asp:GridView ID="GridView1" runat="server">

</asp:GridView>

</div>

</form>

</body>

</html>

You will notice I have added the meta tag to the page and set the interval to 5 seconds. I have placed an ASP.Net GridView Control so that my data is refreshed at regular intervals

That’s it we are done now run the page with the Iframe in browser and see it refresh the content periodically

For information please click here

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: