Controls You Can Use on Web Forms   ASP.NET Standard Controls   MultiView and View Controls

---

Essentially, to create a working MultiView control, you need to add the control to the view, specify the set of View elements the control will contain, and optionally add some code for navigating thru the different views.

The below procedures show the minimum steps needed to display a MultiView control.

1. Declare an <asp:multiview> element and optionally set the control’s base properties. For syntax, see MultiView Control Syntax.

   <asp:multiview id="multiview1" runat="server">
   
      ... individual views markup goes here ...
   
   </asp:multiview>

2. Add View elements as child elements of the MultiView element.

   View elements can be authored declaratively at design time or generated dynamically at run time. For this example, we use two statically defined View elements.

   <asp:multiview id="multiview1" runat="server">
   
      <asp:view id="view1" runat="server">
   
         ... view1 content goes here ...
   
      </asp:view>
   
      <asp:view id="view2" runat="server">
   
         ... view2 content goes here ...
   
      </asp:view>
   
   </asp:multiview>

3. Next, add the interface to enable the user to navigate to the different views.

   You can use any of the ASP.NET button controls for this purpose. In this example, we use <asp:imagebutton> controls, specifically, image buttons within a DataList control.

   <itemtemplate>
      <asp:imagebutton id="imgThumb" runat="server" 
         style="border: 1px inset" width=75 />
   </itemtemplate>

4. Lastly, add code to handle the navigation.

   NOTE: While the MultiView includes support for view navigation without coding, that option only works with buttons added to the View object itself.

   Basically in this example, when any image in the DataList on the thumbnails view is clicked, the handler simply invokes the SetActiveView method of the MultiView object, showing the zoom view. Vice-versa, clicking on the image in the zoom view activates the thumbnails view.

   void showViewZoom ( object src, DataListCommandEventArgs e ) {
      ... some code omitted for clarity ...
      mvImages.SetActiveView ( viewZoom );
   }
   
   void showViewThumbs ( object src, EventArgs e ) {
      mvImages.SetActiveView ( viewThumbs );
   }

MultiView Navigation Using SetActiveView Run Sample | View Source

The links to the sections below illustrate further ways of implementing navigation within a MultiView control.

Nesting MultiView Controls   Using MultiView Controls in a Templated Control