Standard Controls[26]->Wizard

The Wizard control provides navigation through a series of steps that collect information incrementally from a user. Many websites include functionality that collects information from the end user (e.g. checking out on an ecommerce website). The Wizard consists of:

• Collection of WizardSteps: Each WizardStep contains a discrete piece of content to be displayed to the user. Only one WizardStep will be displayed at a time.
• Navigation Area: The navigation area below each WizardStep that contains the navigation buttons to go the next and pervious steps in the wizard.
• SideBar: An optional element that contains a list of all WizardSteps and provides a means to skip around the WizardSteps in a random order.
• Header: An optional element to provide consistent information at the top of the WizardStep.

The StepType associated with each WizardStep determines the type of navigation buttons that will be displayed for that step. The StepTypes are:

• Start: Displays a Next button.
• Step: Displays Next and Previous buttons.
• Finish: Displays a Finish button.
• Complete: Displays no navigation buttons and hides the SideBar if it is displayed.
• Auto:One of the step types listed above is selected based on the order of the step in the collection (e.g. the first step will have a Next button).

Note: If you are using the WizardControl in a visual designer you can switch to view different WizardSteps on the design surface. To improve the development experience, when you run the page whatever WizardStep was displayed in the designer will be the step you start on. This makes it easier to debug new steps you might be adding to a complicated wizard where each WizardStep requires a lot of validated input. However, you MUST REMEMBER to change the WizardStep back to the first step when you are done making changes.

Simple Single-Step Wizard Control Sample

This sample demonstrates a basic Wizard control that collects a single piece of information on the first WizardStep and displays that information to the user on the Complete WizardStep for confirmation. Instead of displaying this information to the user, you could write the information to a database or other collection store.

C# Wizard

Wizard Commitment Models

Since wizards in web applications are used for a large variety of task the Wizard control supports two different models for using or writing the data collected to a data store. Commit As Your Go Model In the commit as you go model the developer handles writing the information collected on each WizardStep incrementally. For example, a developer implementing a check out system might do the following:

• First Step: Login the user or redirect to a registration page
• Second Step: Confirm the shipping information for the order
• Third Step: Review the order including shipping charges
• Fourth Step: Collect and process the credit card information
• Fifth Step: Confirm that the order was successful and offer a link to return to shopping

Since each step in this process is a pre-requisite for the next step and each step is processed independently it makes sense to commit and process these steps individually. Since each of these steps have been processed independently you may want to prevent the user from revisiting past steps by setting the AllowReturn=False property on the WizardSteps and might also decide to hide the SideBar display. Your code should also be robust enough to handle abandoned sessions, changes to previously committed choices and canceling at any of the WizardSteps. Commit At the End Model In the commit at the end model the developer handles writing all of the information collected on each WizardStep incrementally. For example, a developer implementing a user registration system might do the following:

• First Step: Collect UserID and Password
• Second Step: Collect address information
• Third Step: Collect billing information.
• Fifth Step: Success message

In this example, the developer does not want to create the user in their registration system or enable their account until all of the billing information is collected and processed. If they created the user during the first step, then the user might become active in their system without paying for the service.

Wizard Commit Model Samples

This file shows two Wizard controls side by side. One Wizard control demonstrates the Commit As You Go model and the second Wizard control demonstrates the commit at the end model.

C# Wizard CommitAsYouGo

Wizard NonLinear Navigation

Often in web site wizards, information collected in one step is used to determine if another step should be displayed (e.g. marking something as a gift might cause a gift wrapping step to be displayed). You can set the Wizard control's activeStepIndex to the step that you want the user to go to even if it is not the next sequential step in your collection of steps. In the skipped step scenario, a user who clicks the previous button on a WizardStep will go to the previous step that they visited (not the step that they skipped).

Wizard NonLinear Navigation Sample

In this example the value selected on the first WizardStep is used to determine if the user should skip the second WizardStep and go directly to the third WizardStep. The DisplaySideBar property is set to false in this sample to prevent users who skip WizardStep 2 from clicking on the WizardStep 2 option in the SideBar.

C# Wizard NonLinear

Wizard Styles

The Wizard control allows you to control the look and feel by setting a variety of style properties on the control. The Wizard control supports the following styles:

• Control Style: Applies to all sections of the Wizard control and are merged with other styles set on the control.
• Step Style: Applies to the WizardStep section of the control.
• HeaderStyle: Applies to the header section of the control.
• SideBarStyle: Applies to the area where the SideBar is displayed.
• SideBarButtonStyle: Applies to the buttons contained within the SideBar.
• NavigationStyle: Applies to all area of the control where the Navigation buttons are displayed.
• NavigationButtonStyle: Applies to all navigation buttons in the navigation area. These styles are merged with specific styles set on individual navigation buttons. In the event of conflict the more specific style is applied.
• StartNextButtonStyle: The next button on steps of StepType=Start.
• StepNextButtonStyle: The next button on steps of StepType=Step.
• StepPreviousButtonStyle: The previous button on steps of StepType=Step.
• FinishPreviousButtonStyle: The previous button on steps of StepType=Finish.< li>
• CancelButtonStyle: The cancel button.

Wizard Style Sample

This sample demonstrates various style properties on the Wizard control that can be used to customize the look and feel of the control.

C# Wizard Styles

Wizard Templates

The Wizard control allows you more complete control of the look and feel of the control through templating. The Wizard control supports individual components of the Wizard to be templated separately. You may choose to template 1 or more of these templates for a given Wizard in your web application. The Wizard control supports the following templates:

• HeaderTemplate
• SideBarTemplate
• StartNavigationTemplate
• StepNavigationTemplate
• FinishNavigationTemplate

Note: If you template the SideBar, use the well known ID=SideBarButton for the button controls and the Wizard will automatically hook up the navigation logic. If you template the Navigation areas use the well known command name (e.g. MoveNext, MovePrevious) for your controls and the Wizard will automatically hook up the navigation logic.

Wizard Templates Sample

This sample demonstrates various templates in the Wizard control that can be used to customize the look and feel of the control.

C# Wizard Templates

Templated WizardSteps

The Wizard control also supports creating Templated WizardSteps. This gives you the ability to create your own Wizard step that supports templates. This functionality may prove useful to control developers who are building specialized wizards (e.g. Shopping Carts, Registration) that will be used by developers in a variety of sites with visual displays. Programmatically locating a control inside of a templated WizardStep is slightly more difficult because you must find the control within its naming container.

Templated WizardStep Sample

This sample demonstrates how to find a control in both a regular and templated WizardStep.

C# Wizard TemplatedStep