Asp-Net Components : Tab

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

Using TabSeparator Controls with a TabStrip Control (VB.net)

<%@ Page Language=VB Debug=true %>
<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>
<%@ Register TagPrefix="IEControls" 
    Namespace="Microsoft.Web.UI.WebControls" 
    Assembly ="Microsoft.Web.UI.WebControls"
%>
<HTML>
<HEAD>
<TITLE>Using TabSeparator Controls with a TabStrip Control</TITLE>
</HEAD>
<BODY LEFTMARGIN="40">
<form runat="server">
<IEControls:tabstrip 
    id="MyTabStrip"
    runat="server"
    forecolor="DarkBlue"
    backcolor="DarkBlue"
    >
    <IEControls:tab 
        id="Tab1"
        runat="server"
        text="&nbspThe first button&nbsp"
        tooltip="Click Me!!!"
    />
    <IEControls:TabSeparator />
    <IEControls:tab 
        id="Tab2"
        runat="server"
        Text="&nbspThe second button&nbsp" 
    />
    <IEControls:TabSeparator />
    <IEControls:tab 
        id="Tab3"
        runat="server"
        Text="&nbspThe third button&nbsp" 
    />
</IEControls:tabstrip>
<BR><BR>
<asp:label
    id="lblMessage"
    runat=server
/>
</form>
</BODY>
</HTML>

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

<%@ 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>

Tab control Demo (C#)

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">

    protected void menuTabs_MenuItemClick(object sender, MenuEventArgs e)
    {
        multiTabs.ActiveViewIndex = Int32.Parse(menuTabs.SelectedValue);
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <style type="text/css">
        html
        {
            background-color:silver;
        }
        .menuTabs
        {
            position:relative;
            top:1px;
            left:10px;
        }
        .tab
        {
            border:Solid 1px black;
            border-bottom:none;
            padding:0px 10px;
            background-color:#eeeeee;
        }
        .selectedTab
        {
            border:Solid 1px black;
            border-bottom:Solid 1px white;
            padding:0px 10px;
            background-color:white;
        }
        .tabBody
        {
            border:Solid 1px black;
            padding:20px;
            background-color:white;
        }
    </style>
    <title>Menu Tab Strip</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <asp:Menu
        id="menuTabs"
        CssClass="menuTabs"
        StaticMenuItemStyle-CssClass="tab"
        StaticSelectedStyle-CssClass="selectedTab"
        Orientation="Horizontal"
        OnMenuItemClick="menuTabs_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="tabBody">
    <asp:MultiView
        id="multiTabs"
        ActiveViewIndex="0"
        Runat="server">
        <asp:View ID="view1" runat="server">
        
        Contents of first tab
        
        </asp:View>
        <asp:View ID="view2" runat="server">
        
        Contents of second tab
        
        </asp:View>
        <asp:View ID="view3" runat="server">
        
        Contents of third tab
        
        </asp:View>
    </asp:MultiView>    
    </div>
    
    </div>
    </form>
</body>
</html>

tab control (VB.net)

<%@ Page Language=VB Debug=true %>
<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>
<%@ Register TagPrefix="IEControls" 
    Namespace="Microsoft.Web.UI.WebControls" 
    Assembly ="Microsoft.Web.UI.WebControls"
%>
<script runat=server>
</SCRIPT>
<HTML>
<HEAD>
<TITLE>TabStrip and MultiPage Controls Sample Page</TITLE>
</HEAD>
<BODY>
<form runat="server">
<Font Face="Tahoma">
<IEControls:TabStrip 
    id="MyTabStrip"
    runat="server"
    TargetID="MyMultiPage"
    Orientation="Horizontal"
    ForeColor="DarkBlue"
    BackColor="DarkBlue"
    >
    <IEControls:Tab 
        id="Tab1"
        runat="server"
        Text="Wizard Step 1" 
    />
    <IEControls:TabSeparator/>
    <IEControls:Tab 
        id="Tab2"
        runat="server"
        Text="Wizard Step 2" 
    />
    <IEControls:TabSeparator />
    <IEControls:Tab 
        id="Tab3"
        runat="server"
        Text="Wizard Step 3" 
    />
    <IEControls:TabSeparator/>
</IEControls:TabStrip>
<IEControls:MultiPage 
    id="MyMultiPage"
    runat="server"
    BorderStyle=9
    BorderWidth=3
    BorderColor="DarkBlue"
    >
    <IEControls:PageView>
        <BR><B>Wizard Step 1: </B><BR>&nbsp
    </IEControls:PageView>
    <IEControls:PageView>
        <BR><B>Wizard Step 2: </B><BR>&nbsp
    </IEControls:PageView>
    <IEControls:PageView>
        <BR><B>Wizard Step 3: </B><BR>&nbsp
    </IEControls:PageView>
</IEControls:MultiPage>
</Font>
</Form>
</BODY>
</HTML>

Creating a Basic TabStrip Control (VB.net)

<%@ Page Language=VB Debug=true %>
<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>
<%@ Register TagPrefix="IEControls" 
    Namespace="Microsoft.Web.UI.WebControls" 
    Assembly ="Microsoft.Web.UI.WebControls"
%>
<HTML>
<HEAD>
<TITLE>Creating a Basic TabStrip Control</TITLE>
</HEAD>
<BODY LEFTMARGIN="40">
<form runat="server">
<IEControls:TabStrip 
    id="MyTabStrip"
    runat="server"
    forecolor="DarkBlue"
    backcolor="DarkBlue"
    width="20%"
    >
</IEControls:TabStrip>
</form>
</BODY>
</HTML>

Using Images on a TabStrip Control (VB.net)

<%@ Page Language=VB Debug=true %>
<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>
<%@ Register TagPrefix="IEControls" 
    Namespace="Microsoft.Web.UI.WebControls" 
    Assembly ="Microsoft.Web.UI.WebControls"
%>
<script runat=server>
Sub Page_Load(ByVal Sender as Object, ByVal E as EventArgs)

End Sub
</SCRIPT>
<HTML>
<HEAD>
<TITLE>Using Images on a TabStrip Control</TITLE>
</HEAD>
<BODY LEFTMARGIN="40">
<form runat="server">
<IEControls:tabstrip 
    id="MyTabStrip"
    runat="server"
    >
    <IEControls:tab 
        id="Tab1"
        runat="server"
        text="&nbspThe first button&nbsp"
        defaultimageurl="3.ico"
        selectedimageurl="smile.ico"
        hoverimageurl="4.ico"
    />
    <IEControls:TabSeparator />
    <IEControls:tab 
        id="Tab2"
        runat="server"
        Text="&nbspThe second button&nbsp" 
        defaultimageurl="3.ico"
        selectedimageurl="smile.ico"
        hoverimageurl="4.ico"
    />
    <IEControls:TabSeparator />
    <IEControls:tab 
        id="Tab3"
        runat="server"
        Text="&nbspThe third button&nbsp" 
        defaultimageurl="3.ico"
        selectedimageurl="smile.ico"
        hoverimageurl="4.ico"
    />
</IEControls:tabstrip>
<BR><BR>
<asp:label
    id="lblMessage"
    runat=server
/>
</form>
</BODY>
</HTML>

Using a TabStrip Control with a MultiPage Control (VB.net)

<%@ Page Language=VB Debug=true %>
<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>
<%@ Register TagPrefix="IEControls" 
    Namespace="Microsoft.Web.UI.WebControls" 
    Assembly ="Microsoft.Web.UI.WebControls"
%>
<HTML>
<HEAD>
<TITLE>Using a TabStrip Control with a MultiPage Control</TITLE>
</HEAD>
<BODY LEFTMARGIN="40">
<form runat="server">
<IEControls:tabstrip 
    id="MyTabStrip"
    runat="server"
    targetid="MyMultiPage"
    >
    <IEControls:tab 
        id="Tab1"
        runat="server"
        text="&nbspName&nbsp"
        tooltip="Click Me!!!"
    />
    <IEControls:TabSeparator />
    <IEControls:tab 
        id="Tab2"
        runat="server"
        Text="&nbspEmail Address&nbsp" 
    />
    <IEControls:TabSeparator />
    <IEControls:tab 
        id="Tab3"
        runat="server"
        Text="&nbspPassword&nbsp" 
    />
</IEControls:tabstrip>
<IEControls:multipage 
    id="MyMultiPage"
    runat="server"
    selectedindex=0
    >
    <IEControls:PageView
        id="pv1"
        runat=server
        font-name="Arial"
        font-bold=True
        forecolor="yellow"
        backcolor="darkred"
    >
        Enter your name:<BR>
        <asp:textbox 
        id="txtName" 
        runat=server 
        />    
        <BR>
    </IEControls:PageView>    
    <IEControls:PageView
        id="pv2"
        runat=server
        font-name="Arial"
        font-bold=True
        forecolor="darkred"
        backcolor="yellow"
    >
        Enter your email address:<BR>
        <asp:textbox 
        id="txtEmail" 
        runat=server 
        />    
    </IEControls:PageView>    
    <IEControls:PageView
        id="pv3"
        runat=server
        font-name="Arial"
        font-bold=True
        forecolor="darkblue"
        backcolor="green"
    >
        Enter your password:<BR>
        <asp:textbox 
        id="txtPassword" 
        runat=server 
        />    
    </IEControls:PageView>    
</IEControls:multipage>
</form>
</BODY>
</HTML>

Setting the Orientation of a TabStrip Control (VB.net)

<%@ Page Language=VB Debug=true %>
<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>
<%@ Register TagPrefix="IEControls" 
    Namespace="Microsoft.Web.UI.WebControls" 
    Assembly ="Microsoft.Web.UI.WebControls"
%>
</SCRIPT>
<HTML>
<HEAD>
<TITLE>Setting the Orientation of a TabStrip Control</TITLE>
</HEAD>
<BODY LEFTMARGIN="40">
<form runat="server">
<IEControls:TabStrip 
    id="MyTabStrip"
    runat="server"
    orientation="Horizontal"
    >
</IEControls:TabStrip>
</form>
</BODY>
</HTML>

TabStrip Control: tab clicked event (VB.net)

<%@ Page Language=VB Debug=true %>
<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>
<%@ Register TagPrefix="IEControls" 
    Namespace="Microsoft.Web.UI.WebControls" 
    Assembly ="Microsoft.Web.UI.WebControls"
%>
<script runat=server>
Sub TabStrip_Clicked(Sender As Object, E As EventArgs)
    lblMessage.Text = "You clicked tab number " _
        & MyTabStrip.SelectedIndex & "."
End Sub
</SCRIPT>
<HTML>
<HEAD>
<TITLE>Creating a Basic TabStrip Control</TITLE>
</HEAD>
<BODY LEFTMARGIN="40">
<form runat="server">
<IEControls:tabstrip 
    id="MyTabStrip"
    runat="server"
    forecolor="DarkBlue"
    backcolor="DarkBlue"
    onselectedindexchange="TabStrip_Clicked"
    autopostback="True"
    >
    <IEControls:tab 
        id="Tab1"
        runat="server"
        text="&nbspThe first button&nbsp"
        tooltip="Click Me!!!"
    />
    <IEControls:tab 
        id="Tab2"
        runat="server"
        Text="&nbspThe second button&nbsp" 
    />
    <IEControls:tab 
        id="Tab3"
        runat="server"
        Text="&nbspThe third button&nbsp" 
    />
</IEControls:tabstrip>
<BR><BR>
<asp:label
    id="lblMessage"
    runat=server
/>
</form>
</BODY>
</HTML>