Using the MultiView and Wizard Controls in ASP.NET 2.0by Wei-Meng Lee
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.
- Launch Visual Studio 2005 and create a new website project. Name the project C:\MultiViewAndWizard.
- Double-click the MultiView control (located in the Toolbox under the Standard tab) to add it to the default Web Form, default.aspx.
- 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.
- Populate the View controls with the additional controls as shown in Figure 1.
- Double-click the Web Form to switch to its code-behind page. Add the code shown below to service the
Clickevents 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
ActiveViewIndexproperty of the MultiView control sets the View control to display. Set the
ActiveViewIndexproperty of the MultiView control to 0 so that the first view control will be displayed when the page is loaded.
- Press F5 to test the application. Figure 2 shows the results of stepping through the application.
Pages: 1, 2