Controls You Can Use on Web Forms   ASP.NET IE WebControls   MultiView WebControl

---

In the previous sections and examples were shown various ways of navigating the different View elements of a MultiView control.

To recap, the first example demonstrated using <asp:imagebutton> controls in a DataList and the SetActiveView method of the MultiView to switch between views.

MultiView Navigation Using SetActiveView Run Sample | View Source

The second example demonstrated using <asp:button> controls and the ActiveViewIndex property of the MultiView to move forward and backward thru the views.

Nested MultiView Controls Run Sample | View Source

The third example demonstrated using <asp:linkbutton> controls in the SelectedItemTemplate of a DataList to change the active view.

Using a MultiView within a Templated Control Run Sample | View Source

This example explores yet another way to navigate the MultiView, using a Toolbar control.

The MultiView, when used in conjunction with a Toolbar, provides a simple yet effective solution for organizing and presenting subsets of information with minimal coding.

The Toolbar can contain ToolbarItem elements that can be configured to enable automated linking of associated View controls on a MultiView control.

This example illustrates using a group of ToolbarCheckButton elements to control the navigation within the MultiView. Basically, the first ToolbarCheckButton links to the first View; the second to the second View, and so on.

Let us briefly explore how that is done.

1. Add the processing directives. See Adding Toolbar Controls to a Web Forms Page.
2. Declare the <ie:toolbar> element and optionally set the control's base properties.

<ie:toolbar id="tb1" runat="server" ... >

   ... individual toolbar items markup goes here ...

</ie:toolbar>

3. Add the ToolbarItem elements as child elements of the Toolbar.

<ie:toolbar id="tb1" runat="server">

   <ie:toolbarlabel text="Select Country:" />
   <ie:toolbardropdownlist id="lstCountries" runat="server" 
      datasourceid="countries"
      datatextfield="countryname" datavaluefield="countrycode" 
      onSelectedIndexChanged="getCountryInfo" autopostback />

   <ie:toolbarseparator />

   <ie:toolbarcheckgroup>
      <ie:toolbarcheckbutton id="btnHome" text="intro" />
      <ie:toolbarcheckbutton id="btnAbout" text="quick facts" />
      <ie:toolbarcheckbutton id="btnSupport" text="images" />
   </ie:toolbarcheckgroup>

</ie:toolbar>

4. Next, declare the MultiView element and add View elements as child elements of the MultiView.

   <asp:multiview id="mvCountry" runat="server">
   
      <asp:view id="overview" runat="server">
         <asp:label id="lblIntro" runat="server" 
            text=<%# Eval ( "Introduction" ) %> />
      </asp:view>
   
      <asp:view id="quickfacts" runat="server">
   
         ... quickfacts view content goes here ...
   
      </asp:view>
   
      <asp:view id="geography" runat="server">
   
         ... geography view content goes here ...
   
      </asp:view>
   
   </asp:multiview>

5. Lastly, add code to handle the navigation.

   Basically in this example, when any check button is clicked, the handler simply sets the ActiveViewIndex property of the MultiView object, showing the selected view.

   void setActive ( Object sender, EventArgs e ) {
      switch ( checkGroup.SelectedCheckButton.ID ) {
         case "btnOview" :
            mvCountry.ActiveViewIndex = 0;
            break;
         case "btnFacts" :
            mvCountry.ActiveViewIndex = 1;
            break;
         case "btnGeo" :
            mvCountry.ActiveViewIndex = 2;
            break;
      }
   }

Using the MultiView with the Toolbar WebControl Run Sample | View Source

Nesting MultiView Controls   Using MultiView Controls in a Templated Control

Books and more ...

Custom Search

Suggested Reading

Need a break ?