Browse DevX
Sign up for e-mail newsletters from DevX


Whidbey's New Wizard Control Adds Navigational Power : Page 3

As Web applications get more complex, the need for multi-page forms has increased as well. Unfortunately, handling multi-page form data and page navigation in a stateless Web application is particularly demanding. To simplify the process, Microsoft has added built-in multi-page form capability to ASP.NET in the Visual Studio "Whidbey" release. Find out how to give Wizard power to your Web applications.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Handling Validation and Events
To validate user inputs, you use the new ValidationGroup property. The property helps you validate control values within a particular grouping. Controls that inherit from BaseValidator expose ValidationGroup as a string property. To group controls, assign the same string value to ValidationGroup for all controls you want to place in that group. Then, assign the same string value to the ValidationGroup property of the Validation controls (such as RequiredFieldValidator, etc) that you're using to validate the content, and to the control that posts the content—usually a button or link.

For example, the sample application declares RequiredFieldValidator validation controls, and associates them with the mandatory fields, and declares a CompareValidator to validate the birthdate entry. All the validation and field controls have the same ValidationGroup value—"customervalidate." In addition, the Next and SideBar button controls ValidationGroup property have this value. Doing that ensures that all the controls associated with that ValidationGroup value get validated whenever the user clicks a sidebar link or the Next button.

You need to add some server side event handlers to handle the record insertion. The following code fragment associates the handlers with specific events.

<asp:wizard id="wzCustomer" runat="server" sidebarenabled="true" height="344px" width="648px" backcolor=Teal bordercolor="#00C0C0" borderstyle="Outset" onactiveviewchanged="ViewChanged" onnextbuttonclick="NextButtonClick" onfinishbuttonclick="FinishClicked" onsidebarbuttonclick="SideBarClick" >

I've used Trace statements in the sample code events to help you follow the event sequence. You can view the trace information by adding the trace=true directive to the page and then executing the application.

Table 3 describes the events used and a description stating when the event occurs and, where appropriate, how that event gets handled in the sample application.

Table 3. Wizard Events: The table contains a list and description of the Wizard events used in the sample application.




Fired for each step of wizard, since each step is a different view. This occurs between the Begin Init and End init step, effectively before the Init event executes.

Note: For the full server side code, refer to the sample project that accompanies this article.


Fired when a user clicks the "NextButton" in any step.

Action: In the sample, the event calls a "ProcessHeader" method. This method gets a collection of all the WizardSteps as a WizardStepCollection using the WizardSteps (see Listing 1 for definitions) property of the wizard. Use the CurrentStepIndex property of the WizardNavigationEventArgs to get the currentstep from this collection. You can also use the wizard's ActiveStep property for the same purpose. Finally, set the label control in the header to display content like "Step 1 of 2..." etc.

Note: Though direct reference to control identifiers is possible, as examples there are instances in the sample using FindControl to get reference to control.


Fired when a user clicks the "FinishButton" in the WizardStep (steptype="Finish").

Action: Iterate through each WizardStep of the WizardStepCollection and collect the user input from the controls. In case the validation fails for mandatory check, use wzCustomer.MoveTo(step) to move back to a specific step. If validation succeeds update the database.


Fired on click of sidebar links. In the sample calls the method "ProcessHeader".


Fired on click of Previous buttons. Not implemented in this sample.

Commonly Used Wizard Methods and Properties
You may need to identify and process each step as users complete a Wizard. The WizardNavigationEventArgs parameter sent by the control for each event provides properties you can use to identify the specific step involved, such as the NextStepIndex and CurrentStepIndex properties. Use the WizardStepCollection property to access individual steps and their contents. You can also cause the Wizard to move to a particular step using the MoveTo method. Table 4 describes the some of the most commonly used Wizard methods and properties you'll need.

Table 4. Common Wizard Properties and Methods: The table shows the most common properties and methods of the Wizard control.




Used to get the currentstep of the Wizard.


WizardStepCollection—Gives you the collection of all Steps. You can pass the index to the collection to get a particular step. For example: WizardStepCollection StepsCollection= wzCustomer. WizardSteps; WizardStep step = StepsCollection[1];

FinishStepButtonText, NextStepButtonText, PreviousStepButtonText, etc

These are used to set the display text values of the corresponding buttons. There are properties for each buttons available in wizard.


A very important method that moves the wizard to the step mentioned.

SideBarStyle, NavigationButtonStyle, etc

TableItemStyles to configure styles for respective controls.

At this point, you've completed the Customer information sample. Run the sample to investigate the flow and experiment with the Wizard. If you want to actually post the data to a database, run the .sql file that accompanies the sample code.

You can simplify the process of developing complex multi-page user input forms using the innovative Wizard control. The Wizard handles the multi-page scenario within a single page, and provides templates for customizing the form pages' appearance. The Wizard navigation model supports skipping steps or jumping directly to a specific step, while the event model provides fine-grained control over the form data, which is critical in these scenarios.

Vishnu Prasad H is a Microsoft MVP working as consultant for Capco IT Services India Ltd, Bangalore. He has four years of software development experience and has expertise in developing applications using Microsoft technologies and languages. You can reach him via email here.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date