The Timer control is useful in scenarios where a portion of the screen needs to be updated every so often. For example, many financial websites display stock quotes that are refreshed periodically. Prior to AJAX, refreshing the stock quote entailed reloading the entire document, which would result in a screen flash and necessitate the browser re-downloading the entire content of the page (even though the only change that has occurred is the stock quote). Using AJAX techniques we can have the page asynchronously communicate with the server to get the latest quote every n millisconds and seamlessly update the quote on screen. The Timer control, along with the UpdatePanel, make implementing such scenarios a breeze.

This article shows how to use the Timer control to trigger a partial page postback every five seconds. It also shows how to start and stop the Timer through both server-side and client-side code. Read on to learn more!

Performing a Postback Every N Milliseconds
The Timer control is designed to periodically cause a postback. Its Interval property specifies the number of milliseconds to elapse before the postback is triggered. On postback, the Timer's Tick event is raised.

That's all there is to it! Realize that the Timer control causes a full page postback by default, but chances are you want the Timer to raise a partial page postback. This can be accomplished in one of two ways:

• By placing the Timer control with an UpdatePanel. When the Timer "ticks" it raises a postback, but because it's in an UpdatePanel it becomes a partial page postback.
• Placing the Timer control outside the UpdatePanel, but adding it as an UpdatePanel trigger. See the Using the UpdatePanel installment for a discussion on how to trigger a partial page postback from an UpdatePanel using controls outside of the UpdatePanel.

The download available at the end of this article includes a demo named Timer.aspx that shows how to use a Timer to asynchronously update the contents of an UpdatePanel every five seconds. Specifically, this demo displays the real-time stock price of a fictional company. To create this demo yourself, start by creating a new page; configure it to use the ASP.NET AJAX framework by adding a ScriptManager to the page. Also add a Label control to the page named CurrentTime, which we'll use to display the time the page was last updated via a full page postback. Next, add an UpdatePanel control and put the contents that are to be updated every five seconds within it. I have added three display-related Web controls in the UpdatePanel:

• A Label control named StockPrice, which is used to display the company's stock price.
• An Image control, which displays either a picture of a bag of money or a broke guy, depending on the current stock price. (My lame attempt at humor.)
• Another Label control (named CurrentPanelTime) which displays the time the UpdatePanel was last updated.

At this point your page's declarative markup should look similar to the following:

Add a method named UpdateStockPrice to the page's code-behind class. This method needs to determine the current stock quote, display it in the StockPrice Label, and load the appropriate image. As the following code shows, the current stock quote is simply a randomly chosen number between 0 and 100. Furthermore, the StockPrice Label's ForeColor property is set to Red and the broke image is displayed if the stock price is less than $50.00; the ForeColor property is set to Green and the money bags image is displayed when the stock price is $50.00 or greater.

The UpdateStockPrice method needs to be called when the page is first loaded as well as whenever the Timer control's Tick event is raised. Create a Page_Load event handler in the code-behind class and set the two Labels' Text properties to the current time. Also call the UpdateStockPrice method if Page.IsPostback is False (i.e., the page is being visited for the first time and not on a postback):

Next, create an event handler for the Timer's Tick event and, from there, call the UpdateStockPrice method:

With the declarative markup and code in place, visit the page through a browser. Every five seconds the Timer causes a partial page postback, the current stock price is computed, and the display is updated. The following screen shot shows the page when it first visited. Note that the time the page last experienced a "full" postback (the initial page load) and the time the UpdatePanel was last updated are the same.

And here is the page five seconds later, after the stock price has been updated. Note that the time shown in the UpdatePanel is five seconds ahead of the time the page was last loaded.

Starting and Stopping the Timer Control
By default, the Timer control starts its countdown as soon as the page is loaded, and continues to trigger postbacks every n milliseconds. If you need to stop the Timer from ticking, you have two options:

• Disable the Timer on the server-side, or
• Stop the Timer on the client-side.

To implement the server-side functionality, I augmented the Timer control example we looked at previously to include a Button Web control in the UpdatePanel. I set the Button's Text property to "Pause" and created a Click event handler. In the event handler I toggle the Timer control's Enabled property value and update the Button's Text property from "Pause" to "Resume" when stopping the Timer, and from "Resume" back to "Pause" when restarting it. I also call the UpdateStockPrice method when resuming the Timer so that resuming it immediately updates the stock price (rather than waiting another five seconds for the Timer to "tick").

To start or stop the Timer control from the client-side you need to get a reference to the Timer control and then call its _startTimer or _stopTimer functions, respectively. The download at the conclusion of this article includes a handy JavaScript function named ToggleTimer, which, as its name implies, toggles the status of a Timer control using client-side techniques. This method expects two input parameters: a reference to a button (the "Pause"/"Resume" button) and the id value of the Timer control. It gets a reference to the Timer control via the ASP.NET AJAX framework Client Library $get(id) function and then, depending on whether the Timer is active or not, stops or starts it. The button's value attribute, which corresponds to the text displayed by the Button, is also updated. Here's the JavaScript function in its entirety.

This function is located in the TimerLogic.js file in the ~/Scripts folder. To include it in a particular ASP.NET Web page, add it to the ScriptManager's Scripts collection. To use this JavaScript function, add the HTML for a button to the UpdatePanel an in its client-side onclick event handler call the ToggleTimer function, passing in a reference to the button (this) and the fully qualified client-side id value of the Timer control. (Note that the client-side id is accessible via the Timer control's ClientID property.)

The following screen shot shows the page with the Pause/Resume button in action. When the page is first visited the Timer is active; consequently, the Button is labeled "Pause".

Clicking the Pause button stops the Timer control and updates the button's text to "Resume". The Timer won't "tick" again until the Resume button is clicked.

Conclusion
The ASP.NET AJAX framework Timer control makes it easy to trigger a postback (or, more likely, a partial page postback) every n milliseconds. Set the Timer's Interval property to the appropriate number of milliseconds and then create an event handler for the control's Tick event. That's all there is to it! And with a little client- and/or server-side programming you can add functionality to stop and restart the Timer.

Happy Programming!