Using the MultiView and Wizard Controls in ASP.NET 2.0
Pages: 1, 2
While this article uses the MultiView control to split a long page into multiple views, the inherent disadvantage with this control is that you need to design your own navigation (such as buttons, as shown in this article) to switch between the different View controls. For tasks such as collecting user inputs, the Wizard control is much more efficient as it automatically provides navigation between different views.
The Wizard control can be found in the Toolbox under the Standard tab. To try out the functionality of the Wizard control:
- Add a new Web Form to the project by right-clicking on the project name in Solution Explorer and then selecting Add New Item...
- Add the Wizard control to default2.aspx.
- In the Wizard Tasks Menu, click the "Add/Remove WizardSteps…" link (see Figure 3) to add one additional step to the control (by default, there are two steps created for you).
Figure 3. Using the Wizard control
- In the WizardStep Collection Editor window, click the Add button and then in the Title text box, type "Step 3" (see Figure 4). Click OK.
Figure 4. Adding a new Wizard step
- Populate the Step 1 of the Wizard control with the control as shown in Figure 5 (you can simply copy and paste the control from default.aspx). To go to the next step, select Step 2 in the Wizard Tasks menu.
Figure 5. Populating Step 1
The Wizard control is highly customizable. Make sure you check out the properties window for all its capabilities.
- Populate Step 2 with the control as shown in Figure 6.
Figure 6. Populating Step 2
- In Step 3, type the string as shown in Figure 7.
Figure 7. Populating Step 3
- Double-click on the Wizard control so that you can service the
FinishButtonClickevent when the user clicks on the Finish button in the final step (Step 3):
Protected Sub Wizard1_FinishButtonClick( _ ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) _ Handles Wizard1.FinishButtonClick Response.Write("You have selected <b>" & rblOS.SelectedItem.ToString & _ "</b> as your primary operating systems.<br/>") Response.Write("The language you use for your work is <b>" & _ rblLanguage.SelectedItem.ToString & "</b>") Wizard1.Visible = False End Sub
- To test the application, press F5. Figure 8 shows the Wizard control in action.
In this article, you have seen the two new controls in ASP.NET 2.0 that allows you to split a long page into smaller manageable portions. The MultiView control offers greater flexibility for navigating between views while the Wizard control includes a set of simple navigation buttons to simplify the navigation process.
Wei-Meng Lee (Microsoft MVP) http://weimenglee.blogspot.com is a technologist and founder of Developer Learning Solutions http://www.developerlearningsolutions.com, a technology company specializing in hands-on training on the latest Microsoft technologies.
Return to the Windows DevCenter.