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.
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.
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.
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.
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
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. 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.
<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>
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>
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 & Family"/>
</td>
<td>
<asp:CheckBox ID="HnN" runat="server" Text="Health & 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&Conditions">
<table>
<tr>
<td style="height: 294px">
<asp:TextBox ID="TermsAndConditions" runat="server" TextMode="MultiLine"
Height="323px" Width="337px" Text="Terms & Conditions" Font-Bold="True"
Font-Names="Impact" Font-Size="XX-Large"></asp:TextBox>
</td>
</tr>
</table>
</asp:WizardStep>
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.
