Click here to Skip to main content
Click here to Skip to main content

Auto Refresh Web Page

, 10 Oct 2007
Rate this:
Please Sign up or sign in to vote.
Some simple ways to auto refresh your web page.

Screenshot - autorefresh.gif

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:

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

kubben
Web Developer
United States United States
I started my programmer career over 18 years ago doing COBOL and SAS on a MVS mainframe. It didn't take long for me to move into windows programming. I started my windows programming in Delphi (Pascal) with a Microsoft SQL server back end. I started working with vb.net when the beta 2 came out in 2001. After spending most of my programming life as a windows programmer I started to check out asp.net in 2004. I achieved my MCSD.net in April 2005. I have done a lot of MS SQL database stuff. I have a lot of experience with Window Service and Web services as well. I spent three years as a consultant programing in C#. I really enjoyed it and found the switch between vb.net and C# to be mostly syntax. In my current position I am programming in both vb.net and C#. Lately I have been using VS2012 and writing a Windows 8 app. You can search for the app it is called ConvertIT.
 
On a personal note I am a born again Christian, if anyone has any questions about what it means to have a right relationship with God or if you have questions about who Jesus Christ is, send me an e-mail. ben.kubicek[at]netzero[dot]com You need to replace the [at] with @ and [dot] with . for the email to work. My relationship with God gives purpose and meaning to my life.

Comments and Discussions

 
Questioncan you make VB version Pinmemberikuto tohoin25-Jan-11 12:48 
AnswerRe: can you make VB version Pinmemberkubben25-Jan-11 13:23 
QuestionHow do I force a browser web-page refresh after re-creating the page again? Pinmembermstod0017-Jul-09 12:25 
AnswerRe: How do I force a browser web-page refresh after re-creating the page again? Pinmemberkubben18-Jul-09 1:16 
GeneralRe: How do I force a browser web-page refresh after re-creating the page again? Pinmembermstod0018-Jul-09 5:07 
GeneralRe: How do I force a browser web-page refresh after re-creating the page again? Pinmembermstod0018-Jul-09 5:11 
GeneralRe: How do I force a browser web-page refresh after re-creating the page again? Pinmemberkubben18-Jul-09 8:52 
GeneralThanks PinmemberJon-Hawkins9-May-08 22:10 
GeneralRe: Thanks Pinmemberkubben10-May-08 0:44 
GeneralNot Working after a file dialogue PinmemberCodeHook27-Jan-08 19:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 10 Oct 2007
Article Copyright 2007 by kubben
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid