Web interactions are all about give and take. You take users' information, comments, credit card info, etc., then you offer your service, feedback, products, blah, blah. In the course of your programming life, chances are good that you have developed many web forms, long ones, short ones, multiple forms broken down in categories and executed in stages. In the pre-ASP.NET 2.0 days, you work out every single details yourself, design the flow, lay out the forms, anticipate users' every move, and code for every event that might fire. You do this tirelessly and repeatedly. But then here comes a new nifty ASP .NET 2.0 control called Wizard, and it can help you to accomplish a multistep-form with just a few lines of code and a little simple drag-and-drop, point-and-click.
What is a Wizard Control in ASP .NET 2.0?
There are a few articles about the little Wizard. I found this one especially good. In essence, an ASP .NET 2.0 Wizard control enables you to design a set of forms that needs to be processed sequentially. But a Wizard is also flexible enough for users to skip or backtrack certain steps. While each step appears to be a stand alone page, all steps are actually on the same page. A wizard control has three major components, a sidebar on the left side, providing links to each step; a content view that contains any number of form controls for users' input; a navigation bar with buttons such as previous, next, finish for users to navigate to and fro. Figure 1 is a screen shot of a Wizard control.
Figure 1: Schedule a Meeting Application using Wizard control
How to use the Wizard?
In the following, I will present a simple "Schedule-a-meeting" application to illustrate how to use a Wizard control.
How to add or remove buttons?
A wizard control can be dragged and dropped to your design form. To add or remove steps, use the Add/Remove WizardSteps command to bring up the WizardStep Collection Editor, as shown in Figure 2. You can also adjust the sequence of the wizardsteps.
Figure 2: The WizardStep Collection Editor.
The aspx code for my Wizard control:
<asp:wizard runat="server" id="MyWizard" ActiveStepIndex="0">
<asp:wizardstep ID="Wizardstep1" runat="server"
title="Meeting Name and Time">
<asp:textbox runat="server" id="Subject" />
errormessage="Please enter a subject for the meeting"
<!-- More controls go here --->
displaymode="List" id="Summary" />
<asp:wizardstep ID="Wizardstep2" runat="server"
title="Reserve a conference room">
<!-- Web controls go here --->
<!-- More WizardSteps --->
As you can see, all wizardsteps are wrapped up inside the wizardsteps tag, which in turn is located within the <asp:wizard>tag. And you can directly add form elements to each wizardstep. Once the wizard is set up, a left sidebar menu and navigation features are set up too and will be displayed by default. However, you may choose to hide the sidebar by setting the DisplaySideBar property to False.
Wizard's cancel button
You can enable and display a Cancel button to each step by setting the DisplayCancelButton property to True, but then you need a procedure to do something when the CancleButtonClick event is triggered. The following is the VB .NET code to handle the event in my application.
and clean all fields
Protected Sub MyWizard_CancelButtonClick
(ByVal sender As Object, ByVal e As System.EventArgs)
MyWizard.ActiveStepIndex = 0
Subject.Text = ""
MeetingDate.Text = ""
MeetingTime.Text = ""
RoomReserve.SelectedIndex = 0
AvailableRoom.SelectedIndex = 0
Dim i As Integer
For i = 0 To Equipments.Items.Count - 1
Equipments.Items(i).Selected = False
Organizer.Text = ""
Title.Text = ""
A completion step
Of the WizardSteps, there are five Step Types (Table 1).
|Auto||Default steptype. Automatically set the step sequence, 1, 2, 3 ...|
|Start||Start step that does not have a Previous button.|
|Step||A step in the middle that has Previous and Next buttons.|
|Finish||Final step that has Previous and Finish buttons.|
|Complete||Summary step that does not has any buttons, often used to insert data in the database and display any final statements, thank-you notes, etc.|
A completion step is only activated when a user clicks on the Finish button in the last step. You also need to write a procedure to handle the FinishButtonClick event, as the following:
Protected Sub MyWizard_FinishButtonClick
(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs)
FinalMsg.Text = "You have successfully scheduled an meeting" & _
"A conference room has been reserved upon your request!"
As above I have talked about the CancelButtonClick and FinishButtonClick events, however, the Wizard control has more events, such as ActiveStepChanged, NextButtonClick, Previousclick, SidebarButtonClick events, for you to control the functions and event flow. Very frequently, it is necessary to skip one or two steps because of a particular response to a certain question. For example, in the Meeting Schedule application, if a user does not need to reserve a room, the wizard should jump across the room-reservation step and directly to the next step. The following is the code to accomplish just this:
Private Sub skipStep2()
If RoomReserve.SelectedIndex = 1 Then
MyWizard.ActiveStepIndex = 2
AvailableRoom.Enabled = False
Equipments.Enabled = False
MyWizard.ActiveStepIndex = 1
AvailableRoom.Enabled = True
Equipments.Enabled = True
Wizard's templates and styles
All web controls can be customized, appearance-wise or function-wise. You can take this for granted. You can use templates and styles to customize the controls and formatting. There are a few templates for a Wizard: HeaderTemplate, StartNavigationTemplate, StepNavigationTemplate, FinishNavigationTemplate and SidebarTemplate. You can use any of the templates to beautify your header, sidebar, anything and everything.
The following is the Aspx code for a SidebarTemplate:
<img src="images/meeting.gif" border=0 />
<asp:datalist runat="Server" id="SideBarList">
<asp:linkbutton runat="server" id="SideBarButton"/>
<SelectedItemStyle Font-Bold=true />
If you use SidebarTemplate, you must use a Datalist for the links and specify an ItemTemplate for it.
You can also tweak HeaderStyle, SidebarStyle, SidebarButtonStyle, etc., to change the looks of the wizard, as in the following code:
<navigationbuttonstyle borderwidth="1px" width="80px"
<headerstyle horizontalalign="Left" font-bold="True"
BorderStyle="Solid" ForeColor="White" />
VerticalAlign="Top" BorderWidth="0px" />
You can also apply themes to give your Wizard page a speedy makeup. As with many controls of ASP .NET 2.0, you may use the built-in format for the Wizard. To do so, right click on the Wizard, and choose AutoFormat command. This will bring the AutoFormat dialog as in Figure 3.
Figure 3: A Wizard control's AutoFormat Dialog