ASP.NET 2.0: A Developeramp;#039;s Notebook [Electronic resources] نسخه متنی

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

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

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

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

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.

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

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

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

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.

Press F5 to test the application. Figure 1-23 shows
the results of stepping through the application.

Figure 1-23. Using the MultiView control

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

1.7.2. 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:

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

Add the Wizard control to the default Web Form.

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

Figure 1-24. Using the Wizard control

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.

Figure 1-25. Adding a new Wizard step

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.

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.

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

Figure 1-27. Populating Step 2

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

Figure 1-28. Populating Step 3

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

To test the application, press F5. Figure 1-29 shows
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.

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