Using the Wizard control of ASP.NET
Introduction
Some times the data to be accepted from the user is too much and splitting
the entire form into multiple logical sections is desirable. In classic ASP or
even ASP.NET 1.x developers used to create multiple web forms each containing a
part of the total information thus creating a wizard. However, this approach was
often proved to be complex and time consuming. ASP.NET provides Wizard server
control that allows hassle free development of such web forms. In
this article we are going to see how to use this control in a typical situation
of user registration.
Creating a web form with Wizard control
To begin with, create a new web site in VS.NET 2005. Drag and drop a Wizard
control on the default web form. The Wizard control is represented by <asp:Wizard>
tag in the markup and by Wizard class in the code. Figure 1 shows the Wizard
control in action. On the left hand side you have a set of navigation links
(Account Details, Contact Information etc.). This region is called as side bar
of the Wizard. The area wherein the actual data entry controls are appearing is
often called as view. At the top you have header of the Wizard and at the bottom
you have navigation bar.

Figure 1: Structure of Wizard control
Formatting the wizard control
The easiest way to apply formatting to the Wizard control is via "Auto
Format" feature. Select the Wizard control and from its smart tag select "Auto
format" to open Auto Format dialog as shown in Figure 2.

Figure 2: Auto Format dialog
Here you can select a formatting theme to quickly apply formatting to the
Wizard. You can of course customize various formatting attributes manually via
various "styles" of the control. Figure 3 shows all the available styles of the
Wizard control.

Figure 3: Styles of Wizard control
Adding wizard steps
The core job in using the Wizard control lies in managing Wizard Steps. Each
step of the Wizard control is represented by <asp:WizardStep> markup tag. The
wizard step acts as a container to a set of controls.
In order to add or remove steps to the Wizard control, select "Add/Remove
WizardSteps..." option from its smart tag (Figure 4).

Figure 4: Smart tags of the Wizard control
This will open "WizardStep Collection Editor" as shown in Figure 5.

Figure 5: WizardStep Collection Editor
Add in all three steps as shown in Figure 5. Set the Title property of each
set to Account Details, Contact Information and Confirmation respectively. Also,
set ID property of the three steps to step1, step2 and step3 respectively. The
ID property can be used to identify a specific wizard step in the code.
Now let's design the three wizard steps. Go to the web form designer and
click on "Account Details" step of the Wizard control. This will make that step
as the active step. Design the step as shown in Figure 6.

Figure 6: Designing Account Details WizardStep
The step consists of three Labels, three TextBoxes and validator controls
attached to them. The TextBoxes accept the User ID and Password. All the three
TextBoxes are attached with a RequiredFieldValidator each. Additionally, a
CompareValidator ensures that the value entered in the password and confirm
password TextBoxes match.
Now click on "Contact Information" step and design it as shown in Figure 7:

Figure 7: Designing Contact Information WizardStep
The "Contact Information" wizard step consists of two Labels, two TextBoxes
and validator controls attached to them. The TextBoxes accept Email and
Telephone number of the user. The RequireFieldValidator and RegularExpression
validator controls attached to them do the job of ensuring that correct input is
entered by the end user. Note how this step automatically displays Previous and
Next buttons.
Finally deisgn the "Confirmation" wizard step as shown in Figure 8:

Figure 8: Designing Confirmation WizardStep
The Confirmation wizard step simply display all the pieces of information
entered on the previous steps as a confirmation. Note that since this is the
last step of the wizard instead of Next button Finish button is displayed.
Below is the complete markup of the web form:
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Wizard ID="Wizard1" runat="server"
ActiveStepIndex="2"
BackColor="#EFF3FB" BorderColor="#B5C7DE"
BorderWidth="1px" Font-Names="Verdana"
Font-Size="0.8em"
HeaderText="Cool Wizard control"
OnActiveStepChanged="Wizard1_ActiveStepChanged"
OnFinishButtonClick="Wizard1_FinishButtonClick">
<StepStyle Font-Size="0.8em" ForeColor="#333333" />
<SideBarStyle BackColor="#507CD1" Font-Size="0.9em"
VerticalAlign="Top" Width="150px"
Wrap="False" />
<NavigationButtonStyle BackColor="White"
BorderColor="#507CD1"
BorderStyle="Solid"
BorderWidth="1px" Font-Names="Verdana"
Font-Size="0.8em"
ForeColor="#284E98" />
<WizardSteps>
<asp:WizardStep ID="step1" runat="server"
Title="Account Details">
<table style="width: 100%">
<tr>
<td nowrap="nowrap">
<asp:Label ID="Label1" runat="server"
Text="User ID :">
</asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator1"
runat="server" ControlToValidate="TextBox1"
Display="Dynamic"
ErrorMessage="Please enter User ID">
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td nowrap="nowrap">
<asp:Label ID="Label2" runat="server"
Text="Password :">
</asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"
TextMode="Password">
</asp:TextBox>
<br />
<asp:RequiredFieldValidator
ID="RequiredFieldValidator2"
runat="server" ControlToValidate="TextBox2"
Display="Dynamic"
ErrorMessage="Please enter Password">
</asp:RequiredFieldValidator>
<asp:CompareValidator ID="CompareValidator1"
runat="server" ControlToCompare="TextBox2"
ControlToValidate="TextBox3" Display="Dynamic"
ErrorMessage="Passwords do not match ">
</asp:CompareValidator>
</td>
</tr>
<tr>
<td nowrap="nowrap">
<asp:Label ID="Label3" runat="server"
Text="Confirm Password :">
</asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server"
TextMode="Password">
</asp:TextBox>
<br />
<asp:RequiredFieldValidator
ID="RequiredFieldValidator3"
runat="server" ControlToValidate="TextBox3"
Display="Dynamic"
ErrorMessage="Please enter password again">
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="height: 26px">
</td>
<td style="height: 26px">
</td>
</tr>
</table>
<br />
</asp:WizardStep>
<asp:WizardStep ID="step2" runat="server"
Title="Contact Information">
<table style="width: 100%">
<tr>
<td nowrap="nowrap">
<asp:Label ID="Label4" runat="server"
Text="Email :">
</asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server">
</asp:TextBox>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator4"
runat="server" ControlToValidate="TextBox4"
Display="Dynamic" ErrorMessage="Please enter email">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator
ID="RegularExpressionValidator1"
runat="server" ControlToValidate="TextBox4"
Display="Dynamic" ErrorMessage="Invalid email format"
ValidationExpression="\w+([-+.']\w+)*@\w+
([-.]\w+)*\.\w+([-.]\w+)*">
</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td nowrap="nowrap">
<asp:Label ID="Label6" runat="server"
Text="Telephone Number :">
</asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox5" runat="server">
</asp:TextBox>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator5"
runat="server" ControlToValidate="TextBox5"
Display="Dynamic"
ErrorMessage="Please enter email">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator
ID="RegularExpressionValidator2"
runat="server" ControlToValidate="TextBox5"
Display="Dynamic" ErrorMessage="Invalid tel. no."
ValidationExpression="((\(\d{3}\) ?)|
(\d{3}-))?\d{3}-\d{4}">
</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td nowrap="nowrap">
</td>
<td>
</td>
</tr>
</table>
</asp:WizardStep>
<asp:WizardStep ID="step3" runat="server"
Title="Confirmation">
<table style="width: 100%">
<tr>
<td nowrap="nowrap">
<asp:Label ID="Label5" runat="server"
Font-Bold="True"
Text="User ID :"></asp:Label>
</td>
<td>
<asp:Label ID="Label9" runat="server"
Font-Bold="True"
Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td nowrap="nowrap">
<asp:Label ID="Label7" runat="server"
Font-Bold="True"
Text="Email :"></asp:Label>
</td>
<td>
<asp:Label ID="Label10" runat="server"
Font-Bold="True"
Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td nowrap="nowrap">
<asp:Label ID="Label8" runat="server"
Font-Bold="True"
Text="Telephone Number :"></asp:Label>
</td>
<td>
<asp:Label ID="Label11" runat="server"
Font-Bold="True"
Text="Label"></asp:Label>
</td>
</tr>
</table>
</asp:WizardStep>
</WizardSteps>
<SideBarButtonStyle BackColor="#507CD1"
Font-Names="Verdana"
ForeColor="White" />
<HeaderStyle BackColor="#284E98"
BorderColor="#EFF3FB"
BorderStyle="Solid" BorderWidth="2px"
Font-Bold="True" Font-Size="0.9em"
ForeColor="White"
HorizontalAlign="Center" />
</asp:Wizard>
<br />
<asp:Label ID="Label12" runat="server"
EnableViewState="False"
Font-Size="Large"
ForeColor="Red"></asp:Label> </div>
</form>
</body>
</html>
Wizard control events
In order to make some use of the information captured via the wizard we need
to handle some events of the Wizard control. Wizard control has several useful
events. The following table lists some of the important ones:
Event Name |
Description |
ActiveStepChanged |
This event is raised when the currently displayed step of the Wizard
control changes. |
CancelButtonClick |
This event is raised when the Cancel button of the wizard step is
clicked |
FinishButtonClick |
This event is raised when the Finish button of the wizard step is
clicked |
NextButtonClick |
This event is raised when the Next button of the Wizard is clicked |
PreviousButtonClick |
This event is raised when the Previous button of the Wizard is
clicked |
SideBarButtonClick |
This event is raised when any of the side bar link buttons of the
Wizard are clicked |
In our example we will handle two events of the Wizard control -
ActiveStepChanged and FinishButtonClick.
Go in the code behind of the web form and add the following code in
ActiveStepChanged event handler.
protected void Wizard1_ActiveStepChanged
(object sender, EventArgs e)
{
if (Wizard1.ActiveStep.ID == "step3")
{
Label9.Text = ((TextBox)Wizard1.Controls[0].
FindControl("TextBox1")).Text;
Label10.Text = ((TextBox)Wizard1.Controls[0].
FindControl("TextBox4")).Text;
Label11.Text = ((TextBox)Wizard1.Controls[0].
FindControl("TextBox5")).Text;
}
}
As you can see we are using this event to grab all the values entered on the
"Account Details" and "Contact Information" steps. First of all we check the ID
property of the ActiveStep property of the Wizard control. Recollect that we
have set ID property of Confirmation step to step3. We access the controls from
the wizard step by using FindControl() method. The FindControl() method accepts
the ID of the control to be searched and returns a reference to it. The return
value of the FindControl() method is of generic type control and hence we type
cast it into a TextBox.
Finally, add the following code in the FinishButtonClick event of the Wizard
control.
protected void Wizard1_FinishButtonClick
(object sender, WizardNavigationEventArgs e)
{
Label12.Text = "Thank you for registering with us";
Wizard1.Visible=false;
}
Here, we simply display a success message in a Label control and hide the
Wizard control. In most of the real world cases you will have some code that
stores the values into database.
Run the web form and see the Wizard control in action. Try navigating between
various steps. Also, test the validation controls. You will notice that if you
do not satisfy the validation conditions and click on Previous button then the
validation is not performed where as if you click on side bar links then the
validation is always triggered.
That's it! Our user registration wizard is ready.
NOTE: In this example our intentions was to learn the Wizard control and
hence we selected user registration wizard as a most common example. ASP.NET 2.0
provides another control called CreateUserWizard control which works along with
membership features and is a specialized form of the Wizard control.
Summary
Creating Wizard driven web forms is made easy by the Wizard control
introduced in ASP.NET 2.0. The Wizard control consists of several WizardSteps
and each step contains a set of control. The functionality of navigating between
the wizard steps is automatically provided by the Wizard control. Using various
events of the Wizard control you can trap the step navigation and wizard
completion.