The TabContainer is an ASP.NET AJAX Control which creates a set of Tabs that can be used to organize page content.
Each Tab Panel defines its HeaderTemplate as well as a ContentTemplate that defines its content.
TabContainer Properties:
- ActiveTabIndex - The first tab to show
- Height - sets the height of the body of the tabs.
- Width - sets the width of the body of the tabs
- ScrollBars - Whether to display scrollbars in the body of the TabContainer
- TabStripPlacement - Whether to render the tabs on top of the container or below (Top, Bottom)
- Enabled - Whether to display the Tab for the Tab Panel by default.
- OnClientClick - The name of a javascript function to attach to the client-side click event of the tab.
- HeaderText - The text to display in the Tab
- HeaderTemplate - A TemplateInstance.Single ITemplate to use to render the header
- ContentTemplate - A TemplateInstance.Single ITemplate to use to render the body
Code:
<%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages.This enables partial-page rendering and Web-service calls.You have to used this if you want to use ajax control toolkit--%>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Width="300px">
<%--Use TabPanel for language --%>
<cc1:TabPanel runat="server" HeaderText="Programming Language" ID="TabPanel1">
<ContentTemplate>
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem>c#</asp:ListItem>
<asp:ListItem>J#</asp:ListItem>
<asp:ListItem>vb</asp:ListItem>
</asp:RadioButtonList>
<asp:Button ID="Button1" runat="server" Text="Save" />
</ContentTemplate>
</cc1:TabPanel>
<%--Use Second TabPanel for database --%>
<cc1:TabPanel runat="server" HeaderText="Database" ID="TabPanel2">
<ContentTemplate>
<asp:RadioButtonList ID="RadioButtonList2" runat="server">
<asp:ListItem>sql server</asp:ListItem>
<asp:ListItem>My sql</asp:ListItem>
<asp:ListItem>oracle</asp:ListItem>
</asp:RadioButtonList>
<asp:Button ID="Button2" runat="server" Text="Save" />
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
Run the project
When you click database tab then database page will open
Leave Comment