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

It's quick, easy and you get access to all the articles on DevX. This registration/login is to allow you to read articles on devx.com. Already a member? To become a member of DevX.com create your Member Profile by completing the form below. Membership is free! Already registered? Sign In E-mail (User Name) Create a Password Re-enter Password First Name Last Name Company Company Size ... Please select ... Less than 100 100 - 249 250 - 499 500 - 999 1000 - 4999 5000 - 9999 More than 9999 Address City State/Province ... Please select ... Outside of US and Canada Alabama Alaska Alberta American Samoa Arizona Arkansas Armed Forces Americas Armed Forces Europe Armed Forces Pacific British Columbia California Colorado Connecticut Delaware District of Columbia Florida Georgia Guam Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Manitoba Maryland Massachusetts Michigan Minnesota Mississippi Missouri Montana Nebraska Nevada New Brunswick New Hampshire New Jersey New Mexico New York Newfoundland North Carolina North Dakota Northern Mariana Is Northwest Territories Nova Scotia Ohio Oklahoma Ontario Oregon Palau Pennsylvania Prince Edward Island Province du Quebec Puerto Rico Rhode Island Saskatchewan South Carolina South Dakota Tennessee Texas Utah Vermont Virgin Islands Virginia Washington West Virginia Wisconsin Wyoming Yukon Territory Country ... Please select ... Afghanistan Aland Islands Albania Algeria American Samoa Andorra Angola Anguilla Antarctica Antigua and Barbuda Argentina Armenia Aruba Ascension Island Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Benin Bermuda Bhutan Bolivia Bosnia and Herzegovina Botswana Bouvet Island Brazil British Indian Ocean Territory Brunei Darussalam Bulgaria Burkina Faso Burundi Cambodia Cameroon Canada Cape Verde Cayman Islands Central African Republic Chad Chile China Christmas Island Cocos (Keeling) Islands Colombia Comoros Congo Congo, the Democratic Republic of the Cook Islands Costa Rica Cote d'Ivoire Croatia Cuba Cyprus Czech Republic Denmark Djibouti Dominica Dominican Republic Ecuador Egypt El Salvador Equatorial Guinea Eritrea Estonia Ethiopia Falkland Islands (Malvinas) Faroe Islands Fiji Finland France France, Metropolitan French Guiana French Polynesia French Southern Territories Gabon Gambia Georgia Germany Ghana Gibraltar Greece Greenland Grenada Guadeloupe Guam Guatemala Guernsey Guinea Guinea-Bissau Guyana Haiti Heard Island and McDonald Islands Honduras Hong Kong Hungary Iceland India Indonesia Iran, Islamic Republic of Iraq Ireland Isle of Man Israel Italy Jamaica Japan Jersey Jordan Kazakhstan Kenya Kiribati Korea, Democratic People's Republic of Korea, Republic of Kuwait Kyrgyzstan Lao People's Democratic Republic Latvia Lebanon Lesotho Liberia Libyan Arab Jamahiriya Liechtenstein Lithuania Luxembourg Macao Macedonia, the former Yugoslav Republic of Madagascar Malawi Malaysia Maldives Mali Malta Marshall Islands Martinique Mauritania Mauritius Mayotte Mexico Micronesia, Federated States of Moldova, Republic of Monaco Mongolia Montenegro Montserrat Morocco Mozambique Myanmar Namibia Nauru Nepal Netherlands Netherlands Antilles New Caledonia New Zealand Nicaragua Niger Nigeria Niue Norfolk Island Northern Mariana Islands Norway Oman Pakistan Palau Palestinian Territory, Occupied Panama Papua New Guinea Paraguay Peru Philippines Pitcairn Poland Portugal Puerto Rico Qatar Reunion Romania Russian Federation Rwanda Saint Barthelemy Saint Helena Saint Kitts and Nevis Saint Lucia Saint Martin Saint Pierre and Miquelon Saint Vincent and the Grenadines Samoa San Marino Sao Tome and Principe Saudi Arabia Senegal Serbia Seychelles Sierra Leone Singapore Slovakia Slovenia Solomon Islands Somalia South Africa South Georgia and the South Sandwich Islands Spain Sri Lanka Sudan Suriname Svalbard and Jan Mayen Swaziland Sweden Switzerland Syrian Arab Republic Taiwan, Province of China Tajikistan Tanzania, United Republic of Thailand Timor-Leste Togo Tokelau Tonga Trinidad and Tobago Tristan Da Cunha Tunisia Turkey Turkmenistan Turks and Caicos Islands Tuvalu Uganda Ukraine United Arab Emirates United Kingdom United States United States Minor Outlying Islands Uruguay Uzbekistan Vanuatu Vatican City State (Holy See) Venezuela, Bolivarian Republic of Viet Nam Virgin Islands, British Virgin Islands, U.S. Wallis and Futuna Western Sahara Yemen Zambia Zimbabwe Postal Code/Zip Job Function ... Please select ... Executive Management (CEO, CFO, President) Executive IT Management (CTO, CIO, VP IT) Sr. Corporate Management (VP, GM) IT Management (IS/IT/MIS/Internet) IT Staff/Professional Sales & Marketing Management eCommerce Management Developer Tester/QA Other Corporate Professional (Mgmt &/or Staff) Consultant Government Academic/Research Phone Note: Extension number is optional, but may be included by adding an "x" before the extension number.   By registering you will also be signed up for the Enterprise Development Daily newsletter. After registering you may choose to opt-out by clicking on the "Manage Profile" link. Cancel Don't have an account? Register Now - for FREE! E-mail (user name) Password Cancel | Forgot Your Password?