ControlFreak
LANGUAGES:VB.NET | C#
ASP.NETVERSIONS: 2.x
A Guide to the ASP.NET 2.0 Wizard Control
Simplify the Process of Gathering Information from Users
By Steve C. Orr
Creating a wizard in ASP.NET 1.x had the potential to be abit tricky. The first thought would likely be to put each wizard step on itsown page. However, this has many drawbacks, such as code (and user interface)duplication and maintaining state between each page. Therefore, most Webdevelopers tended to lean toward keeping each wizard step in its own panelwithin a single page. Each panel is shown and hidden in succession, with onlythe panel representing the current step being visible at any one time. Becausethe page posts back to itself between each step, all data is kept in ViewStateautomatically by ASP.NET, negating the need to manually store user-enteredvalues between each wizard step.
Of course, this technique had some downsides, too, such asneeding to manage all those different panels at design time. Although notdifficult, it certainly makes the design-time appearance of a page muchdifferent than the run-time appearance, as all the panels are visible at onceat design time. It also required managing many redundant Back and Next buttonsfor each step of the wizard.
Because this technique usually turned out to be the bestway to create wizards (despite its potentially hefty ViewState consumption forlarge wizards), the ASP.NET 2.0 team decided to polish up the process bycreating a control that automates and simplifies this style of wizard creation.The ASP.NET 2.0 Wizard control shown in Figure 1 is the result.
Figure 1: The powerful Wizardcontrol is a quick and easy way to put together a user-friendly data collectionsystem.
The Wizard control is extremely flexible and configurable.For example, the Wizard control has more than 200 properties that can be set atdesign time! In addition, the Auto Format dialog box shown in Figure 2 is a quickway to beautify an otherwise boring wizard.
Figure 2: The Wizard control is highlyconfigurable, including this Auto Format dialog box that can beautify itsoutput in a snap.
Wizard Sections
Figure 3 shows the four main areas of the Wizard controlthat are ripe for customization. The header area (shown at the top of thecontrol) is invisible by default ? unless (and until) the HeaderText propertyis set. The header text stays statically displayed on every step of the wizard,although there are options for manually changing it via code from step to stepin case you have the need. The HeaderStyle can be changed in the propertieswindow (or via HTML view) to adjust colors, fonts, alignment, etc.
Figure 3: These are the four primaryareas of the Wizard control that can be customized.
The Sidebar area (shown in green at the left side ofFigure 3) is normally managed entirely by the Wizard control. It contains ahyperlink list of the Wizard steps so users can jump around freely. If thisbehavior is not desired, the DisplaySideBar property can be set to False, orthe area can be changed to a template (via a right-click menu) so the developercan take more manual control of the area. The SideBarStyle property group canbe used to change colors, fonts, and other cosmetic aspects of the sidebar.
The Navigation area (shown in grey at the bottom of Figure3) contains the Back and Next buttons that users have come to expect fromwizards. Each button click causes the Web form to be posted back to the serverso the information can be saved to ViewState and the next wizard step can bedisplayed. (Tip: To avoid ugly postbacks, the Wizard control works great insidethe UpdatePanel control from the ASP.NET 2.0 AJAX Extensions, formerlycodenamed Atlas.) The text of these buttons can be configured via theStepNextButtonText and StepPreviousButtonText properties. Additionally, thebuttons can be configured to display as hyperlinks or custom images instead ofbuttons by means of the StepNextButtonType and StepPreviousButtonTypeproperties. A Cancel button can also be optionally displayed by setting the DisplayCancelButtonproperty to True. When the user clicks the Cancel button, they areautomatically taken to the URL contained in the CancelDestinationPageUrlproperty. By default, the Back button is not displayed on the first step of thewizard, and the Next button is not displayed on the final step of the wizard,although these details of the wizard steps can be configured in the WizardStep CollectionEditor (shown in Figure 4).
Figure 4: The WizardStep CollectionEditor can be used to add and configure properties for each step of a wizard.
The Step area is the main content section that containsthe custom content for the wizard. After dragging the Wizard control onto aWebForm in an ASP.NET Web application, you can immediately start customizing itby adding standard ASP.NET controls into the Step area. This area acts a lotlike a panel, allowing controls to be dragged and dropped from the VisualStudio toolbox. By default, this is the only area of the Wizard control ontowhich controls may be dropped. However, if you have the need to customize otherareas of the control, this can easily be done by converting one or more controlparts to a template via the smart tag menu shown in Figure 1.
Dragging the controls into the Step area is simple enoughfor Step 1 of the wizard because it is the one step that?s visible by defaultat design time. But what about for the following steps? You can adjust whichstep is currently visible (and editable) at design time via the Step dropdownlist in the Wizard?s smart tag menu (again, see Figure 1). When you run theproject, the step you were last editing in the designer will be the first stepto appear at run time. Although this feature is a nice time saver duringdevelopment, it necessitates resetting the designer to Step 1 before deployment;otherwise, the users could end up starting on the wrong step.
To add more steps (beyond the default two steps), clickthe associated link in the smart tag menu (or click the associated WizardStepsellipsis button in the Properties window) to bring up the WizardStep CollectionEditor shown in Figure 4. In this dialog box the title can be set that appearsfor each wizard step. There you can also specify whether the user is allowed toreturn to that wizard step after completing it.
The StepType property can also be set from the WizardStepCollection Editor. By default, the StepType property is set to Auto, whichshould be suitable for most situations as it automatically determines whichbuttons should be visible based on the step?s position in the list. However, totake more manual control you could choose one of the StepType?s otherenumerations, such as Start (which causes the Back button to be suppressed) orFinish (which causes only the Back and Finish buttons to be displayed). The CompleteStepType enumeration setting hides the sidebar and navigation buttons, leavinga completely blank space ready for customization.
HTML View
In addition to the drag and drop simplicity of the VisualStudio designer, HTML view also provides an interesting way to examine andconfigure the contents of the Wizard control. Everything that can be configuredin design view can also be configured via HTML view, although the syntax can berather complex, as demonstrated by the basic two-step wizard shown in Figure 5.
<asp:Wizard ID="Wizard1" runat="server"ActiveStepIndex="0"
BackColor="#E6E2D8" BorderColor="#999999"
BorderStyle="Solid" Height="251px"Width="357px">
<StepStyle BackColor="#F7F6F3"BorderColor="#E6E2D8"
BorderStyle="Solid" BorderWidth="2px" />
<SideBarStyle BackColor="#1C5E55"Font-Size="0.9em"
VerticalAlign="Top" />
<NavigationButtonStyle BackColor="White"
BorderWidth="1px" Font-Names="Verdana"Font-Size="0.8em"/>
<WizardSteps>
<asp:WizardSteprunat="server" Title="Step 1">
Step 1!
</asp:WizardStep>
<asp:WizardSteprunat="server" Title="Step 2">
Step 2!
</asp:WizardStep>
</WizardSteps>
<SideBarButtonStyle ForeColor="White" />
<HeaderStyle BackColor="#666666"BorderColor="#E6E2D8"
BorderStyle="Solid" BorderWidth="2px"Font-Bold="True"
Font-Size="0.9em" ForeColor="White"
HorizontalAlign="Center" />
</asp:Wizard>
Figure 5: TheWizard control can be manipulated in HTML view, although the syntax can getrather complex, even for a basic example such as this.
As you can see, the styles for each section can beconfigured via HTML view, and each individual wizard step can also beindependently configured.
Wizard Events
It?s convenient when wizards can be nice and simple,allowing users to jump arbitrarily between steps as they please. However, inreality, business rules often dictate that a wizard must be more complex thanthat. Sometimes the next wizard step must be chosen based on the selection auser made in previous wizard steps. In some cases, perhaps Step 6 should beskipped because of a selection the user made in Step 4, or perhaps the contentsof Step 7 must be modified based on a selection the user made in Step 3. Luckily,the Wizard control is flexible enough to support such scenarios ? if you?re notafraid to get your hands dirty with a little code.
The ActiveStepChanged event is convenient for interceptingtransitions between wizard steps so intelligent decisions can be made based onstate. For example, from within this event the wizard?s ActiveStep property canbe changed programmatically at your whim, or controls can be shown or hidden asrequired. Additionally, the GetHistory method of the Wizard control can becalled to retrieve a history of the steps the user has visited. This can bequite useful for ensuring users have visited prerequisite steps.
For more granular control over step transition you mightchoose to handle the NextButtonClick or PreviousButtonClick events. Theseevents have parameters such as CurrentStepIndex, NextStepIndex, andPreviousStepIndex, which help to determine where the user is going and wherethey have been. Similarly, the SideBarButtonClick event can be valuable forintercepting the user?s attempt to skip to non-contiguous steps.
Alternatively, the FinishButtonClick event could be usedfor validating that the user has correctly completed steps, for displayingfinal instructions, and/or redirecting the user to a new page. It can also be agreat place to store the user?s finalized input into a database. Finally, theCancelButtonClick event can be a handy way to manage the user?s desire tocancel out of a wizard.
Validation
While the above events can be great places to injectcomplex validation code, more often ASP.NET?s built-in validation controls aresufficient. Thankfully, they interact quite well with the Wizard control. Figure6 shows how the Wizard control can automatically enforce validation with zerolines of code in conjunction with the ASP.NET validation controls.
Figure 6: ASP.NET?s validationcontrols play well with the Wizard control, making it a snap to ensure usershave entered quality data.
In this case each of the two textboxes have validationcontrols associated with them. The Name textbox has a RequiredFieldValidatorcontrol associated with it to ensure the user cannot advance to the next stepuntil a value has been entered. The Email textbox has an associatedRegularExpressionValidator control ensuring that only syntactically valid e-mailaddresses are entered. The error messages (shown in red) do not appear unlessthe user tries to leave that wizard step while invalid data is present.
For more information about the ASP.NET validationcontrols, see Validate User-entered Data.
Conclusion
Wizards have been a common user interface theme for years,and they?ve stood the test of time as a useful and user-friendly inputmechanism. Although they could be implemented in ASP.NET 1.x, it was not atrivial task. State management and user interface reusability presentedchallenges that tended to make a developer think twice before embarking on sucha course.
When the ASP.NET 2.0 Wizard control came along, it vastlysimplified the entire process. Developers no longer have to deal with awkwardtasks such as juggling panels at design time and run time, managing Back and Nextbuttons, storing data between wizard steps, or any of the other littleheadaches of the past. The simplicity and reusability of the Wizard control isappealing and provides a quick and familiar way to collect data from users.
Steve C. Orr is anMCSD and a Microsoft MVP in ASP.NET. He?s been developing software solutionsfor leading companies in the Seattlearea for more than a decade. When he?s not busy designing software systems orwriting about them, he can often be found loitering at local user groups andhabitually lurking in the ASP.NET newsgroup. Find out more about him at http://SteveOrr.netor e-mail him at mailto:Steve@Orr.net.