email article printer friendly get the code more resources

Add Magic to Forms With Wizards
Take advantage of ASP.NET 2.0's new Wizard control to build wizard-based forms with less code.
by Thiru Thangarathinam

January 7, 2005

Technology Toolbox: VB.NET, ASP.NET

Creating forms to collect user input is one of the most frequently performed tasks in Web application development. The forms that accept the user input are called wizards. These forms must have the plumbing code to handle issues such as state maintenance across postbacks, navigation between forms, and so on. In ASP.NET 1.x, you used Panel and Placeholder controls in one or many ASP.NET pages. ASP.NET 2.0 will ship with a built-in Wizard control that not only automates most of the plumbing tasks for you, but also provides a clean and easy-to-use interface for creating wizard-based applications.

I'll discuss this new Wizard control in depth and demonstrate how to use it to create multiform input pages. Along the way, you'll also learn about the different events, properties, methods, and templates supported by the Wizard control.

Web applications typically include a series of interconnected forms that let users enter input data in a controlled and sequential manner. The Wizard control can go a long way toward simplifying many of the tasks associated with building multiple forms and collecting user input.

You can use the Wizard control to build different forms and customize user navigation without writing a single line of code. The Wizard control lets you collect data in distinct steps, which enables users to navigate between steps at their discretion, thereby creating a simpler user experience. Another important advantage to using the Wizard control: You don't have to worry about issues such as data persistence, state maintenance, and so on, because the Wizard control takes care of these things for you. Each step within a Wizard control can contain one or more of these areas: header, navigation area, sidebar, and body. The sidebar area is optional, and you can control the sidebar display by setting the DisplaySideBar property of the Wizard control to True or False.

The wizard uses steps to differentiate the various sections of user data input. Each step within the control has a StepType that determines whether it's the beginning step, an intermediate step, or a completion step. The wizard can have as many intermediate steps as needed. You can add different controls (such as TextBox or DropDownList) to the wizard steps to collect user input:

<asp:wizard id="northwindWizard"  
   HeaderText="Northwind Wizard"
      runat="server">
<!-- All the templates such as 
   StartNavigationTemplate, 
   FinishNavigationTemplate and so on
   go here
   -->
   <wizardsteps>
   <asp:wizardstep title=
      "Wizard Step 1" 
      steptype="…" runat="server">
      <!-- Add Step 1 Content here -->
   </asp:wizardstep>
   <asp:wizardstep title=
      "Wizard Step 2" 
      steptype="…" runat="server">
      <!-- Add Step 2 Content here -->
   </asp:wizardstep>
   </wizardsteps>
</asp:wizard>