Ajax Toolkit TabContainer Control in ASP.Net

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

 

Leave Comment