The <asp:Wizard> control is a container for a group of <asp:WizardStep> controls, where each WizardStep is a visible portion of a page to display. Like the MultiView control, the Wizard control reveals individual screens coded on a single page. Whereas the MultiView is especially designed for use on mobile devices with restricted screen sizes, the Wizard is designed to manage a set of data entry screens. Various input controls such as textboxes, radio buttons, checkboxes, and drop-down lists can be packaged as separate screens in a sequence of data entry steps. At the completion of this process, entered data can be saved to an external data source as captured information.
The Wizard control has a more elaborate set of properties than a MultiView, and it supports several events for scripting the data entry process.
Wizard Layout
It is helpful to keep in mind the general layout of a Wizard and its WizardSteps. The figure below shows the four sections that can be displayed by coding an <asp:Wizard> control enclosing five <asp:WizardStep> controls. No special layout or styling is applied except for the dotted borders indicating the Wizard and its four control sections.
A Header appears at the top of each WizardStep display. The easiest way to display a common heading is by coding the Wizard’s HeaderText property as is done above. If no header is provided, none is displayed.
A SideBar menu appears along the left side of the display. It presents a menu of links to the WizardSteps that comprise the sequence of page displays. A SideBar is optional and can be suppressed by coding the Wizard’s DisplaySideBar="False" property. The SideBar is centered vertically within the total height of the Wizard.
A WizardStep is a content display area coded inside an <asp:WizardStep> control. One or more WizardStep controls are coded for individual step displays. Four types of steps are recognized and coded as the control’s StepType property. The single "Start" step is the first screen displayed; it contains a single button to navigate to the next step. One or more "Step" types are intermediate screens displayed in the order in which their <asp:WizardStep> controls are coded; they contain a pair of buttons to navigate to previous and next steps. A single "Finish" step is the last of the intermediate steps; it contains a button to navigate to the previous step and a button to navigate to the last step. The "Complete" step is the last screen displayed; it does not produce navigation buttons.
Below the WizardSteps is a Navigation area containing buttons to navigate to previous and next WizardSteps. The Navigation area recognizes three types of button sets. A StartNavigation button set presents a single button linking to the next step; this button is displayed along with the StepType="Start" WizardStep. A pair of "Previous" and "Next" StepNavigation buttons are displayed along with all StepType="Step" WizardSteps. A FinishNavigation button displays a "Previous" and "Finish" button; these are displayed along with the StepType="Finish" WizardStep. The Finish button automatically links to the StepType="Complete" step unless overridden by the FinishDestinationPageUrl property giving a different final page. The StepType="Complete" step does not display navigation buttons.
An id for a step is optional but must be included if the step is referenced in script. The Title property gives a text string that labels the step and automatically appears in the SideBar menu; all steps are displayed in the menu except for the "Complete" step. In the absence of a Title, the id is used to label the step in the menu. The AllowReturn="False" property is coded for a WizardStep in order to disallow return to this step following its initial display.
A "Cancel" button can be added to all steps by coding the Wizard’s DisplayCancelButton="True" property. No change is made in the step being displayed when this button is clicked. It must be scripted to perform whatever processing is desired when the button is clicked.
Shown below is code for the Wizard display shown in Figure. As you can see, very little code and no scripting is needed to produce a functional Wizard. This framework can be used for any number of sequenced displays simply by changing the content appearing in the WizardStep controls
<h3>Default Wizard Layout</h3>
<asp:Wizard id="Wizard1" Runat="Server"
HeaderText="Header"><WizardSteps>
<asp:WizardStep Title="Start" StepType="Start" Runat="Server">
This is the <b>Start</b> WizardStep.
<br/><br/><br/>
</asp:WizardStep><asp:WizardStep Title="Step 1" StepType="Step" Runat="Server">
This is <b>Step</b> 1 WizardStep.
<br/><br/>
</asp:WizardStep><asp:WizardStep Title="Step 2" StepType="Step" Runat="Server">
This is <b>Step</b> 2 WizardStep.
<br/>
</asp:WizardStep><asp:WizardStep Title="Step 3" StepType="Step" Runat="Server">
This is <b>Step</b> 3 WizardStep.
<br/><br/>
</asp:WizardStep><asp:WizardStep Title="Finish" StepType="Finish" Runat="Server">
This is the <b>Finish</b> WizardStep.
<br/><br/><br/>
</asp:WizardStep><asp:WizardStep StepType="Complete" Runat="Server">
This is the <b>Complete</b> WizardStep.
<br/><br/>
</asp:WizardStep></WizardSteps>
</asp:Wizard>
Layout Formatting in Wizzards
As mentioned, the SideBar menu is aligned on the vertical center of the height of the entire Wizard. Since the height of the WizardStep area varies depending on the amount of content it contains, the menu often slides up and down the page to keep itself center-aligned on the Wizard as you navigate from step to step. The navigation area, as well, changes its position to immediately follow the content area. Also, default buttons are aligned to the right of the Navigation area and change their sizes depending on their text labels. These movements and size changes are apparent in the previous example where the amount of displayed content changes from step to step.
To avoid this annoyance of moving controls and changing sizes, a few simple style settings can be applied to the Wizard. The following example sets specific sizes and positions of controls to keep the Wizard stable while the content changes.
The following code additions are made to the Wizard control to effect the above formatting.
asp:Wizard id="Wizard2" Runat="Server"
HeaderText="Header"
HeaderStyle-Width="300"SideBarStyle-Width="70"
SideBarStyle-VerticalAlign="Top"StepStyle-Width="300"
StepStyle-Height="100"
StepStyle-VerticalAlign="Top"NavigationStyle-Width="300"
NavigationStyle-HorizontalAlign="Left"
NavigationButtonStyle-Width="70"
>…
</asp:Wizard>
The SideBar area is given a fixed width and is vertically aligned at the top of the Wizard. The Header, WizardStep, and Navigation areas are given fixed widths, and the WizardStep area is given a fixed height, with content aligned at the top of the area. The Navigation section sizes all buttons the same and aligns them to the left of the area.
Related Posts
- Handling ASP.Net Controls in JavaScript
- Checklist/Guidelines for ASP.Net Developers
- ASP.Net Performance Improvement Tips
- ASP.Net Developers Checklist – Security Checklist
- Step by Step : SQL Server 2005 Analysis Services (SSAS) Project
Tags: ASP.Net Tutorial, asp:Wizard, asp:WizardStep, Wizard Control, WizardStep
