Professional ASP.NET 3.5 in C# and Visual Basic Part 23 pdf

Evjen c03.tex V2 - 01/28/2008 12:33pm Page 174
Chapter 3: ASP.NET Web Server Controls
Listing 3-39: Uploading the file contents into a Byte array
VB
Dim myByteArray() As Byte
Dim myStream As System.IO.MemoryStream
myStream = FileUpload1.FileContent
myByteArray = myStream.ToArray()
C#
Byte myByteArray[];
System.IO.Stream myStream;
myStream = FileUpload1.FileContent;
myByteArray = myStream.ToArray();
In this example, instances of a
Byte
array and a
MemoryStream
object are created. First, the
MemoryS-
tream
object is created using the FileUpload control’s
FileContent
property as you did previously. Then
it’s fairly simple to use the
MemoryStream
object’s
ToArray()
method to populate the
myByteArray()
instance. After the file is placed into a
Byte

array, you can work with the file contents as necessary.
MultiView and View Server Controls
The MultiView and View server controls work together to give you the capability to turn on/off sections
of an ASP.NET page. Turning sections on and off, which means activating or deactivating a series o f
View controls within a MultiView control, is similar to changing the visibility of Panel controls. For
certain operations, however, you may find that the MultiView control is easier to manage and work with.
The sections, or views, do not change on the client-side; rather, they change with a postback to the server.
You can put any number of elements and controls in each view, and the end user can work through the
views based upon the sequence numbers that you assign to the views.
You can build these controls (like all server controls) from the source view or design view. If working
with Visual Studio 2008, you can drag and drop a MultiView control onto the design surface and then
drag and drop any number of View controls inside the MultiView control. Place the elements you want
within the View controls. When you are finished, you have something like the view shown in Figure 3-41.
You also can create your controls directly in the code, as shown in Listing 3-40.
Listing 3-40: Using the MultiView and View server controls
VB
<
%@ Page Language="VB"%
>
<
script runat="server"
>
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
If Not Page.IsPostBack Then
MultiView1.ActiveViewIndex = 0
End If
End Sub
174
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 175
Chapter 3: ASP.NET Web Server Controls

Sub NextView(ByVal sender As Object, ByVal e As System.EventArgs)
MultiView1.ActiveViewIndex += 1
End Sub
<
/script
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
MultiView Server Control
<
/title
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<
asp:MultiView ID="MultiView1" runat="server"
>

<
asp:View ID="View1" runat="server"
>
Billy’s Famous Pan Pancakes
<
p/
>
<
i
>
Heat 1/2 tsp of butter in cast iron pan.
<
br /
>
Heat oven to 450 degrees Fahrenheit.
<
br /
>
<
/i
><
p/
>
<
asp:Button ID="Button1" runat="server" Text="Next Step"
OnClick="NextView" /
>
<
/asp:View
>

<
asp:View ID="View2" runat="server"
>
Billy’s Famous Pan Pancakes
<
p/
>
<
i
>
Mix 1/2 cup flour, 1/2 cup milk and 2 eggs in bowl.
<
br /
>
Pour in cast iron pan. Place in oven.
<
/i
><
p/
>
<
asp:Button ID="Button2" runat="server" Text="Next Step"
OnClick="NextView" /
>
<
/asp:View
>
<
asp:View ID="View3" runat="server"
>

Billy’s Famous Pan Pancakes
<
p/
>
<
i
>
Cook for 20 minutes and enjoy!
<
br /
>
<
/i
><
p/
>
<
/asp:View
>
<
/asp:MultiView
>
<
/form
>
<
/body
>
<
/html

>
C#
<
%@ Page Language="C#"%
>
<
script runat="server"
>
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
MultiView1.ActiveViewIndex = 0;
}
}
void NextView(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex += 1;
}
<
/script
>
175
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 176
Chapter 3: ASP.NET Web Server Controls
Figure 3-41
This example shows three views expressed in the MultiView control. Each view is constructed with an
<
asp:View
> server control t hat also needs

ID
and
Runat
attributes. A button is added to each o f the
first two views (
View1
and
View2
) of the MultiView control. The buttons point to a server-side event that
triggers the MultiView control to progress onto the next view within the series of views.
Before either of the buttons can be clicked, the MultiView control’s
ActiveViewIndex
attribute is assigned
a value. By default, the
ActiveViewIndex
, which describes the view that should be showing, is set to
-1
.
This means that no view shows when the page is generated. To start on the first view when the page is
drawn, set the
ActiveViewIndex
property to
0
, which is the first view because this is a zero-based index.
Therefore, the code from Listing 3-40 first checks to see if the page is in a postback situation and if not,
the
ActiveViewIndex
is assigned to the first View control.
Each of the buttons in the MultiView control triggers the
NextView

method.
NextView
simply adds one
to the
ActiveViewIndex
value, thereby showing the next view in the series until the last view is shown.
The view series is illustrated in Figure 3-42.
In addition to the Next Step button on the first and second views, you could place a b utton in the second
and third views to enable the user to navigate backward through the views. To do this, create two but-
tons titled Previous Step in the last two views and point them to the following method in their
OnClick
events:
176
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 177
Chapter 3: ASP.NET Web Server Controls
Figure 3-42
VB
Sub PreviousView(ByVal sender As Object, ByVal e As System.EventArgs)
MultiView1.ActiveViewIndex -= 1
End Sub
C#
void PreviousView(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex -= 1;
}
Here, the
PreviousView
method subtracts o ne from the
ActiveViewIndex
value, thereby showing the

previous view in the view series.
177
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 178
Chapter 3: ASP.NET Web Server Controls
Another option is to spice up the MultiView control by adding a step counter that displays (to a Label
control) which step in the series the end user is currently performing. In the
Page_PreRender
event, you
add the following line:
VB
Label1.Text = "Step " & (MultiView1.ActiveViewIndex + 1).ToString() & _
" of " & MultiView1.Views.Count.ToString()
C#
Label1.Text = "Step " + (MultiView1.ActiveViewIndex + 1).ToString() +
" of " + MultiView1.Views.Count.ToString();
Now when working through the MultiView control, the end user sees
Step 1 of 3
on the first view, which
changes to
Step 2 of 3
on the next view, and so on.
Wizard Server Control
Much like the MultiView control, the Wizard server control enables you to build a sequence of steps that
is displayed to the end user. Web pages are all about either displaying or gathering information and, in
many cases, you don’t want to display all the information at once — nor do you always want to gather
everything from the end user at once. Sometimes, you want to trickle the information in from or out to
the end user.
When you are constructing a step-by-step process that includes logic on the steps taken, use the Wizard
control to manage the entire process. The first time you use the Wizard control, notice that it allows for a
far greater degree of customization than does the MultiView control.

In its simplest form, the Wizard control can be just an
<
asp:Wizard
> element with any number of
<
asp:WizardStep
> elements. Listing 3-41 creates a Wizard control that works through three steps.
Listing 3-41: A simple Wizard control
<
%@ Page Language="VB"%
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
Wizard server control
<
/title
>
<
/head
>
<
body
>
<

form id="form1" runat="server"
>
<
asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="True"
ActiveStepIndex="0"
>
<
WizardSteps
>
<
asp:WizardStep runat="server" Title="Step 1"
>
This is the first step.
<
/asp:WizardStep
>
<
asp:WizardStep runat="server" Title="Step 2"
>
This is the second step.
<
/asp:WizardStep
>
<
asp:WizardStep runat="server" Title="Step 3"
>
This is the third and final step.
<
/asp:WizardStep
>

<
/WizardSteps
>
178
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 179
Chapter 3: ASP.NET Web Server Controls
<
/asp:Wizard
>
<
/form
>
<
/body
>
<
/html
>
In this example, three steps are defined with the <
asp:WizardSteps
> control. Each step contains
content — simply text in this case, although you can put in anything you want, such as other Web server
controls or even user controls. The order in which the
WizardSteps
are defined is based completely on
the order in which they appear within the
<
WizardSteps
> element.
The

<
asp:Wizard
> element itself contains a couple o f important attributes. The first is
DisplaySideBar
.
In this example, it is set to
True
by default — meaning that a side navigation system in the displayed
control e nables the end user to quickly navigate to other steps in the process. The
ActiveStepIndex
attribute of t he Wizard control defines the first wizard step. In this case, it is the first step —
0
.
The three steps of the example Wizard control are shown in Figure 3-43.
Figure 3-43
The side navigation allows for easy access to the defined steps. The Wizard control adds appropriate
buttons to the steps in the process. The first step has simply a Next button, the middle step has Previous
and Next buttons, and the final step has Previous and Finish buttons. The user can navigate through t he
179
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 180
Chapter 3: ASP.NET Web Server Controls
steps using either the side navigation or the buttons on each of the steps. You can customize the Wizard
control in so many ways that it tends to remind me of the other rich Web server controls from ASP.NET,
such as the Calendar control. Because so much is possible, only a few of the basics are covered — the
ones you are most likely to employ in some of the Wizard controls you build.
Customizing the Side Navigation
The steps in the Figure 3-43 example are defined as Step 1, Step 2, and Step 3. The links are created based
on the
Title
property’s value that you give to each of the <

asp:WizardStep
> elements in the Wizard
control:
<
asp:WizardStep runat="server" Title="Step 1"
>
This is the first step.
<
/asp:WizardStep
>
By default, each wizard step created in Design view is titled
Step X
(with
X
being the number in the
sequence). You can easily change the value of the
Title
attributes of each of the wizard steps to define
the steps as you see fit. Figure 3-44 shows the side navigation of the Wizard control with renamed titles.
Figure 3-44
Examining the AllowReturn Attribute
Another interesting point of customization for the side navigation piece of the Wizard control is the
AllowReturn
attribute. By setting this attribute on one of the wizard steps to
False
, you can remove the
capability for end users to go back to this step after they have viewed it. The end user cannot navigate
backward to any viewed steps that contain the attribute, but he would be able to return to any steps that
do not contain the attribute or that have it set to
True

:
<
asp:WizardStep runat="server" Title="Step 1" AllowReturn="False"
>
This is the first step.
<
/asp:WizardStep
>
Working with the StepType Attribute
Another interesting attribute in the <
asp:WizardStep
> element is
StepType
.The
StepType
attribute
defines the structure of the buttons used on the steps. By default, the Wizard control places only a Next
180
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 181
Chapter 3: ASP.NET Web Server Controls
button on the first step. It understands that you do not need the Previous button there. It also knows
to use a Next and Previous button on the middle step, and it uses Previous and Finish buttons on the
last step. It draws the buttons in this fashion because, by default, the
StepType
attribute is set to
Auto
,
meaning that the Wizard control determines the placement of buttons. You can, however, take control of
the
StepType

attribute in the <
asp:WizardStep
> element to make your own determination about which
buttons are used for which steps.
In addition to
Auto
,
StepType
value options include
Start
,
Step
,
Finish
,and
Complete
.
Start
means
that the step defined has only a Next b utton. It simply allows the user to proceed to the next step in the
series. A value of
Step
means that the wizard step has Next and Previous buttons. A value of
Finish
means that the step includes a Previous and a Finish button.
Complete
enables you to give some final
message to the end user who is working through the steps of your Wizard control. In the Wizard control
shown in Listing 3-42, for example, when the end user gets to the last step and clicks the Finish button,
nothing happens and the user just stays on the last page. You can add a final step to give an ending

message, as shown in Listing 3-42.
Listing 3-42: Having a complete step in the wizard step collection
<
WizardSteps
>
<
asp:WizardStep runat="server" Title="Step 1"
>
This is the first step.
<
/asp:WizardStep
>
<
asp:WizardStep runat="server" Title="Step 2"
>
This is the second step.
<
/asp:WizardStep
>
<
asp:WizardStep runat="server" Title="Step 3"
>
This is the third and final step.
<
/asp:WizardStep
>
<
asp:WizardStep runat="server" Title="Final Step" StepType="Complete"
>
Thanks for working through the steps.

<
/asp:WizardStep
>
<
/WizardSteps
>
When you run this Wizard control in a page, you still see only the first three steps in the side navigation.
Because the last step has a
StepType
set to
Complete
, it does not appear in the side navigation list. When
the end user clicks the Finish button in Step 3, the last step —
Final Step
— is shown and no buttons
appear with it.
Adding a Header to the Wizard Control
The Wizard control enables you to place a header at the top of the control by means of the
HeaderText
attribute in the main <
asp:Wizard
> element. Listing 3-43 provides an example.
Listing 3-43: Working with the HeaderText attribute
<
asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0"
HeaderText="&nbsp;Step by Step with the Wizard control&nbsp;"
HeaderStyle-BackColor="DarkGray" HeaderStyle-Font-Bold="true"
HeaderStyle-Font-Size="20"
>

<
/asp:Wizard
>
This code creates a header that appears on each of the steps in the wizard. The result of this snippet is
shown in Figure 3-45.
181
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 182
Chapter 3: ASP.NET Web Server Controls
Figure 3-45
Working with the Wizard’s Navigation System
As stated earlier, the Wizard control allows for a very high degree of customization — especially in the
area of style. You can customize every single aspect of the process, as well as how every element appears
to the end user.
Pay particular attention to the options that are available for customization of the navigation buttons. By
default, the wizard steps use Next, Previous, and Finish buttons throughout the entire series of steps.
From the main
<
asp:Wizard
> element, you can change everything about these buttons and how they
work.
First, if you look through the long list of attributes available for this element, notice that one available
button is not shown by default: the Cancel button. Set the value of the
DisplayCancelButton
attribute to
True
, and a Cancel button appears within the navigation created for each and every step, including the
final step in the series. Figure 3-46 shows a Cancel button in a step.
Figure 3-46
182
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 183

Chapter 3: ASP.NET Web Server Controls
After you decide which buttons to use within the Wizard navigation, you can choose their style. By
default, regular buttons appear; you can change the button style with the
CancelButtonType
,
Finish-
StepButtonType
,
FinishStepPreviousButtonType
,
NextStepButtonType
,
PreviousStepButtonType
,
and
StartStepNextButtonType
attributes. If you use any of these button types and want all the but-
tons consistently styled, you must change each attribute to the same value. The possible values of these
button-specific elements include
Button
,
Image
,and
Link
.
Button
is the default and means that the navi-
gation system uses buttons. A value of
Image
enables you to use image buttons, and

Link
turns a selected
item in the navigation system into a hyperlink.
In addition to these button-specific attributes of the
<
asp:Wizard
> element, you can also specify a URL
to which the user is directed when the he clicks either the Cancel or Finish buttons. To redirect the user
with one of these buttons, you use the
CancelDestinationPageUrl
or the
FinishDestinationPageUrl
attributes and set the appropriate URL as the destination.
Finally, you are not required to use the default text included with the buttons in the navigation sys-
tem. You can change the text of each of the buttons with the use of the
CancelButtonText
,
FinishStep
ButtonText
,
FinishStepPreviousButtonText
,
NextStepButtonText
,
PreviousStepButtonText
,andthe
StartStepNextButtonText
attributes.
Utilizing Wizard Control Events
One of the most convenient capabilities of the Wizard control is that it enables you to divide large forms

into logical pieces. The end user can then work systematically through each section of the f orm. The
developer, dealing with the inputted values of the form, has a few options because of the various events
that are a vailable in the Wizard control.
The Wizard control exposes events for each of the possible steps that an end user might take when
working with the control. The following table describes each of the available events.
Event Description
ActiveStepChanged
Triggers when the end user moves from one step to the next. It does not
matter if the step is the middle or final step in the series. This event
simply covers each step change generically.
CancelButtonClick
Triggers when the end user clicks the Cancel button in the navigation
system.
FinishButtonClick
Triggers when the end user clicks the Finish button in the navigation
system.
NextButtonClick
Triggers when the end user clicks the Next button in the navigation
system.
PreviousButtonClick
Triggers when the end user clicks the Previous button in the navigation
system.
SideBarButtonClick
Triggers when the end user clicks one of the links contained within the
sidebar navigation of the Wizard control.
183