articles

Ajax Toolkit TabContainer Control in ASP.Net

Ajax Toolkit TabContainer Control in ASP.Net

Pushpendra Singh 16911 02-Dec-2010

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

Ajax Toolkit TabContainer Control in ASP.Net

When you click database tab then database page will open

Ajax Toolkit TabContainer Control in ASP.Net

 


Updated 04-Mar-2020

Leave Comment

Comments

Liked By