A little wizard that helps with multistep forms

• Download demo project - 25 Kb

Introduction

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">
<wizardsteps>
        <asp:wizardstep ID="Wizardstep1" runat="server" 
                title="Meeting Name and Time">
            <div style="height:200px">
                <table><tr><td>Meeting Subject</td><td>
                         <asp:textbox runat="server" id="Subject" />
                    <asp:requiredfieldvalidator runat="server" 
                        id="SubjectValidator"
                        text="*"
                        errormessage="Please enter a subject for the meeting" 
                        setfocusonerror="True" 
                        controltovalidate="Subject" />
                    </td></tr>
                </td></tr>
                   <!-- More controls go here  --->
                </table>
                <asp:validationsummary runat="server" 
                    displaymode="List" id="Summary" />                
                
           </div>
        </asp:wizardstep>
        <asp:wizardstep ID="Wizardstep2" runat="server" 
                title="Reserve a conference room">
            <div style="height:200px">
            <!-- Web controls go here  --->
            </div>
        </asp:wizardstep>
    <!-- More WizardSteps  --->
  </wizardsteps>
  </asp:wizard>

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.

'When a concel button is clicked, go back to the first step 
and clean all fields
    Protected Sub MyWizard_CancelButtonClick
    (ByVal sender As Object, ByVal e As System.EventArgs) 
    Handles MyWizard.CancelButtonClick
        'go back to step 1
        MyWizard.ActiveStepIndex = 0

        'clean all data
        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
        Next

        Organizer.Text = ""
        Title.Text = ""

    End Sub 

A completion step

Of the WizardSteps, there are five Step Types (Table 1).

(Table 1)

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) 
 Handles MyWizard.FinishButtonClick
  FinalMsg.Text = "You have successfully scheduled an meeting" & _
                 "A conference room has been reserved upon your request!"
        '...Other code goes here

  End Sub

Wizard's Events

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 no need to reserve a room then skip step 2
        If RoomReserve.SelectedIndex = 1 Then
            MyWizard.ActiveStepIndex = 2
            'in case a user use the sidebar link to reserve a room
            AvailableRoom.Enabled = False
            Equipments.Enabled = False
        Else
            MyWizard.ActiveStepIndex = 1
            AvailableRoom.Enabled = True
            Equipments.Enabled = True
        End If

    End Sub

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:

  <sidebartemplate>
        <div style="height:300;padding:0;margin:0">
           <img src="images/meeting.gif" border=0 />
            <asp:datalist runat="Server" id="SideBarList">
                <ItemTemplate>
                    <asp:linkbutton runat="server" id="SideBarButton"/>
                 </ItemTemplate>
                 <SelectedItemStyle Font-Bold=true />
            </asp:datalist> 
            </div>
        </sidebartemplate>

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"
            borderstyle="Solid" backcolor="#FFFBFF" 
            BorderColor="#CCCCCC" 
            Font-Names="Verdana" Font-Size="0.8em" 
            ForeColor="#284775" /> 
<headerstyle horizontalalign="Left" font-bold="True" 
            font-size="0.9em" BackColor="#5D7B9D" 
            BorderStyle="Solid" ForeColor="White" /> 
<sidebarstyle backcolor="LightYellow"  
            Font-Size="0.9em" 
            VerticalAlign="Top" BorderWidth="0px"  />
<SideBarButtonStyle Font-Names="Verdana" 
           ForeColor="White" 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