Click here to Skip to main content
14,331,896 members

A little wizard that helps with multistep forms

Rate this:
4.14 (5 votes)
Please Sign up or sign in to vote.
4.14 (5 votes)
5 Feb 2007
Design a multistep form could be strenuous. But now with ASP .NET 2.0 Wizard control, it is fun and easy.


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.

Image 1

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.

Image 2
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">
            <div style="height:200px">
                <table><tr><td>Meeting Subject</td><td>
                         <asp:textbox runat="server" id="Subject" />
                    <asp:requiredfieldvalidator runat="server" 
                        errormessage="Please enter a subject for the meeting" 
                        controltovalidate="Subject" />
                   <!-- More controls go here  --->
                <asp:validationsummary runat="server" 
                    displaymode="List" id="Summary" />                
        <asp:wizardstep ID="Wizardstep2" runat="server" 
                title="Reserve a conference room">
            <div style="height:200px">
            <!-- 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.

'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

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

    End Sub 

A completion step

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

AutoDefault steptype. Automatically set the step sequence, 1, 2, 3 ...
StartStart step that does not have a Previous button.
StepA step in the middle that has Previous and Next buttons.
FinishFinal step that has Previous and Finish buttons.
CompleteSummary step that does not has any buttons, often used to insert data in the database and display any final statements, thank-you notes, etc.

(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
        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:

      <div style="height:300;padding:0;margin:0">
         <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"
            borderstyle="Solid" backcolor="#FFFBFF" 
            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"  
            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.

Image 3

Figure 3: A Wizard control's AutoFormat Dialog


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Xun Ding
United States United States
A web developer who swims in the stream of ideas, fight it, enjoy it, and thrive. Hopefully!

Comments and Discussions

Generalmultistep form code Pin
matt12345sff12-Mar-09 12:32
membermatt12345sff12-Mar-09 12:32 
GeneralLink is broken Pin
Claudio Barca5-Feb-07 2:10
memberClaudio Barca5-Feb-07 2:10 
GeneralRe: Link is broken Pin
Xun Ding5-Feb-07 6:41
memberXun Ding5-Feb-07 6:41 
GeneralRe: Link is broken Pin
Xun Ding5-Feb-07 6:58
memberXun Ding5-Feb-07 6:58 
GeneralLink is broken Pin
ednrgc17-Jan-07 8:57
memberednrgc17-Jan-07 8:57 

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

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

Posted 29 Nov 2006


34 bookmarked