Working with ASP.NET AJAX Timer Control
 
Published: 25 Sep 2007
Abstract
In this third part of the series, Nidal examines the ASP.NET Ajax Timer control with the help of a project.
by Nidal Arabi
Feedback
Average Rating: 
Views (Total / Last 10 Days): 53610/ 117

Introduction

This article is the third one in a series of articles about Microsoft AJAX Extensions (previously named ATLAS, I like the old name better). The first one did speak about the UpdatePanel. The second one was about the UpdateProgress control. So keep coming back for more.

Problem

You are a web developer at your advertising company. One of the tasks assigned is to display some ads on the main web page that is going to change every 3 seconds. The page size is big, and the only thing that is required to change. Therefore, there is no need to change any other parts of the page. Another example would be changing stocks prices every 2 seconds or even if you are processing a number of records to show the remaining to be processed.

About Timer Control

The Timer control performs post backs at defined intervals. If you use the Timer control with an Update Panel control, you can enable partial page updates at a defined interval. You can also use the Timer control to post the whole page.

Simply stated, it periodically updates the contents of one or more UpdatePanel controls without refreshing the whole Web page.

You can also run code on the server every time that a Timer control causes a post back. Should you need more information on how to use an UpdatePanel please revert back to my article on this topic.

In our article today we are going to create a kind of a fortune teller. This fortune teller will have ten sentences that will present them randomly. We will also be using an UpdatePanel.

It is also worth noting that in order to be able to create this solution; you have to revert back to the same article cited above on what is needed to be able to continue applying what is described in this article. If your computer is already setup with Microsoft AJAX Extensions, then proceed directly to the next paragraph.

Creating your AJAX Timer Solution

Follow these easy steps below to create your AJAX solution.

1.    Start your Visual Studio 2005 IDE.

2.    Choose Create Web Site from the menu.

3.    In this sample application we will use the Visual Basic language for the sample application.

4.    Name the solution TimerTest.

5.    Choose ASP.NET AJAX Enabled Web Site.

6.    Choose File System from the Location drop down box.

7.    Click OK to create the project.

8.    Visual Studio will create your project with a Default.aspx page and most probably a readme.txt. Go ahead and get rid of the latter file.

9.    Open Default.aspx page in design view.

10. You noticed that there is a control on the page already called ScriptManager. (Well, AJAX is really a script based implementation of the language JavaScript.) In short, ScriptManager Control manages client script for Microsoft ASP.NET AJAX pages. By default, the Script Manager control registers the script for the Microsoft AJAX Library with the page. This enables client script to use the type system extensions and to support features such as partial page rendering and Web service calls.

11. In your Toolbox you should find a new group called AJAX Extensions. Locate it and see the controls in it.

12. Now drag an UpdatePanel Control from the Toolbox as well as a Timer Control.

13. Above the UpdatePanel control, write the sentence Our Fortune Teller Will Tell Your Luck Every 3 Seconds as shown below.

Figure 1 - Simple application with UpdatePanel

14. You should also add two horizontal rulers above and below the UpdatePanel.

15. In the UpdatePanel add the following text, Your Immediate Advice:

16. Now, add a label next to it from the standard controls.

17. Your graphical design should have finished, you have to switch to the source view of the page.

18. For the UpdatePanel make the source part of it as in the following listing.

Listing 1 - HTML Configuration of the UpdatePanel

<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" Interval="3000" />
</Triggers>
<ContentTemplate>
Your Immediate Advice:
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>

19. For the Timer make the source part of it as in the following listing.

Listing 2 - HTML Configuration of the Timer

<asp:Timer ID="Timer1" runat="server" Interval="3000">
</asp:Timer>

20. Note that for the UpdatePanel, the asynchronous post back trigger is specified as the Timer.

21. For the Timer the interval is set as 3000 Milliseconds (3 seconds).

Listing 3 - Code for the Form as a Whole

Dim AdviceArr() As String = {"Go Home Now", "Avoid Talking To Friends", _
"Talking is bad", "Have Fun" , "Eating is good", "Love Yourself", _
"Show Your Anger", "Express Feeling", "Go To Sleep", "Leave Work"}
 
Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) _
 Handles Timer1.Tick
  Dim CurrentAdvice As Integer = New Random().Next(0, 9)
  label1.text = AdviceArr(CurrentAdvice)
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
 Handles Me.Load
  Timer1_Tick(sender, e)
End Sub

Let us understand what happened and explain a little bit the Timer control. When the code runs the web form will contain the first random advice. Note that the tick event will run every 3 seconds, however, the first time the web form loads the label would be empty and thus the call for the tick event in the form load. Whenever three seconds elapses, the time control will perform a partial update of the page (represented by changing only the content of the UpdatePanel) and choose another advice from the AdviceArr array.

A timer control would be a great addition to UpdateProgress control to show more realistic animation when you are processing a number of records from a database or even doing a timely process that you know how much it is going to take.

Conclusion

We have covered now three ASP.NET AJAX Extensions control that really complete each other. The demo presented here may be simple, but I am counting on your creativity to let you see what you can do with these simple yet powerful controls.

Happy AJAXfying and see you in the next article.



User Comments

Title: ajax timer in asp.net   
Name: rashmi uniyal
Date: 2011-11-08 11:46:44 AM
Comment:
i m creating website for online examination in asp.net. I want to know how to start a timer after a button click and and how to close application after 5 minutes. please help
Title: thanks alot   
Name: mona el saka
Date: 2010-12-05 7:45:25 AM
Comment:
i need your help here too
can i add apage i make it with asp.net ajax enabled website to
anormal asp.net web site project .i try to take apage i made as ajax web site to another asp.net project give ameesage box say the source of this page is not found
if any one have any help just tell me
Title: Nice Work   
Name: Ahmed Moosa
Date: 2009-05-16 5:25:48 PM
Comment:
Thanks Nidal Arabi
That is very Nice Work.
I learn From you Something Good .
Title: Nice Article but problem running it   
Name: Ujjwal B Soni
Date: 2008-09-15 2:53:40 AM
Comment:
Hi,

The article is very nice but i have problem running it. The timer is not activated, dont know whats the problem !!!

Regards,

Ujjwal B Soni






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2017 ASPAlliance.com  |  Page Processed at 2017-11-24 7:03:58 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search