Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Using the Timer ControlBy Scott Mitchell
Microsoft's ASP.NET AJAX framework ships with a mere five Web controls: the ScriptManager and ScriptManagerProxy; the UpdatePanel; the UpdateProgress; and the Timer. Previous installments in this article series have examined all but one control, the Timer. As we've seen from the first installment, all web pages that use the framework must have precisely one ScriptManager control on the page. The UpdatePanel control defines a region on the screen whose content is updated via partial page postbacks, and the UpdateProgress control provides visual feedback during the execution of a partial page postback. The Timer control, which is the focus of this installment, raises a postback every time a specified number of milliseconds has elapsed.
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
Intervalproperty specifies the number of milliseconds to elapse before the postback is triggered. On postback, the Timer's
Tickevent 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.
Intervalproperty to 5000. Every five seconds the Timer will "tick," causing a partial page postback and raising its
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
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.
UpdateStockPrice method needs to be called when the page is first loaded as well as whenever the Timer control's
Tick event is raised.
Page_Load event handler in the code-behind class and set the two Labels'
Text properties to the current time. Also call
UpdateStockPrice method if
Page.IsPostback is False (i.e., the page is being visited for the first time and not on a
Next, create an event handler for the Timer's
Tick event and, from there, call the
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.
TimerPause.aspx) and a client-side demo (
TimerPauseClient.aspx). Let's look at both approaches.
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
_stopTimer functions, respectively. The download at the conclusion of this article includes a handy
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
This function is located in the
TimerLogic.js file in the
~/Scripts folder. To include it in a particular ASP.NET Web page,
onclick event handler call the
ToggleTimer function, passing in a reference to the button (
this) and the fully qualified client-side
of the Timer control. (Note that the client-side id is accessible via the Timer control's
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.
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
Intervalproperty to the appropriate number of milliseconds and then create an event handler for the control's
Tickevent. 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.