Friday, April 17, 2009

Auto Refresh in ASP.NET #3



When writing web pages, sometimes there is a need to auto refresh the page. Honestly, Ajax is a good solution most of the time. The problem comes when you don't want to load all the Ajax stuff to do something simple.


I was doing an enhancement for a download site. They wanted to display a counter of how many times a file had been downloaded. So I started to investigate ways to auto refresh a web page to show the counter changing.

The Problem

In my download example I use two pages. One page displays all the files that can be downloaded (download.aspx). When a link is clicked I do a server transfer to a second page which uses the response object to deliver content and update the counter. The problem is that the server transfer keeps me from being able to refresh the counter on the download.aspx page.

The Solution

For the download example I decided on a JavaScript solution. You can also refresh a page with a meta tag so I will show those details as well.

Some Details on JavaScript Refresh

The JavaScript solution is pretty straight forward. On the prerender of the repeater I add the JavaScript to the link button:

Collapse Copy Code
protected void rFiles_preRender(object sender, EventArgs e) {  LinkButton lbtn = null;  foreach (RepeaterItem ri in rpFiles.Items)  {   if (ri.ItemType == ListItemType.Item ||       ri.ItemType == ListItemType.AlternatingItem)   {    lbtn = (LinkButton)ri.FindControl("lbtnFile");    if (lbtn != null)    { //reload the page in 1 second.     lbtn.Attributes.Add("onclick", "setReloadTime(1)");    }   }  } //foreach } 

This allows the JavaScript to run before my postback which does the server.transfer.
The JavaScript function looks like this:

Collapse Copy Code
<script type="text/javascript" language="javascript">  var reloadTimer = null;  var sURL = unescape(window.location.pathname);    function setReloadTime(secs)   { //this function is used to refresh the broswer     if (arguments.length == 1)      { //if some seconds are passed in then create and set the timer and        //have it call this function again with no seconds passed in         if (reloadTimer) clearTimeout(reloadTimer);         reloadTimer = setTimeout("setReloadTime()",                           Math.ceil(parseFloat(secs) * 1000));     }     else      { //No seconds were passed in the timer must be up clear the timer       //and refresh the browser         reloadTimer = null;         //passing true causes the request to go back to the web server         // false refreshs the page from history         //This is javascript 1.2         location.reload(true);         //This is javascript 1.1         window.location.replace( sURL );     }  } </script> 

Here are some links that I used to help me with the javascript:

Some Details on the Meta Tag Refresh

The Meta tag Refresh has been around for a long time. Often you see it when an old web page has moved to a new web page. You usually put the meta tag in the header of your page. The syntax is:

Collapse Copy Code
<meta http-equiv="Refresh" content="n;url"/>

Where n is the number of seconds
And url is the url to refresh to.
If you leave the url off then the page refreshes itself.

In my sample code, the page updates the current time every 2 seconds. In the pageload event I have this code to set the meta tag:

Collapse Copy Code
if (this.Master.Page.Header != null) {  HtmlHead hh = this.Master.Page.Header;  HtmlMeta hm = new HtmlMeta();  hm.Attributes.Add("http-equiv", "Refresh");  hm.Attributes.Add("content", "2");  hh.Controls.Add(hm); } 

NOTE: My sample web project has a master page, so setting the meta tag is a little different then if you didn't have a master page.


I found some interesting ways to auto refresh my web page. I hope you have learned something too. I know Ajax is better for partial page updates, but in this case JavaScript worked fine and I didn't have to load Ajax on my web server.

Wajib militer di Indonesia?
Temukan jawabannya di Yahoo! Answers!