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 SubLet 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.
