ASP.NET Tutorial

<asp:MultiView> Control

The <asp:MultiView> control is a container for a group of <asp:View> controls, where each View control is a visible portion of a page to display. Each View represents a series of steps in an application that otherwise would require coding of separate pages. The Views are revealed according to user preferences or in a scripted sequence. The MultiView is particularly applicable to mobile devices with small screens that cannot render a page in full but in incremental steps revealing a portion of the page at a time.

<asp:MultiView id="id" Runat="Server"
  ActiveViewIndex="viewindex"
>
	
  <asp:View id="id" Runat="Server"
	
    ...Controls, text, and XHTML
	
  </asp:View>
  ...
	
</asp:MultiView>

Figure 12-25. General format for <asp:MultiView> control.

The MultiView control encloses one or more View controls, where each View is a portion of the page that is visible. Views are indexed in their coded order of appearance beginning with 0. The MultiView's ActiveViewIndex property can be set to indicate the starting View when the page opens. Also, Views can be revealed in script by assigning an index value to this property or by calling the MultiView's SetActiveView(viewID) method giving the id of a View to display.

Normally, Views are rendered in their index sequence by supplying Button or LinkButton controls to navigate forwards and backwards from one View to the next. These buttons are coded inside a View control and are configured as command buttons. They are given the special CommandNames "PrevView" and "NextView" by which the MultiView control automatically navigates the Views. The following pair of buttons, for example, automatically reveals the previous and next Views based on their index numbers. No scripting is required.

<asp:View id="View3" Runat="Server">

  ...displayed content

  <asp:Button Runat="Server" 
    Text="Prev"
    CommandName="PrevView"/>

  <asp:Button Runat="Server" 
    Text="Next"
    CommandName="NextView"/>

</asp:View>

Listing 12-22. Code to navigate page views.

If script processing is to take place when a View is revealed, a button's CommandName can be replaced by an OnClick event handler to call a subprogram, overriding the normal sequencing of Views. The subprogram then returns to the sequence by calling the MultiView's SetActiveView() method to reveal the next View.

Displaying a MultiView Page

A MultiView can be used for any application that reveals page content in a sequence. That content could be a series of instructions, a sequence of steps, a pattern of discussion, a slide show, or about any other content revealed a portion at a time. The following page, for example, contains a MultiView control enclosing seven View controls that reveals a set of questions in sequence. The visible sense is that seven different pages are displayed; however, there is only a single page whose Views are hidden and revealed as buttons are clicked.

Figure 12-26. Displaying a MultiView.

Code for the above application is shown below. Apart from the heading, the entire page is enclosed in an <asp:MultiView> control with separate <asp:View> controls describing the content displays. The MultiView has its ActiveViewIndex initialized to 0 to display the first of the Views when the page opens.

<html>
<body>
<form Runat="Server">

<h3>Account Application</h3>

<asp:MultiView id="Questionnaire" ActiveViewIndex="0" Runat="Server">

<!-- VIEW 1 -->
<asp:View id="View1" Runat="Server">

  <p>You can apply for an account to receive special access to information
  at this site by filling out the following form. </p>

  <asp:Panel Style="position:absolute; top:210px" Runat="Server">
  <asp:Button Runat="Server" 
    Text="Begin"
    CommandName="NextView"
    Width="50"/>
  </asp:Panel>

</asp:View>

<!-- VIEW 2 -->
<asp:View id="View2" Runat="Server">

  <p>Please enter your email address:</p>
  Email:	<asp:TextBox id="Email" Width="200" Runat="Server"/><br/>

  <asp:Panel Style="position:absolute; top:210px" Runat="Server">
  <asp:Button Runat="Server" 
    Text="Prev"
    CommandName="PrevView"
    Width="50"/>
  <asp:Button Runat="Server" 
    Text="Next"
    CommandName="NextView"
    Width="50"/>
  </asp:Panel>

</asp:View>

<!-- VIEW 3 -->
<asp:View id="View3" Runat="Server">

  <p>What is your occupation?</p>
  <asp:DropDownList id="Occupation" Runat="Server">
    <asp:ListItem Text="IT Professional"/>
    <asp:ListItem Text="Student"/>
    <asp:ListItem Text="Educator"/>
    <asp:ListItem Text="Other"/>
  </asp:DropDownList><br/>

  <asp:Panel Style="position:absolute; top:210px" Runat="Server">
  <asp:Button Runat="Server" 
    Text="Prev"
    CommandName="PrevView"
    Width="50"/>
  <asp:Button Runat="Server" 
  Text="Next"
  CommandName="NextView"
  Width="50"/>
  </asp:Panel>

</asp:View>

<!-- VIEW 4 -->
<asp:View id="View4" Runat="Server">

  What type of applications do you primarily develop?<br/>
  <asp:RadioButtonList id="Applications" Runat="Server">
    <asp:ListItem Text="ASP.NET 2.0"/>
    <asp:ListItem Text="ASP.NET 1.1"/>
    <asp:ListItem Text="Windows"/>
    <asp:ListItem Text="Mobile"/>
  </asp:RadioButtonList><br/>

  <asp:Panel Style="position:absolute; top:210px" Runat="Server">
  <asp:Button Runat="Server" 
    Text="Prev"
    CommandName="PrevView"
    Width="50"/>
  <asp:Button Runat="Server" 
    Text="Next"
    CommandName="NextView"
    Width="50"/>
  </asp:Panel>

</asp:View>

<!-- VIEW 5 -->
<asp:View id="View5" Runat="Server">

  Which programming languages do you use (check all that apply)?<br/>
  <asp:CheckBoxList id="Languages" Runat="Server">
    <asp:ListItem Text="ASP"/>
    <asp:ListItem Text="Visual Basic"/>
    <asp:ListItem Text="C#"/>
    <asp:ListItem Text="C++"/>
  </asp:CheckBoxList><br/>

  <asp:Panel Style="position:absolute; top:210px" Runat="Server">
  <asp:Button Runat="Server" 
    Text="Prev"
    CommandName="PrevView"
    Width="50"/>
  <asp:Button Runat="Server" 
    Text="Next"
    OnClick="Verify_Form"
    Width="50"/>
  </asp:Panel>

</asp:View>

<!-- VIEW 6 -->
<asp:View id="View6" Runat="Server">

  <p>Verify the following information and click the "Submit" button to 
  submit your application.</p>

  <table border="0" cellpadding="0">
  <tr>
    <td><b>Email:</b></td>
    <td><asp:Label id="EmailOut" Runat="Server"/></td>
  </tr>
  <tr>
    <td><b>Occupation:</b></td>
    <td><asp:Label id="OccupationOut" Runat="Server"/></td>
  </tr>
  <tr>
    <td><b>Applications:</b></td>
    <td><asp:Label id="ApplicationsOut" Runat="Server"/></td>
  </tr>
  <tr>
    <td><b>Languages:</b></td>
    <td><asp:Label id="LanguagesOut" Runat="Server"/></td>
  </tr>
  </table>

  <asp:Panel Style="position:absolute; top:210px" Runat="Server">
  <asp:Button Runat="Server" 
    Text="Prev"
    CommandName="PrevView"
    Width="50"/>
  <asp:Button Runat="Server" 
    Text="Submit"
    OnClick="Submit_Form"
    Width="50"/>
  </asp:Panel>

</asp:View>

<!-- VIEW 7 -->
<asp:View id="View7" Runat="Server">

  <p><asp:Label id="ExitMsg" Runat="Server"/></p>

  <asp:Panel Style="position:absolute; top:210px" Runat="Server">
  <asp:Button Runat="Server" 
    Text="Restart"
    CommandName="SwitchViewByID"
    CommandArgument="View1"
    Width="50"/>
  </asp:Panel>

</asp:View>

</asp:MultiView>

</form>
</body>
</html>

Listing 12-23. Code for MultiView.

Each View includes Button controls for navigating the Views. The CommandNames "PrevView" and "NextView" automatically reveal the previous and next Views in sequence. Notice that these buttons are enclosed inside a Panel control with CSS style settings to position them at an exact location on the page.

Navigation is in sequence until the fifth View (id="View5"). Here, the "Next" button includes an OnClick event handler to call subprogram Verify_Form to summarize entered information prior to the next View (id="View6") where the summary is displayed. Code for this subprogram is shown below.

Sub Verify_Form (Src As Object, Args As EventArgs)

  If Email.Text = "" Then
    EmailOut.Text = "Missing"
  Else
    EmailOut.Text = Email.Text
  End If

  OccupationOut.Text = Occupation.SelectedValue

  If Applications.SelectedValue = "" Then
    ApplicationsOut.Text = "Missing"
  Else
    ApplicationsOut.Text = Applications.SelectedValue
  End If

  LanguagesOut.Text = ""
  Dim Item As ListItem
  For Each Item In Languages.Items
    If Item.Selected Then
      LanguagesOut.Text &= Item.Text & ", "
    End If
  Next
  If LanguagesOut.Text = "" Then
    LanguagesOut.Text = "Missing"
  Else
    LanguagesOut.Text = Left(LanguagesOut.Text, Len(LanguagesOut.Text) - 2)
  End If

  Questionnaire.SetActiveView(View6)

End Sub

Listing 12-24. Code to verify and summarized entered information.

All controls on the page are accessible by scripts even though they may be hidden by their enclosing Views. For example, the Email TextBox displayed in View1 can have its Text property tested even though View1 is no longer visible. Also, a message can be assigned to the Text property of the EmailOut Label even though it is currenly hidden in View6.

The subprogram simply checks for entered values in the different Views and displays entered data or a "Missing" message in the summary table in View6. Once this output is formatted, View6 is revealed by applying the MultiView's SetActiveView() method: Questionnaire.SetActiveView(View6). Note that the id of the set View is not enclosed in quotes. The method's parameter must be of a View data type, not a string.

Similar button techniques are used in View6 to call subprogram Submit_Form to perform processing and reestablish the navigation sequence of Views.

Sub Submit_Form (Src As Object, Args As EventArgs)

  '-- Insert code to save form information

  ExitMsg.Text = "Thank you for your application."
  Questionnaire.SetActiveView(View7)

End Sub

Listing 12-25. Subprogram called from a View.

Link buttons with the special command names "PrevView" and "NextView" automatically navigate to previous and next Views through the MultiView's built-in navigation mechanism. At times, though, you may need to alter this sequence to reveal a View that is not previous or next in sequence. In View7 of the above example (the final View), a button is provided to return to View1 (the first View). Neither a previous nor next navigation is appropriate. The need is to jump immediately to View1.

<asp:Button Runat="Server" 
  Text="Restart"
  CommandName="SwitchViewByID"
  CommandArgument="View1"
  Width="50"/>

Listing 12-26. Switching views with View names.

By coding the special CommandName="SwitchViewByID" property and by naming a View in the accompanying CommandArgument, navigation is directly to the named View. No scripting is required. An alternative, of course, is to call a subprogram that changes Views with the MultiView's SetActiveView() method; however, coding the command properties of the button avoids this extra scripting.

External Buttons for View Navigation

In the previous example, buttons are coded inside the individual Views in order to take advantage of built-in MultiView navigation. This technique works fine except that it requires duplication of the same buttons in most, if not all, Views. A slightly different technique can be used when identical buttons are shared by all Views—when creating a "menu system" for navigation rather than a linked sequence of Views. In the following example, a common set of buttons link to separate views.

Figure 12-27. Displaying a MultiView with a common menu of external buttons.

Code for the MultiView and the first of the six Views is shown below. Notice that no button links are coded inside any of the Views. Rather, all buttons appear outside the MultiView in a positioned Panel that is common to all Views.

<asp:MultiView id="ValidationViews" ActiveViewIndex="0" Runat="Server">

<!-- VIEW 1 -->
<asp:View id="View1" Runat="Server">

  <h3>Validation Controls</h3>

  <p>For common types of data validation ASP.NET provides a set of 
  validation controls. These validators can test for missing values, 
  comparison values, values within a range, and other forms of data to 
  ensure that proper data is supplied to processing scripts. These controls 
  are associated with TextBox controls and perform their tests automatically 
  when Button, LinkButton, or ImageButton controls are clicked to call 
  subprograms for processing. If a validation test is not met, the validator 
  displays an error message to call attention to this fact, and the user is 
  given the chance to reenter valid data in the associated TextBox.</p>

</asp:View>

<!-- VIEW 2 -->
  ...
<!-- VIEW 3 -->
  ...
<!-- VIEW 4 -->
  ...
<!-- VIEW 5 -->
  ...
<!-- VIEW 6 -->
  ...

</asp:MultiView>

<!-- Navigation Buttons ->
<asp:Panel Width="100%" BackColor="#C0C0C0" Runat="Server"
  Style="text-align:center; position:absolute; top:325px; padding:5px">

<asp:Button Runat="Server" 
  Text="Validation Controls"
  CommandName="View1"
  OnCommand="Change_View"
  Width="150"/>
<asp:Button Runat="Server" 
  Text="RequiredFieldValidator"
  CommandName="View2"
  OnCommand="Change_View"
  Width="150"/>
<asp:Button Runat="Server" 
  Text="RangeValidator"
  CommandName="View3"
  OnCommand="Change_View"
  Width="150"/><br/>
<asp:Button Runat="Server" 
  Text="CompareValidator"
  CommandName="View4"
  OnCommand="Change_View"
  Width="150"/>
<asp:Button Runat="Server" 
  Text="CustomValidator"
  CommandName="View5"
  OnCommand="Change_View"
  Width="150"/>
<asp:Button Runat="Server" 
  Text="ValidationSummary"
  CommandName="View6"
  OnCommand="Change_View"
  Width="150"/>

</asp:Panel>

Listing 12-27. Code for a MultiView with a common set of external buttons.

Since the navigation buttons are not coded inside the Views, automatic navigation is not available to reveal Views with "PrevView," "NextView," or "SwitchViewByID" command names. Instead, these command buttons call the common subprogram Change_View to handle navigation. Each button passes a CommandName string giving the View to reveal.

Sub Change_View (Src As Object, Args As CommandEventArgs)

  Select Case (Args.CommandName)
    Case "View1"
      ValidationViews.SetActiveView(View1)
    Case "View2"
      ValidationViews.SetActiveView(View2)
    Case "View3"
      ValidationViews.SetActiveView(View3)
    Case "View4"
      ValidationViews.SetActiveView(View4)
    Case "View5"
      ValidationViews.SetActiveView(View5)
    Case "View6"
      ValidationViews.SetActiveView(View6)
  End Select

End Sub

Listing 12-28. Subprogram to switch views through external command buttons.

A Visual Basic Select Case structure determines the CommandName string that is passed to the subprogram and sets the active view to the corresponding View name through the MultiView's SetActiveView() method.

Incidentally, as might seem possible, you cannot set the active view directly from the CommandName with a statement such as

ValidationViews.SetActiveView(Args.CommandName)

The reason is that the CommandName is a string value rather than a View data type expected as the SetActiveView() parameter. However, you can use the CommandName string to locate the <asp:View> control with a matching id and assign this found control as the view.

Dim FoundView As View = ValidationViews.FindControl(Args.CommandName)
ValidationViews.SetActiveView(FoundView)

This code can replace the Select Case statement in the above example.