Use asp:Menu and asp:MultiView to create tab control (C#) : Tab « Components « ASP.Net






Use asp:Menu and asp:MultiView to create tab control (C#)

/*
ASP.NET 2.0 Unleashed (Unleashed) (Hardcover)
by Stephen Walther 

# Publisher: Sams; Bk&CD-Rom edition (June 6, 2006)
# Language: English
# ISBN: 0672328232
*/

<%@ Page Language="C#" %>

<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">
    <style type="text/css">
        html
        {
            background-color:silver;
        }
        .tabs
        {
            position:relative;
            top:1px;
            left:10px;
        }
        .tab
        {
            border:solid 1px black;
            background-color:#eeeeee;
            padding:2px 10px;
        }
        .selectedTab
        {
            background-color:white;
            border-bottom:solid 1px white;
        }
        .tabContents
        {
            border:solid 1px black;
            padding:10px;
            background-color:white;
        }
    </style>
    <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>
       
           
       








Related examples in the same category

1.Tab control Demo (C#)
2.tab control (VB.net)
3.Creating a Basic TabStrip Control (VB.net)
4.Using Images on a TabStrip Control (VB.net)
5.Using a TabStrip Control with a MultiPage Control (VB.net)
6.Setting the Orientation of a TabStrip Control (VB.net)
7.TabStrip Control: tab clicked event (VB.net)
8.Using TabSeparator Controls with a TabStrip Control (VB.net)