MultiView hides and display different areas of a page, useful to create a tabbed page : MultiView « ASP.net Controls « ASP.NET Tutorial
- ASP.NET Tutorial
- ASP.net Controls
- MultiView
The MultiView control supports the following properties (this is not a complete list):
ActiveViewIndex: select the View control by index.
Views: return the list of View controls.
GetActiveView: get the selected View control.
SetActiveView: select the active view.
ActiveViewChanged: Raised when a new View control is selected.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
int index = Int32.Parse(e.Item.Value);
MultiView1.ActiveViewIndex = index;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>MultiView Tabs</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu
id="Menu1"
Orientation="Horizontal"
StaticMenuItemStyle-CssClass="tab"
StaticSelectedStyle-CssClass="selectedTab"
CssClass="tabs"
OnMenuItemClick="Menu1_MenuItemClick"
Runat="server">
<Items>
<asp:MenuItem Text="Tab 1" Value="0" Selected="true" />
<asp:MenuItem Text="Tab 2" Value="1" />
<asp:MenuItem Text="Tab 3" Value="2" />
</Items>
</asp:Menu>
<div class="tabContents">
<asp:MultiView
id="MultiView1"
ActiveViewIndex="0"
Runat="server">
<asp:View ID="View1" runat="server">
<br />This is the first view
<br />This is the first view
<br />This is the first view
<br />This is the first view
</asp:View>
<asp:View ID="View2" runat="server">
<br />This is the second view
<br />This is the second view
<br />This is the second view
<br />This is the second view
</asp:View>
<asp:View ID="View3" runat="server">
<br />This is the third view
<br />This is the third view
<br />This is the third view
<br />This is the third view
</asp:View>
</asp:MultiView>
</div>
</div>
</form>
</body>
</html>