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

AjaxControl Toolkit TabContainer Control in ASP.Net

When you click database tab then database page will open

AjaxControl Toolkit TabContainer Control in ASP.Net

 

  Modified On Mar-22-2018 07:27:27 AM

Leave Comment