Professional ASP.NET 3.5 in C# and Visual Basic Part 24 doc

Evjen c03.tex V2 - 01/28/2008 12:33pm Page 184
Chapter 3: ASP.NET Web Server Controls
By working with these events, you can create a multi-step form that saves all the end user’s input
information when he changes from one step to the next. You can also use the
FinishButtonClick
event
to save everything that was stored in each of the steps at the end of the process. The Wizard control
remembers all the end user’s input in each of the steps by means of the view state in the page, which
enables you to work with all these values in the last step. It also gives the end user the capability to go
back to previous steps and change values before those values are saved to a data store.
The event appears in your code behind or inline code, as shown in Listing 3-44.
Listing 3-44: The FinishButtonClick event
VB
<
script runat="server"
>
Sub Wizard1_FinishButtonClick(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs)
End Sub
<
/script
>
C#
<
script runat="server"
>
void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
{
}
<
/script

>
The
OnFinishButtonClick
attribute should be added to the main <
asp:Wizard
> element to point at the
new
Wizard1_FinishButtonClick
event. Listing 3-45 shows how to do this.
Listing 3-45: The <asp:Wizard> Element Changes
<
asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0"
OnFinishButtonClick="Wizard1_FinishButtonClick"
>
The Wizard control is one of the great new controls that enable you to break up longer workflows into
more manageable pieces for your end users. By separating longer Web forms into various wizard steps,
you can effectively make your forms easy to understand and less daunting to the end user.
Using the Wizard Control to Show Form Elements
So far, you have learned how to work with each of the Wizard control steps, including how to add steps
to the process and how to work with the styling of the control. Now look at how you put form elements
into the Wizard control to collect information from the end user in a stepped process. This is just as
simple as the first examples of the Wizard control that used only text in each of the steps.
One nice thing about putting form elements in the Wizard step process is that the Wizard control remem-
bers each input into the form elements from step to step, enabling you to save the results of the entire
form at the last step. It also means that when the end user presses the Previous button, the data that he
entered into the form previously is still there and can be changed.
184
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 185
Chapter 3: ASP.NET Web Server Controls
Work through a stepped process that enters form information by building a registration process. The last

step of the process saves the results to a database of your choice, although in this example, you just push
the results to a Label control on the page. Listing 3-46 shows t he first part of the process.
Listing 3-46: Building the form in the Wizard control
<
asp:Wizard ID="Wizard1" runat="Server"
>
<
WizardSteps
>
<
asp:WizardStep ID="WizardStep1" runat="server"
Title="Provide Personal Info"
>
First name:
<
br /
>
<
asp:TextBox ID="fnameTextBox" runat="server"
><
/asp:TextBox
><
br /
>
Last name:
<
br /
>
<
asp:TextBox ID="lnameTextBox" runat="server"

><
/asp:TextBox
><
br /
>
Email:
<
br /
>
<
asp:TextBox ID="emailTextBox" runat="server"
><
/asp:TextBox
><
br /
>
<
/asp:WizardStep
>
<
asp:WizardStep ID="WizardStep2" runat="server"
Title="Membership Information"
>
Are you already a member of our group?
<
br /
>
<
asp:RadioButton ID="RadioButton1" runat="server" Text="Yes"
GroupName="Member" /

>
<
asp:RadioButton ID="RadioButton2" runat="server" Text="No"
GroupName="Member" /
>
<
/asp:WizardStep
>
<
asp:WizardStep ID="WizardStep3" runat="server" Title="Provided Information"
StepType="Complete" OnActivate="WizardStep3_Activate"
>
<
asp:Label ID="Label1" runat="server" /
>
<
/asp:WizardStep
>
<
/WizardSteps
>
<
/asp:Wizard
>
This Wizard control has three steps. The first step asks for the user’s personal information, and the
second asks for the user’s membership information. The third step contains a Label control that pushes
out all the information that was input. This is done through the
Activate
event that is specific for the
WizardStep

object on the third WizardStep control. The code for the
WizardStep3_Activate
event is
shown in Listing 3-47.
Listing 3-47: Adding an Activate event to a WizardStep object
VB
Protected Sub WizardStep3_Activate(ByVal sender As Object, _
ByVal e As System.EventArgs)
’ You could save the inputted data to the database here instead
Label1.Text = "First name: " & fnameTextBox.Text.ToString() & "
<
br
>
"&_
"Last name: " & lnameTextBox.Text.ToString() & "
<
br
>
"&_
"Email: " & emailTextBox.Text.ToString()
End Sub
C#
protected void WizardStep3_Activate(object sender, EventArgs e)
Continued
185
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 186
Chapter 3: ASP.NET Web Server Controls
{
Label1.Text = "First name: " + fnameTextBox.Text.ToString() + "
<

br
>
"+
"Last name: " + lnameTextBox.Text.ToString() + "
<
br
>
"+
"Email: " + emailTextBox.Text.ToString();
}
When the end user comes to the third step in the display, the
WizardStep3_Activate
method from
Listing3-47isinvoked.Usingthe
OnActivate
attribute in the third WizardStep control, the content
provided by the end user in earlier steps is used to populate a Label control. The three steps are shown
in Figure 3-47.
Figure 3-47
186
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 187
Chapter 3: ASP.NET Web Server Controls
This example is simple and straightforward, but you can increase the complexity a little bit. Imagine
you want to add another WizardStep control to the process, and you want to display it only if a user
specifies that he is a member in
WizardStep2
. If he answers from the radio button selection that he is
not a member, you have him skip the new step and go straight to the final step where the results are
displayed in the Label control. First, add an additional
WizardStep

to the Wizard control, as shown in
Listing 3-48.
Listing 3-48: Adding an additional WizardStep
<
asp:Wizard ID="Wizard1" runat="Server"
>
<
WizardSteps
>
<
asp:WizardStep ID="WizardStep1" runat="server"
Title="Provide Personal Info"
>
First name:
<
br /
>
<
asp:TextBox ID="fnameTextBox" runat="server"
><
/asp:TextBox
><
br /
>
Last name:
<
br /
>
<
asp:TextBox ID="lnameTextBox" runat="server"

><
/asp:TextBox
><
br /
>
Email:
<
br /
>
<
asp:TextBox ID="emailTextBox" runat="server"
><
/asp:TextBox
><
br /
>
<
/asp:WizardStep
>
<
asp:WizardStep ID="WizardStep2" runat="server"
Title="Membership Information"
>
Are you already a member of our group?
<
br /
>
<
asp:RadioButton ID="RadioButton1" runat="server" Text="Yes"
GroupName="Member" /

>
<
asp:RadioButton ID="RadioButton2" runat="server" Text="No"
GroupName="Member" /
>
<
/asp:WizardStep
>
<
asp:WizardStep ID="MemberStep" runat="server"
Title="Provide Membership Number"
>
Membership Number:
<
br /
>
<
asp:TextBox ID="mNumberTextBox" runat="server"
><
/asp:TextBox
>
<
/asp:WizardStep
>
<
asp:WizardStep ID="WizardStep3" runat="server" Title="Provided Information"
StepType="Complete" OnActivate="WizardStep3_Activate"
>
<
asp:Label ID="Label1" runat="server" /

>
<
/asp:WizardStep
>
<
/WizardSteps
>
<
/asp:Wizard
>
A single step was added to the workflow — one that simply asks the member for his membership num-
ber. Because you want to show this step only if the end user specifies that he is a member in
WizardStep2
,
you add an event (shown in Listing 3-49) designed to check for that specification.
Listing 3-49: Applying logical checks on whether to show a step
VB
Sub Wizard1_NextButtonClick(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs)
If e.NextStepIndex = 2 Then
If RadioButton1.Checked = True Then
Continued
187
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 188
Chapter 3: ASP.NET Web Server Controls
Wizard1.ActiveStepIndex = 2
Else
Wizard1.ActiveStepIndex = 3
End If
End If

End Sub
C#
void Wizard1_NextButtonClick(object sender, WizardNavigationEventArgs e)
{
if (e.NextStepIndex == 2) {
if (RadioButton1.Checked == true) {
Wizard1.ActiveStepIndex = 2; }
else {
Wizard1.ActiveStepIndex = 3; }
}
}
To check whether you should show a specific step in the process, use the
NextButtonClick
event from the
Wizard control. The event uses the
WizardNavigationEventArgs
class instead of the typical
EventArgs
class that gives you access to the
NextStepIndex
number, as well as to the
CurrentStepIndex
number.
In the example from Listing 3-49, you check whether the next step to be presented in the process is
2
.
Remember that this is index
2
fromazero-basedindex(0,1,2,andsoon).IfitisStep
2

in the index,
you check which radio button is selected from the previous WizardStep. If the
RadioButton1
control is
checked (meaning that the user is a member), the next step in the process is assigned as index
2
.Ifthe
RadioButton2
control is selected, the user is not a member, and the index is then assigned as
3
(the final
step), thereby bypassing the membership step in the process.
You could also take this example and alter it a bit so that you show a WizardStep only if the user is
contained within a specific role (such as Admin).
Role management is covered in Chapter 16.
Showing only a WizardStep if the user is contained within a certain role is demonstrated in Listing 3-50.
Listing 3-50: Applying logical checks on whether to show a step based upon roles
VB
Sub Wizard1_NextButtonClick(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs)
If e.NextStepIndex = 2 Then
If (Roles.IsUserInRole("ManagerAccess") Then
Wizard1.ActiveStepIndex = 2
Else
Wizard1.ActiveStepIndex = 3
End If
End If
End Sub
188
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 189

Chapter 3: ASP.NET Web Server Controls
C#
void Wizard1_NextButtonClick(object sender, WizardNavigationEventArgs e)
{
if (e.NextStepIndex == 2) {
if (Roles.IsUserInRole("ManagerAccess")) {
Wizard1.ActiveStepIndex = 2; }
else {
Wizard1.ActiveStepIndex = 3; }
}
}
}
ImageMap Server Control
The ImageMap server control enables you to turn an image into a navigation menu. In the past, many
developers would break an image into multiple pieces and put it together again in a table, reassem-
bling the pieces into one image. When the end user clicked a particular piece of the overall image, the
application picked out which piece of the image was chosen and based actions upon that particular
selection.
With the new ImageMap control, you can take a single image and specify particular hotspots on the
image using coordinates. An example is shown in Listing 3-51.
Listing 3-51: Specifying sections of an image that are clickable
VB
<
%@ Page Language="VB"%
>
<
script runat="server"
>
Protected Sub Imagemap1_Click(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.ImageMapEventArgs)

Response.Write("You selected: " & e.PostBackValue)
End Sub
<
/script
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
ImageMap Control
<
/title
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<
asp:ImageMap ID="Imagemap1" runat="server" ImageUrl="Kids.jpg"
Width="300" OnClick="Imagemap1_Click" HotSpotMode="PostBack"
>

<
asp:RectangleHotSpot Top="0" Bottom="225" Left="0" Right="150"
AlternateText="Sofia" PostBackValue="Sofia"
>
<
/asp:RectangleHotSpot
>
<
asp:RectangleHotSpot Top="0" Bottom="225" Left="151" Right="300"
Continued
189
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 190
Chapter 3: ASP.NET Web Server Controls
AlternateText="Henri" PostBackValue="Henri"
>
<
/asp:RectangleHotSpot
>
<
/asp:ImageMap
>
<
/form
>
<
/body
>
<
/html
>

C#
<
%@ page language="C#"%
>
<
script runat="server"
>
protected void Imagemap1_Click(object sender,
System.Web.UI.WebControls.ImageMapEventArgs e) {
Response.Write("You selected: " + e.PostBackValue);
}
<
/script
>
This page brings up an image of my children. If you click the left side of the image, you select Sofia, and
if you click the right side of the image, you select Henri. You know which child you selected through a
Response.Write
statement, as shown in Figure 3-48.
The ImageMap control enables you to specify hotspots in a couple of different ways. From the example in
Listing 3-51, you can see that hotspots are placed in a rectangular fashion using the
<
asp:RectangleHot
Spot
> element. The control takes the
Top
,
Bottom
,
Left
,and

Right
coordinates of the rectangle that is to
be the hotspot. Besides the
<
asp:RectangleHotSpot
> control, you can also use the <
asp:CircleHotSpot
>
and the <
asp:PolygonHotSpot
> controls. Each control takes coordinates appropriate to its shape.
After you define t he hotspots on the image, you can respond to the end-user click o f the hotspot in several
ways. You first specify how to deal with the hotspot clicks in the root
<
asp:ImageMap
> element with the
use the
HotSpotMode
attribute.
The
HotSpotMode
attribute can take the values
PostBack
,
Navigate
,or
InActive
.Intheprevious
example, the
HotSpotMode

value is set to
PostBack
— meaning that after the end user clicks the hotspot,
you want to postback to the server and deal with the click at that point.
Because the
HotSpotMode
is set to
PostBack
and you have created several hotspots, you must determine
which hotspot is selected. You make this determination by giving each hotspot (
<
asp:RectangleHotSpot
>)
a postback value with the
PostBackValue
attribute. The example uses
Sofia
as the value of the first
hotspot, and
Henri
as the value for the second.
The
PostBackValue
attribute is also the helper text that appears in the browser (in the yellow box) directly
below the mouse cursor when the end user hovers the mouse over the hotspot.
After the user clicks one of the hotspots, the event procedure displays the value that was selected in a
Response.Write
statement.
Instead of posting back to the server, you can also navigate to an entirely different URL when a particular
hotspot is selected. To accomplish this, change the

HotSpotMode
attribute in the main <
asp:ImageMap
>
element to the value
Navigate
. Then, within the <
asp:RectangleHotSpot
> elements, simply use the
190
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 191
Chapter 3: ASP.NET Web Server Controls
Figure 3-48
NavigateUrl
attribute and assign the location to which the end user should be directed if that particular
hotspot is clicked:
<
asp:ImageMap ID="Imagemap1" runat="server" ImageUrl="kids.jpg"
HotSpotMode="Navigate"
>
<
asp:RectangleHotSpot Top="0" Bottom="225" Left="0" Right="150"
AlternateText="Sofia" NavigateUrl="SofiaPage.aspx"
>
<
/asp:RectangleHotSpot
>
<
asp:RectangleHotSpot Top="0" Bottom="225" Left="151" Right="300"
AlternateText="Henri" NavigateUrl="HenriPage.aspx"

>
<
/asp:RectangleHotSpot
>
<
/asp:ImageMap
>
191
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 192
Chapter 3: ASP.NET Web Server Controls
Summary
This chapter explored numerous server controls, their capabilities, and the features they provide. With
ASP.NET 3.5, you have more than 50 new server controls at your disposal.
Because you have so many server controls at your disposal when you are creating your ASP.NET appli-
cations, you have to think carefully about which is the best control for the task. Many controls seem
similar, but they offer different features. These controls guarantee that you can build the best possible
applications for all browsers.
Server controls are some of the most useful tools you will find in your ASP.NET arsenal. They are quite
useful and can save you a lot of time. This chapter introduced you to some of these controls and to the
different ways you might incorporate them into your next projects. All these controls are wonderful
options to use on any of your ASP.NET pages and make it much easier to develop the functionality that
your pages require.
192
Evjen c04.tex V2 - 01/28/2008 12:45pm Page 193
Validation Server Controls
When you look at the Toolbox window in Visual Studio 2008 — especially if you’ve read Chapters 2
and 3, which cover the various server controls at your disposal — you may be struck by the number
of server controls that come with ASP.NET 3.5. This chapter takes a look at a specific type of server
control you find in the Toolbox window: the validation server control.
Validation server controls are a series of controls that enable you to work with the information your

end users input into the form elements of the applications you build. These controls work to ensure
the validity of the data being placed in the form.
Before you learn how to use these controls, however, this chapter will first take a look at the process
of validation.
Understanding Validation
People have been constructing Web applications for a number of years. Usually the motivation is
to provide or gather information. In this chapter, you focus on the information-gathering aspect of
Web applications. If you collect data with your applications, collecting valid data should be impor-
tant to you. If the information isn’t valid, there really isn’t much point in collecting it.
Validation comes in degrees. Validation is a set of rules that you apply to the data you collect. These
rules can be many or few and enforced either strictly or in a lax manner: It really depends on you.
No perfect validation process exists because some users may find a way to cheat to some degree,
no matter what rules you establish. The trick is to find the right balance of the fewest rules and the
proper strictness, without compromising the usability of the application.
The data you collect for validation comes from the Web forms you provide in your applications.
Web forms are made up of different types of HTML elements that are constructed using raw HTML
form elements, ASP.NET HTML server controls, or ASP.NET Web Form server controls. In the
end, your forms are made up of many different types of HTML elements, such as text boxes, radio
buttons, check boxes, drop-down lists, and more.