The Web Form Wizardry of ASP.NET 2.0's Wizard Control

When the data a Web application accepts from the user is too much, splitting the entire Web form into multiple logical sections is a desirable solution. To accomplish this in classic ASP or even ASP.NET 1.x, developers used to create a wizard: multiple Web forms each containing a part of the total information. However, this approach often proved complex and time consuming. ASP.NET 2.0 provides a new control, called Wizard, that allows hassle-free development of such Web forms. This article demonstrates how to use this control in a typical user registration.

Creating a Web Form with Wizard Control

Begin by creating 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 a <asp:Wizard> tag in the markup and by a Wizard class in the code. Figure 1 shows the Wizard control in action.

Figure 1: Structure of Wizard Control

On the left-hand side, you have a set of navigation links (Account Details, Contact Information, and so forth). This region of the Wizard is called a side bar. The area where the actual data entry controls appear is often called a view. At the top, you have a header, and at the bottom you have a navigation bar.

Formatting the Wizard Control

The easiest way to apply formatting to the Wizard control is via the "Auto Format" feature. Select the Wizard control and from its smart tag select "Auto format" to open the Auto Format dialog (see Figure 2).

Figure 2: Auto Format Dialog

Here, you can select a formatting theme that will quickly apply 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.

Figure 3: Styles of Wizard Control

Adding Wizard Steps

The main job in using the Wizard control is managing Wizard steps, which act as containers for a set of controls. Each step is represented by the <asp:WizardStep> markup tag.

In order to add or remove steps to the Wizard control, select the "Add/Remove WizardSteps..." option from its smart tag (see 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 the ID property of the three steps to step1, step2, and step3, respectively. The ID property identifies a specific wizard step in the code.

Now, design the three wizard steps. Go to the Web form designer and click the "Account Details" step. This will make that step 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 the validator controls attached to them. The TextBoxes accept the user ID and password. Each of the three TextBoxes has a RequiredFieldValidator attached. Additionally, a CompareValidator ensures that the value entered in the password TextBox matches the one in the confirm password TextBox.

Now click the "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 the validator controls attached to them. The TextBoxes accept the user's e-mail address and telephone number. The RequireFieldValidator and RegularExpression validator controls attached to them ensure that the end user enters the correct input. Note how this step automatically displays Previous and Next buttons.

Finally, design the "Confirmation" wizard step as shown in Figure 8:

Figure 8: Designing Confirmation WizardStep

The Confirmation wizard step simply displays all the pieces of information entered on the previous steps as a confirmation. Note that, because this is the last step of the wizard, the Finish button is displayed instead of the Next button.

The following is the complete markup for your 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>

The Web Form Wizardry of ASP.NET 2.0's Wizard Control

Wizard Control Events

To make some use of the information captured via the wizard, you need to handle some of the Wizard control's events. The Wizard control has several useful events. The following table lists some of the important ones:

Event Name Description
ActiveStepChanged Raised when the currently displayed step of the Wizard control changes.
CancelButtonClick Raised when the Cancel button of the wizard step is clicked.
FinishButtonClick Raised when the Finish button of the wizard step is clicked.
NextButtonClick Raised when the Next button of the Wizard is clicked.
PreviousButtonClick Raised when the Previous button of the Wizard is clicked.
SideBarButtonClick Raised when any of the side bar link buttons of the Wizard are clicked.

In this example, you 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, this event grabs all the values entered in the "Account Details" and "Contact Information" steps. First of all, it checks the ID property of the ActiveStep property. (Remember that you set the ID property of the Confirmation step to step3.) It accesses the controls from the wizard step by using the FindControl() method, which 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; therefore, it type casts 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, you simply display a success message in a Label control and hide the Wizard control. Most real-world cases will have some code that stores the values into the database.

Run the Web form to 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 the Previous button, the validation is not performed. If you click on any side bar links, the validation is always triggered.

That's it! Your user registration wizard is ready.

Author Note: This article uses the user registration wizard as a common example to teach the Wizard control. ASP.NET 2.0 provides a specialized form of the Wizard control called CreateUserWizard, which works along with membership features.

The Wizard Control

The Wizard control introduced in ASP.NET 2.0 makes creating Wizard-driven Web forms easy. It consists of several WizardSteps, and each step contains a set of controls. The functionality of navigating between the wizard steps is automatically provided by the Wizard control. By using various events of the Wizard control, you can tap the step navigation and wizard completion.

About the Author

Bipin Joshi is the founder and owner of BinaryIntellect Consulting, where he conducts professional training programs on .NET technologies. He is the author of Developer's Guide to ASP.NET 2.0 and co-author of three WROX press books on .NET 1.x. He also is a Microsoft MVP, member of ASPInsiders, MCAD, and MCT.



About the Author

Bipin Joshi

Bipin Joshi is a blogger and writes about apparently unrelated topics - Yoga & technology! A former Software Consultant by profession, Bipin has been programming since 1995 and has been working with the .NET framework ever since its inception. He has authored or co-authored half a dozen books and numerous articles on .NET technologies. He has also penned a few books on Yoga. He was a well known technology author, trainer and an active member of Microsoft developer community before he decided to take a backseat from the mainstream IT circle and dedicate himself completely to spiritual path. Having embraced Yoga way of life he now codes for fun and writes on his blogs. He can also be reached there.

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: October 29, 2014 @ 11:00 a.m. ET / 8:00 a.m. PT Are you interested in building a cognitive application using the power of IBM Watson? Need a platform that provides speed and ease for rapidly deploying this application? Join Chris Madison, Watson Solution Architect, as he walks through the process of building a Watson powered application on IBM Bluemix. Chris will talk about the new Watson Services just released on IBM bluemix, but more importantly he will do a step by step cognitive …

  • QA teams don't have time to test everything yet they can't afford to ship buggy code. Learn how Coverity can help organizations shrink their testing cycles and reduce regression risk by focusing their manual and automated testing based on the impact of change.

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds