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">
&nbsp;</td>
<td style="height: 26px">
&nbsp;&nbsp;
</td>
</tr>
</table>
<br />
</asp:WizardStep>
<asp:WizardStep ID="step2" runat="server" 
Title="Contact Information">
<table style="width: 100%">
<tr>
<td nowrap="nowrap">
&nbsp;<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>&nbsp;</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:

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.