Auto Refresh Web Page

• Download source code - 28.3 KB

Introduction

When writing web pages, sometimes there is a need to auto refresh a 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.

Background

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 straightforward. On the PreRender of the Repeater, I add the JavaScript to the link button:

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:

<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:

• http://www.netlobo.com/javascript_location_reload.html
• http://www.grizzlyweb.com/webmaster/javascripts/refresh.asp

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:

<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 two seconds. In the page load event, I have this code to set the meta tag:

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 than if you didn't have a master page.

Conclusion

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.