Whidbey's New Wizard Control Adds Navigational Power

SP.NET v2.0 adds many new concepts and controls beyond those shipped in version 1.1. One of these is the Wizard control, which can simplify your life when you need to implement a "step by step" interface style to capture data. The Wizard provides built-in navigation capability that lets you make logical field groupings for each step in a single aspx page where the process would normally require multiple steps (and complicated logic or multiple pages). The Wizard control uses ViewState (.NET's built-in method for maintaining control values between requests) to handle the data each time the Wizard posts data back to the server, thus reducing your work. Further, you can use customizable templates to tailor the display for each step of the wizard.

Capturing Customer Information
The sample Wizard application captures customer information details such as name, gender, address, and preferred notifications. Typically, the process would require a long input form or several pages. Figure 1 shows a database-table view of the fields the application should capture.

Figure 1. Customer Information Relationship Model: The figure shows the relationships between the three database tables used to store customer information for the sample Wizard application.

You can see from Figure 1 that tblCustomer contains basic customer information. It has a one-to-many relationship with the tblAddress table, which stores customer addresses, and with the tblNotifications table, which stores user notification options.

This example should be very familiar to most Web developers. The number of required fields in the tables is sufficient to illustrate the usefulness of the Wizard control. As you build the project, you'll also learn about the ValidationGroup property, which helps validate wizard controls in named groups. The wizard first displays a welcome page; followed by three pages that capture a customer's personal information, address, and notification options. At the end of the input process, users must confirm the input values to commit the data. When the process completes, the application displays a CustomerId value. To implement the sequence, the Wizard control uses a set of predefined templates that you can configure to handle Start, Finish, Complete and the intermediate data-entry steps.

Building a Wizard Application
You need Visual Studio "Whidbey" installed to run the sample application. To install the sample application first execute the sql file to create the database "CustomerWizard." Next, Copy the aspx files to a folder and open them as existing ASP.NET Web sites. Make appropriate changes to the ConnectionString value in the Web.config file so the application can access the database. Save the solution and you're ready to execute.

Author's Note: The sample enclosed was developed using the Whidbey alpha release, so you can expect changes to occur before the final release version. Nonetheless, this article will give you a good feel for the process of using the new Wizard control, even if the details change somewhat before the release version.

If you'd rather build the application as you read through the article, here's how to get started. Create an ASP.NET Website template and drag the Wizard control from the Core tab of the toolbox onto the default.aspx page design surface. The default definition looks as shown below.

   <asp:wizard id="Wizard1" runat="server" 
     sidebarenabled="true">
     <wizardsteps>
      <asp:wizardstep title="Step 1">Step 1 Content  
      </asp:wizardstep>
      <asp:wizardstep title="Step 2">Step 2 Content  
      </asp:wizardstep>
    </wizardsteps>
   </asp:wizard>

Figure 2 shows how the template appears by default in Visual Studio.

Figure 2. Wizard Control's Default Design View. The figure shows how the Wizard control looks when you first drag it onto the design surface in Visual Studio.

You use the <asp:WizardStep> element to declare a step within the Wizard. Table 1 shows other attributes used in the preceding code fragment along with their descriptions.

Table 1. WizardStep Attributes: The table shows the descriptions for the attributes of the <asp:WizardStep> element used in the sample application.

Attribute/Settings	Description
Id	Identifier for the control.
Sidebarenabled	Boolean value. "True" would mean display of sidebar, listing the wizard steps. "False" will disable the appearance of sidebar.
Title	Title of the links as seen in sidebar.

Add the control definitions and configure them into multiple "WizardStep" definitions to capture customer input as shown in Listing 1. Note that each WizardStep contains a steptype attribute. You can use the steptype attribute value in your code to determine which type of step (start, intermediate step, finish, or complete) the user just completed. Figures 3, 4, and 5 show how the completed control definitions cause the various pages of the Wizard to appear in a browser before doing any customization.

Figure 3. Start and Step 1: Here are screenshots of the first two Wizard screens as they appear in a browser by default.	Figure 4. Steps 2 and 3: The screenshots show the default view of the Wizard pages that capture customer address and notification details.
Figure 5. The Finish and Complete steps: The screenshots show the default view of the Finish and Complete pages of the Wizard control.

Table 2 describes the attributes and declarations used in Listing 1.

Table 2. Wizard Control Declarations: The table lists the attributes and declarations used in Listing 1.

Attribute/Settings	Description
Steptype	In the order of appearance:
	Start: The startup for the screen, usually the greetings screen of wizards.
	Step: These screens hold intermediate stages, usually after the start screen.
	Finish: Use this more like a confirmatory screen i.e. question for a conscious confirmation of input values from user.
	Complete: Use this to provide a success/failure message i.e. it can be used  as a status screen for all the actions taken by the user.
Id	It is always good practice to specify the IDs.

While the default UI is serviceable, you can provide a better UI by customizing the steps. You can use the templates provided by the Wizard to define navigation controls, a header, etc., or you can use styles and themes. The next section shows you how to use the built-in templates.

Note: You can use pre-built styles such as NavigationStyle and HeaderStyle to customize the display; however, templates give you more control. For example, templates let you use buttons rather than links for navigation.