This tutorial will demonstrate the use of the timer control which comes as a part of the Microsoft AJAX Extensions. C#

The timer control is great for when you have an area of your user interface that you want to be dynamically updated based on some periodic interval, opposed to when you have some interaction with the user.

The Timer, a server control, embeds a JavaScript component into a Web page. It’s kind of simple, after the interval property of the Timer control is defined, the JavaScript component will then initiates a postback from the browser when that property expires.

Here is a snapshot of what the page will look like:

A good scenario could be updating a stock symbol, or maybe periodically pulling an RSS Feed. For this instance, we will build a demo that periodically updates a banner ad for a Web site page.

Before we get started you can go into Microsoft Paint and create three different color rectangles that we be used as “banner advertisements” and set their properties to 460 x 60 pixels, and name them banner_1.gif, banner_2.gif, banner_3.gif. Also, be sure to include your ajax toolkit .dll file onto the project. Right-click on the name of the project in the Solution Explorer and choose “Add Reference”.

To start, open Visual Studio. File > New > Web site > ASP.NET Web site and name it tmrCntrl or whatever you want.

Switch to Design View. Locate the solution explorer and right-click on the name of your project. Choose create new Folder and name it banners. Place all your banners that you just created into this folder.

From Design View locate the AJAX extensions tab of the toolbox and double-click ScriptManager (this must be included when you use a Timer control). Then double-click on the Timer control located within that same tab. Underneath these two controls place an UpdatePanel where you will place your banner advertisements.

Next, above and below the UpdatePanel add some text like; ”Here is some sample content that wraps around and Update Panel”. Lastly, add a standard ASP.NET Image control within the UpdatePanel to contain our banner ad. Then we need to provide a banner ad by default, so we need to locate the properties window and click on the ImageUrl and statically select the first banner in your banner folder.

The markup should stzrt looking similar to this:

Now we need to specify the interval of the timer control and set it to about 1.5 seconds or a value of 1500. Also, we need to specify an onTick event handler for our code behind.

We need to tell the UpdatePanel that in addition to its standard behavior we want to include a triggers collection and wire up an async postback trigger to the timer event that we just defined.

Important! When a timer control is included inside an UpdatePanel control, it automatically works as a trigger for the UpdatePanel unless; you override that behavior by setting the ChildrenAstriggers property of the UpdatePanel control to false.

Be sure to set the Interval property to specify how often these postbacks will occur. Do not forget to also set the Enabled property to turn the Timer on or off. The Interval property is defined in milliseconds.

When a timer control is in an UpdatePanel control, the JavaScript timing component is replenished only when each postback finishes. For this reason, the timed interval does not start until the page returns from the postback. For example, let’s say the interval property is set to 120,000 milliseconds (2 min) but each postback takes 3 seconds to complete, therefore the next postback will actually take 2.3 minutes to complete after the previous postback.

After a postback is initiated by the Timer control, it then raises the Tick event on the server. You can create an event handler for the Tick event to perform actions when the page is posted to the server.

Switch to your code behind. This is where we can configure which banner ad we will display next. In this case we will just grab a random banner ad. Now we can use a random number integer value to select which one of the banner ad’s we want to display next. Check it out below:

Save and Run. Do not forget to add these some style like these to your page!

Just by setting the Interval property of a Timer control to a small value can generate significant traffic to the Web server. Take this into consideration, and use the Timer control to refresh the content only as often as necessary.

Download Source Files