MultiView and View controls allow you to divide a page's content into different groups and display only one group at a time. Each view control manages the contents of a group, and all view controls are included in a MultiView control.
A multiview control is only responsible for displaying one view at a time. The view display is called the active view.
The syntax of the MultiView control is:
<asp:MultView ID= "MultiView1" runat= "server"></asp:MultiView>The syntax of View control is:
<asp:View ID= "View1" runat= "server"></asp:View>However, the control cannot exist on its own. If you try to use it alone you will get an error. It is always used with a multi-view controller:
<asp:MultView ID= "MultiView1" runat= "server"> <asp:View ID= "View1" runat= "server"> </asp:View></asp:MultiView>Views and multiview controls are derived from the Control class. and inherits all its properties, methods and events. The most important property of a view control is the Visible Boolean property, which sets the visibility of a view.
Multiview controls have the following important features:
| property | describe |
|---|---|
| Views | A view control that integrates multiple views. |
| ActiveViewIndex | The zero-based index that represents the active view. If no view is active, the index value is -1. |
The CommandName properties of the button controls related to the navigation of the MultiView control are associated with some related fields of the MultiView control.
For example, if a button control's CommandName value is related to navigation of multiple views, it will automatically navigate to the next view when the button is clicked.
The following table shows the default command names for the above properties:
| element | describe |
|---|---|
| NextViewCommandName | next view |
| PreviousViewCommandName | Previous view |
| SwitchViewByIDCommandName | SwitchViewByID |
| SwitchViewByIndexCommandName | SwitchViewByIndex |
Important methods of multi-viewpoint control are:
| method | describe |
|---|---|
| SetActiveview | Set active view |
| GetActiveview | Retrieve active view |
Every time the view changes, the page is posted back to the server and some events are fired. Some important events are:
| event | describe |
|---|---|
| ActiveViewChanged | Triggered when a view changes |
| Activate | Triggered by active view |
| Deactivate | Triggered by inactive view |
In addition to the properties, methods, and events mentioned above, multiview controls inherit members of the control and object classes.
The sample page has three views. Each view's navigation view has two buttons.
The code for the content file is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="multiviewdemo._Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title> Untitled Page </title> </head> <body> <form id="form1" runat="server"> <div> <h2>MultiView and View Controls</h2> <asp:DropDownList ID="DropDownList1" runat="server" onselectedindexchanged="DropDownList1_SelectedIndexChanged"> </asp:DropDownList> <hr /> <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="2" onactiveviewchanged="MultiView1_ActiveViewChanged" > <asp:View ID="View1" runat="server"> <h3>This is view 1</h3> <br /> <asp:Button CommandName="NextView" ID="btnnext1" runat="server" Text = "Go To Next" /> <asp:Button CommandArgument="View3" CommandName="SwitchViewByID" ID="btnlast" runat="server" Text ="Go To Last" /> </asp:View> <asp:View ID="View2" runat="server"> <h3>This is view 2</h3> <asp:Button CommandName="NextView" ID="btnnext2" runat="server" Text = "Go To Next" /> <asp:Button CommandName="PrevView" ID="btnprevious2" runat="server" Text = "Go To Previous View" /> </asp:View> <asp:View ID="View3" runat="server"> <h3> This is view 3</h3> <br /> <asp:Calendar ID="Calender1" runat="server"></asp:Calendar> <br /> <asp:Button CommandArgument="0" CommandName="SwitchViewByIndex" ID="btnfirst" runat="server" Text = "Go To Next" /> <asp:Button CommandName="PrevView" ID="btnprevious" runat="server" Text = "Go To Previous View" /> </asp:View> </asp:MultiView> </div> </form> </body></html>Note the following:
MultiView.ActiveViewIndex determines which views will be displayed. This is the only view rendered on the page. The default value of ActiveViewIndex when no view is displayed is -1. Since ActiveViewIndex is defined as 2 in the example, it displays the third view when executed.
