Home > DeveloperSection > Beginner > Ajax Toolkit TabContainer Control in ASP.Net

Ajax Toolkit TabContainer Control in ASP.Net


AJAX AJAX 
Ratings:
0 Comment(s)
 9560  View(s)
Rate this:

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

 


Don't want to miss updates? Please click the below button!

Follow MindStick