Click here to Skip to main content
Click here to Skip to main content

ASP.NET 2.0 Wizard Control

, 9 Oct 2006
Rate this:
Please Sign up or sign in to vote.
ASP.NET 2.0 Wizard Control

Introduction

Wizard control is newly added in ASP.NET 2.0. This control enables us to create an wizard based interface for a user. Typically a wizard interface will be used when we require a user to input a lot of data. Wizard enables us to take the data from the user a series of multiple steps. An another alternative to wizard based interface is using the tab interface but unlike the tab interface the wizard allows us only an serial navigation between steps i.e. In a tabbed interface a user can jump between tabs (if not controlled) but in a wizard the user can go either to the previous or the next step.

The control provided by ASP.NET 2.0 simulates the wizard completely. It provides us with a start, interim and finish templates. Each step in the wizard can inherit from one of these templates. Let us create an email registration wizard which will allow us to take data from the user in multiple steps.

Email Registration Application

Let us create a small web application which will allow is to take input from the user using the wizard control.

1. Open a new web site project as shown below.

1s.jpg

2. Add a wizard control to the project from the toolbox and name it as EmailRegWizard. By default you will notice there are 2 steps in the wizard.

2s.jpg

3.Increase the size of the wizard control as shown below. We will now add 3 more steps to the wizard control. To add steps to the wizard control let us select the wizard control, right click and select Add\Remove Wizard Steps.

3s.jpg

4. WizardStep Collection Editor will be launched. Click on Add and select WizardStep. (If you click on add directly a wizard will be added).Add 2 more steps to the wizard control as shown below. Totally you should have 5 steps in the wizard as shown below.

4s.jpg 5s.jpg

5.Let us now rename each step of the wizard control depending on the activity that we are going to perform in that step.

In the first step we will take the basic user information,the second step wll address details for email, third step will address the details for forgot password, in the fourth step we will ask users about their interests and 5th is the final step in which the user will have to accept the various terms and conditions. Now let us rename each of these steps as follows (as shown below):

Step 1 -- User Info
Step 2 -- Email Details
Step 3 -- Forgot Password
Step 4 -- Interests
Step 5 -- Terms&Conditions

6s.jpg

6. For the first step let us set the StepType to "Start" and for the last step let us set the step type to "Finish". After setting the step type click on "OK".

7.JPG
8.JPG

7. now let us add some controls for each step. For the first step we will add the basic user details like firstname, lastname. Gender, State, PinCode ,Alternate Email Address. Please refer to the below image and code.

9s.jpg
<asp:WizardStep runat="server" StepType="Start" Title="User Info">
<table cellpadding=0 cellspacing=0 width="100%">
 <tr>
     <td>
       First Name: 
     </td>
     <td>
       <asp:TextBox ID="FirstName" runat="server"></asp:TextBox>
     </td>
     <td>
       Last Name: 
     </td>
     <td>
        <asp:TextBox ID="LastName" runat="server"></asp:TextBox>
     </td>                            
 </tr>
 <tr>
     <td>
       Gender: 
     </td>
     <td>
       <asp:DropDownList ID="Gender" runat="server">
         <asp:ListItem>Male</asp:ListItem>
         <asp:ListItem>Female</asp:ListItem>
       </asp:DropDownList>
     </td>
 </tr>                        
 <tr>
     <td>
       State:
     </td>
     <td>
      <asp:DropDownList ID="State" runat="server">
        <asp:ListItem>Andaman and Nicobar Islands</asp:ListItem>
        <asp:ListItem>Andhra Pradesh</asp:ListItem>
        <asp:ListItem>Arunachal Pradesh</asp:ListItem>
        <asp:ListItem>Assam</asp:ListItem>
        <asp:ListItem>Bihar</asp:ListItem>
        <asp:ListItem>Chandigarh</asp:ListItem>
        <asp:ListItem>Chattisgarh</asp:ListItem>
        <asp:ListItem>Dadra and Nagar Haveli</asp:ListItem>
        <asp:ListItem>Daman and Diu</asp:ListItem>
        <asp:ListItem>Delhi</asp:ListItem>
        <asp:ListItem>Goa</asp:ListItem>
        <asp:ListItem>Gujarat</asp:ListItem>
        <asp:ListItem>Haryana</asp:ListItem>
        <asp:ListItem>Himachal Pradesh</asp:ListItem>
        <asp:ListItem>Jammu and Kashmir</asp:ListItem>
        <asp:ListItem>Jharkhand</asp:ListItem>
        <asp:ListItem>Karnataka</asp:ListItem>
        <asp:ListItem>Kerala</asp:ListItem>
        <asp:ListItem>Lakshadweep</asp:ListItem>
        <asp:ListItem>Madhya Pradesh</asp:ListItem>
        <asp:ListItem>Maharashtra</asp:ListItem>
        <asp:ListItem>Manipur</asp:ListItem>
        <asp:ListItem>Meghalaya</asp:ListItem>
        <asp:ListItem>Mizoram</asp:ListItem>
        <asp:ListItem>Nagaland</asp:ListItem>
        <asp:ListItem>Orissa</asp:ListItem>
        <asp:ListItem>Pondicherry</asp:ListItem>
        <asp:ListItem>Punjab</asp:ListItem>
        <asp:ListItem>Rajasthan</asp:ListItem>
        <asp:ListItem>Sikkim</asp:ListItem>
        <asp:ListItem>Tamil Nadu</asp:ListItem>
        <asp:ListItem>Tripura</asp:ListItem>
        <asp:ListItem>Uttarakhand</asp:ListItem>
        <asp:ListItem>Uttaranchal</asp:ListItem>
        <asp:ListItem>Uttar Pradesh</asp:ListItem>
        <asp:ListItem>West Bengal</asp:ListItem>
      </asp:DropDownList>                                
    </td>
 </tr>
 <tr>
     <td>
       Pin Code: 
     </td>
     <td>
       <asp:TextBox ID="PinCode" runat="server"></asp:TextBox>
     </td>
 </tr>
  <tr>
     <td>
        Alternate Email: 
     </td>
     <td>
       <asp:TextBox ID="AltEmail" runat="server"></asp:TextBox>
     </td>
 </tr>
</table>  
</asp:WizardStep>

After adding the user info we will take the email details like Email Address, Password, and Confirm Password.

<asp:WizardStep runat="server" Title="Email Details">
<table>
 <tr>
     <td>
       Login Name: 
     </td>
     <td>
        <asp:TextBox ID="LoginName" runat="server"></asp:TextBox>
     </td>                        
 </tr>
 <tr>
     <td>
         Password: 
     </td>
     <td>
         <asp:TextBox ID="Password" runat="server" TextMode="Password">
</asp:TextBox>
     </td>                      
 </tr>
 <tr>
     <td>
        Confirm Password: 
     </td>
     <td>
        <asp:TextBox ID="ConfirmPassword" runat="server" TextMode="Password">
        </asp:TextBox> 
     </td>
 </tr>
</table> 
</asp:WizardStep>
10s.jpg

Similarly we will add controls for the last three steps.

Step 3

<asp:WizardStep runat="server" Title="Forgot Password">
<table cellpadding=0 cellspacing=0 width="100%">
 <tr>
     <td>
       Hint Question: 
     </td>
     <td>
       <asp:DropDownList ID="HintQuestion" runat="server">
        <asp:ListItem>What is the name of your first school?</asp:ListItem>
        <asp:ListItem>What is your favourite pass-time?</asp:ListItem>
        <asp:ListItem>What is your mother's maiden name?</asp:ListItem>
        <asp:ListItem>What is your favourite food?</asp:ListItem>
        <asp:ListItem>What is your exact time of birth?</asp:ListItem>
       </asp:DropDownList>
     </td>
 </tr>
 <tr>
     <td>
      Hint Answer: 
     </td>
     <td>
       <asp:TextBox ID="HintAnswer" runat="server" TextMode="Password"></asp:TextBox>
     </td>
 </tr>        
</table>
</asp:WizardStep>
11s.jpg

Step 4

<asp:WizardStep runat="server" Title="Interests">
    <table cellpadding=0 cellspacing=0 width="100%">
 <tr>
     <td>
  <asp:CheckBox ID="News" runat="server" Text="News"/>
     </td>
     <td>
  <asp:CheckBox ID="HnF" runat="server" Text="Home &amp; Family"/>
     </td>
     <td>
  <asp:CheckBox ID="HnN" runat="server" Text="Health &amp; Nutrition"/>
     </td>
     <td>
  <asp:CheckBox ID="Auto" runat="server" Text="Automobiles"/>
     </td>                            
 </tr>
 <tr>
     <td>
  <asp:CheckBox ID="Education" runat="server" Text="Education"/>
     </td>
     <td>
  <asp:CheckBox ID="Loand" runat="server" Text="Loans"/>
     </td>
     <td>
  <asp:CheckBox ID="Travel" runat="server" Text="Travel"/>
     </td>
     <td>
  <asp:CheckBox ID="Computers" runat="server" Text="Computers"/>
     </td>                            
 </tr>                        
 <tr>
     <td>
  <asp:CheckBox ID="Shopping" runat="server" Text="Shopping"/>
     </td>
     <td>
  <asp:CheckBox ID="Insurance" runat="server" Text="Insurance"/>
     </td>
     <td>
  <asp:CheckBox ID="Beauty" runat="server" Text="Beauty "/>
     </td>
     <td>
  <asp:CheckBox ID="Fashion" runat="server" Text="Fashion"/>
     </td>                            
 </tr>
 <tr>
     <td>
  <asp:CheckBox ID="Sports" runat="server" Text="Sports "/>
     </td>
     <td>
  <asp:CheckBox ID="OnlineGames" runat="server" Text="Online Gaming"/>
     </td>
     <td>
  <asp:CheckBox ID="SpecialOffers" runat="server" Text="Special Offers"/>
     </td>
     <td>
  <asp:CheckBox ID="Family" runat="server" Text="Family"/>
     </td>                            
 </tr>
    </table>
</asp:WizardStep>

Step 5

<asp:WizardStep runat="server" StepType="Finish" Title="Terms&amp;Conditions">
    <table>
 <tr>
     <td style="height: 294px">
  <asp:TextBox ID="TermsAndConditions" runat="server" TextMode="MultiLine" 
  Height="323px" Width="337px" Text="Terms &amp; Conditions" Font-Bold="True" 
  Font-Names="Impact" Font-Size="XX-Large"></asp:TextBox> 
     </td>
 </tr>                
    </table>
</asp:WizardStep>
13s.jpg

After creating the wizard steps, let us now load the page and execute all the steps of the wizard. You should be able to use the wizard control without any code. Now let us add a few validators for FirstName and Gender on the first step and for login name on the second step.

<asp:RequiredFieldValidator ID="FirstNameVal" runat="server" ErrorMessage="!" 
ControlToValidate="FirstName"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="GenderVal" runat="server" ErrorMessage="!" 

ControlToValidate="Gender"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="LoginVal" runat="server" ErrorMessage="!" 

ControlToValidate="LoginName"></asp:RequiredFieldValidator>

I have added validators for the first and second step only you can add them for all the steps. On execution you will notice that if the first name is not keyed in and the Gender is not selected on clicking the next button the wizard does not move forward. The same behaviour is repeated if we click on "Next" without entering the LoginName. But the validators don't fire if we click the "Previous" Button.

Similarly we can fill all the details of email registration. After filling in all the details and clicking on the "Finish" button in the last step. We must display a success message after saving the data successfully. Let us assume that we have saved out data in the DB and the registration was successful. Hence clicking on "Finish" we will redirect the user to the "Message.aspx". Wizard control has a lot of events like:

  • ActiveStepChanged
  • CancelButtonClick
  • FinishButtonClick
  • NextButtonClick
  • PreviousButtonClick
  • SideBarButtonClick

Let us trap the FinishButtonClick event and redirect to Message.aspx. Let us add an another page called Message.aspx to the project. The startup page of the project should be Default.aspx. In the Message.aspx we will add the below code:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Message:  System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        TextMessage.Text = Convert.ToString(this.Request.QueryString["FirstName"]) 
+ " has been successfully registered." ;
    }
}

In the Default.aspx we will add the below code for the FinishButtonClick event

    protected void EmailRegWizard_FinishButtonClick(
        object sender, WizardNavigationEventArgs e)
    {
        Response.Redirect("Message.aspx?FirstName=" + ((TextBox) 

EmailRegWizard.WizardSteps[0].FindControl("FirstName")).Text);   
    }

Let us execute on running the application. You should be redirected to Message.aspx on clicking the Finish Button.

Conclusion

We saw how to use the wizard control provided by ASP.NET 2.0. This is just one of the examples which I have taken here. We can use the wizard control on most of our pages where we need to use tabs. Wizard is easy to use compared to the IE web controls. I hope this article has been useful to you. Please post your comments over here and rate this article. Thanks for your time.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Namratha Shah
Architect
United States United States
Namratha Shah a.k.a. Nasha is from orginally from Bombay, India but currently residing NJ, USA. She has to her credit, a Bachelor’s Degree in Microbiology and Biotechnology and a Master's in Computer and Software Applications (1999-2001) from Somaiya College Bombay. She started her career with C and C++ and then moved on to Microsoft Technologies. She has over 7.5 years experience in software architecture, design and development. She is a Certified Scrum Master and a member of the CORE .NET Architecture team. She has been Awarded with Microsoft’s Prestigious Most Valuable Professional (MVP) twice consecutively in years 2005 and 2006 in Visual C#.NET for her outstanding contributions to the .NET community.

Comments and Discussions

 
GeneralWhy can't convert .net 3.5 PinmemberTheingi Win31-Jan-11 14:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 10 Oct 2006
Article Copyright 2006 by Namratha Shah
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid