Working with ASP.NET AJAX Timer Control
page 4 of 5
by Nidal Arabi
Feedback
Average Rating: 
Views (Total / Last 10 Days): 34896/ 64

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.


View Entire 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-2024 ASPAlliance.com  |  Page Processed at 2024-02-25 7:42:47 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search