O'Reilly logo

ASP.NET 2.0: A Developer's Notebook by Wei-Meng Lee

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Selectively Display Groups of Controls

One task that is common in web applications is data collection. For example, you may need to create a page for user registration. On that page, you may want to collect a fair bit of information, such as username, birth date, and perhaps 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. Alternatively, ASP.NET 1.x developers often like to use the Panel controls to contain all the questions and then selectively display the relevant panels (and hide the other panels).

Note

Use the new MultiView and Wizard controls to selectively hide and display controls.

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 controls (a new control in ASP.NET 2.0), which you can then programmatically display.

How do I do that?

To see how the MultiView control works, you will create an application that contains a MultiView control with three View controls embedded in this control. 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 web site project. Name the project C:\ASPNET20\chap01-MultiView.

  2. Double-click the MultiView control (located in the Toolbox under the Standard tab) to add it to the default Web Form.

  3. Double-click the View control (also located in the Toolbox under the Standard tab) and drag and drop it onto the MultiView control. Drag two more View controls onto the MultiView control.

  4. Populate the View controls with the additional controls shown in Figure 1-22.

    Populating the default Web Form with the various controls

    Figure 1-22. Populating the default Web Form with the various controls

  5. Double-click the Web Form to switch to its code-behind page. Add the code shown in Example 1-2 to service the Click events of all Button controls on Default.aspx.

    Example 1-2. Event handler for all Click events on Default.aspx

    Protected Sub btnAllButtons_Click(ByVal sender As Object, _
                                      ByVal e As System.EventArgs) _
                                      Handles btnView1Next.Click, _
                                      btnView2Next.Click, btnView2Previous.Click, _
                                      btnView3Finish.Click, btnView3Reset.Click
        Select Case CType(sender, Button).Text
            Case "Next"
                MultiView1.ActiveViewIndex += 1
            Case "Previous"
                MultiView1.ActiveViewIndex -= 1
            Case "Finish"
                Response.Write("You have registered as " & _
                                txtFirstName.Text & _
                                txtLastName.Text & "<br/>")
                Response.Write("Birthday " & _
                                Calendar1.SelectedDate)
                btnView3Finish.Enabled = False
                btnView3Reset.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 1-23 shows the results of stepping through the application.

Using the MultiView control

Figure 1-23. Using the MultiView control

Notice that for every change of view, a postback to the server occurs.

What about...

...a more efficient method for dividing screens that does not require a postback?

While this lab uses the MultiView control to split a long page into multiple views, the inherent disadvantage with this control is that every change of view requires a postback. Unless you need to access data on the server side, it is much more efficient to use the Wizard control, which performs similar tasks without a postback.

The Wizard control can be found in the Toolbox under the Standard tab. To try out the functionality of the Wizard control:

  1. Launch Visual Studio 2005 and create a new web site project. Name the project C:\ASPNET20\chap01-Wizard.

  2. Add the Wizard control to the default Web Form.

  3. In the Wizard Tasks menu, click the Add/Remove WizardSteps... link (see Figure 1-24) to add one additional step to the control (by default, there are two steps created for you).

    Using the Wizard control

    Figure 1-24. Using the Wizard control

  4. In the WizardStep Collection Editor window, click the Add button and then type "Step 3" in the Title text box (see Figure 1-25). Click OK.

    Adding a new Wizard step

    Figure 1-25. Adding a new Wizard step

  5. Populate the Step 1 of the Wizard control with two TextBox controls, as shown in Figure 1-26. To go to the next step, select Step 2 in the Wizard Tasks menu.

    Populating Step 1

    Figure 1-26. Populating Step 1

    Note

    The Wizard control is highly customizable. Make sure you check out the properties window for all its capabilities.

  6. Populate Step 2 with the Calendar control (use the default name of Calendar1), as shown in Figure 1-27.

    Populating Step 2

    Figure 1-27. Populating Step 2

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

    Populating Step 3

    Figure 1-28. Populating Step 3

  8. Double-click 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 registered as " & _
                txtFirstName.Text & _
                txtLastName.Text & "<br/>")
        Response.Write("Birthday " & _
                        Calendar1.SelectedDate)
        Wizard1.Visible = False
    End Sub
  9. To test the application, press F5. Figure 1-29 shows the Wizard control in action.

The Wizard control in action

Figure 1-29. The Wizard control in action

Tip

In this example, the Wizard control does not perform a postback to the server when the user clicks on the Next or Previous button. However, if the user clicks on the Calendar control in Step 2, a postback does occur.

Where can I learn more?

Check out the Visual Studio 2005 Help entries for the MultiView and Wizard controls to learn more about their full capabilities. In particular, the Wizard control contains many properties for you to customize.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required