Using the MultiView and Wizard Controls in ASP.NET 2.0

One task that is common in web applications is data collection. For example, you may need to create a survey page for collecting user inputs. On that page, you may want to collect a fair bit of information such as username, profile, and answers to survey questions (often used to collect subscriber information for controlled-circulation magazines). A good practice is to split your questions across multiple pages so that the user need not scroll down a page that contains all the questions. In ASP.NET 1.x developers often like to use Panel controls to contain all the questions and then selectively display the relevant panels (and hide the other panels).

In ASP.NET 2.0, the MultiView control takes the drudgery out of creating multiple pages for this task. It allows controls to be contained within multiple View (a new control in ASP.NET 2.0) controls, which you can then programmatically display.

Using the MultiView Control

To see how the MultiView control works, you will create an application that contains a MultiView control with three View controls embedded in it. You can then treat each View control like an ordinary Web Form and populate controls in it. You then connect these View controls together so that users can step through them in a specific order.

1. Launch Visual Studio 2005 and create a new website project. Name the project C:\MultiViewAndWizard.
2. Double-click the MultiView control (located in the Toolbox under the Standard tab) to add it to the default Web Form, default.aspx.
3. Double-click on the View control (also located in the Toolbox under the Standard tab) to drop it onto the MultiView control. Drag and drop two more View controls onto the MultiView control.
4. Populate the View controls with the additional controls as shown in Figure 1.
   

   
   Figure 1. Populating the default Web Form with the various controls--click for full-size image.

5. Double-click the Web Form to switch to its code-behind page. Add the code shown below to service the Click events of all Button controls on default.aspx:
   

       Protected Sub btnAllButtons_Click(ByVal sender As Object, _
                                             ByVal e As System.EventArgs) _
                                             Handles btnView1Next.Click, _
                                             btnView2Next.Click, btnView2Previous.Click, _
                                             btnFinish.Click, btnReset.Click
           Select Case CType(sender, Button).Text
               Case "Next"
                   MultiView1.ActiveViewIndex += 1
               Case "Previous"
                   MultiView1.ActiveViewIndex -= 1
               Case "Finish"
                   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>")
                   btnFinish.Enabled = False
                   btnReset.Enabled = False
               Case "Reset"
                   MultiView1.ActiveViewIndex = 0
           End Select
       End Sub

6. The ActiveViewIndex property of the MultiView control sets the View control to display. Set the ActiveViewIndex property of the MultiView control to 0 so that the first view control will be displayed when the page is loaded.
7. Press F5 to test the application. Figure 2 shows the results of stepping through the application.
   

   
   Figure 2. Using the MultiView control--click for full-size image.

Related Reading ASP.NET 2.0: A Developer's Notebook By Wei-Meng Lee

Wizard Control

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:

1. Add a new Web Form to the project by right-clicking on the project name in Solution Explorer and then selecting Add New Item...
2. Add the Wizard control to default2.aspx.
3. 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

4. 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

5. 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.

6. Populate Step 2 with the control as shown in Figure 6.
   

   
   Figure 6. Populating Step 2

7. In Step 3, type the string as shown in Figure 7.
   

   
   Figure 7. Populating Step 3

8. Double-click on the Wizard control so that you can service the FinishButtonClick event 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

9. To test the application, press F5. Figure 8 shows the Wizard control in action.
   

   
   Figure 8. The Wizard control in action--click for full-size image.

Summary

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.

Copyright © 2009 O'Reilly Media, Inc.