ASP.NET 2.0 Free Training : Creating Web Wizards

In this tutorial you will learn about Rich Controls and Services, Creating Web Wizards, Working with the Wizard Control, Editing Wizard Steps, Adding a Completion Step, To edit the completion step, To show the user's data and Testing Wizard Control.

Rich Controls and Services

ASP.NET 2.0 comes packaged with a number of goodies. A rich set of controls and services are a bonus to both the developer and the end user. Wizards, image generators and site navigation functions and counters are a few features that have been added.

In this lesson we shall be looking in some depth at the Wizard control, the image generation control and the Site navigation control and counters.

Creating Web Wizards

The new Wizard control has been introduced with an intention to simplify the task of getting user inputs over a series of forms. The interconnected forms break up data collection taking care to provide for navigation controls between forms; to ensure persistence of data and state management. The Wizard control provides for linear and nonlinear navigation and customization of the navigation mechanism with no coding. The user can move through the form sequentially, skip a step or move backwards and forwards over a number of steps to complete the forms. The steps delineate different sections of user data input. Each step within the control is a StepType. Different controls can be added to the Wizard forms. The Complete Step makes all the data accessible. The code would look something like the one shown below:

< asp:Wizard ID="Wizard1" Runat="server" >
< WizardSteps >
< asp:WizardStep Runat="server" Title="Step 1" >
< / asp:WizardStep >
< asp:WizardStep Runat="server" Title="Step 2" >
< / asp:WizardStep >
< / WizardSteps >
< / asp:Wizard >

Within the steps users can add controls, labels and accept user data. The control helps manage the display of the steps and maintenance of the data collected.

The linear and nonlinear navigation over the steps of the Wizard control is a function of the Control’s State Management. The sidebar provided for the purpose helps the user navigate to the different screens. The navigation can be customized using the NexStepButtonText, PreviousStepButtonText and FinishStepButtonText attributes.

< asp:Wizard ID="Wizard1" Runat="server"
NextStepButtonText=" Next > > "
PreviousStepButtonText=" < < Previous "
FinishStepButtonText=" Done! " >

The Wizard displays a title and the control’s current step. The Title can be customized using the HeaderText property. The header template can be changed using the HeaderTemplate property. A cancel button can be displayed by setting the DisplayCancelButton property to true. All buttons can be set to display a common style using the NavigationButtonStyle property or each button can be given an individual look and feel. The control’s templates can be further customized using the StartNavigationTemplate, FinishNavigationTemplate and SideBarTemplate properties.

The behavior of the Wizard control can also be customized programmatically. For instance the NextButtonClick event captures the current user input and the WizardNavigationEventArgs parameter is passed to it. The CurrentStepIndex and NextStepIndex properties of this parameter become available to it and the user can customize the event by setting these properties and determining the behavior of the control when the button is clicked. Similarly the Previous and Finish buttons can also be customized.

Working with the Wizard Control

1. Switch to Design View for Default.aspx.
2. From the Standard group of the Toolbox, drag a Wizard control onto the page.

3. The control appears with two stubbed-out steps already in place. Clicking the steps allows you to edit the text and controls displayed during that step.

Editing Wizard Steps

When the Wizard control is dragged onto the page, it shows two default steps in place. We shall edit both the step and also add a completion step to the wizard.

To edit the first Wizard step

1. Click the underlined text "Step 1" in the Wizard control.
2. Click the edit area (the text that says Click here to edit the active Wizard step).
3. Type the word Name:
4. Drag a TextBox control onto the active area of the wizard control, next to the text just typed.

To edit the second wizard step

1. Click Step 2 in the Wizard control.
2. Click the edit area (the text that says Click here to edit the active Wizard step).
3. Type Email:.
4. Drag a TextBox control onto the active area of the wizard control, next to the e-mail label.
5. Save the file.

Adding a Completion Step

The Complete step has no navigational options.

To add a completion step

1. Right-click the Wizard control.
2. Choose Show Smart Tasks.
3. In the Common Wizard Tasks dialog box choose Add/Remove Wizard Steps.

4. The WizardStep Collection Editor appears.

5. From the Add drop-down list, select Wizard Step.