Tab Container in ASP.NET

Krishna Garad
12y
33.9k
0
0

Article

Introduction

In this article we will see how to use an Ajax TabContainer in ASP.NET. As you all know, creating a tab in an ASP.Net web application is something critical. To create a control like a tab in our ASP.Net application we can use a muliview control with various views but again same keeping some buttons to change the ActiveViewIndex of multiview control. This causes a postback to the server and for changing the view we only have to wait until the page reloads.

You all know in Windows applications we have a tabcontainer control which is collection of tabpages but in ASP.Net that kind of control is not available but using Ajax we can create a tabcontainer control. So let's start using Ajax TabContainer control.

Step 1:

Create a new website and add a reference to AjaxControlToolkit.

Step 2:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Step 3:

Now first we need to keep one scriptmanger control on our ASP.Net web page so keep it like given below.

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

Step 4:

Now it's time to put the tabcontainer control of Ajax but remember the Ajax TabContainer control doesn't have TabPages where we can add TabPages like in Windows form. In the Ajax TabContainer we have TabPanels like tab pages in a Windows form. So add a TabContainer on the page like below.

<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"
Width="600">
</cc1:TabContainer>

Above we created an empty tabcontainer control that does not have a tabpanel in it. Next we will create tabpages for our tabcontainer.

Step5:

Now create tabpanels for our tabcontainer control like below:

<cc1:TabPanel ID="TabPanel1" runat="server">
<HeaderTemplate></HeaderTemplate>
<ContentTemplate></ContentTemplate>
</cc1:TabPanel>

In the above line you are seen there are two templates; one is a HeaderTemplate and another is a ContentTemplate. In the HeaderTamplate you can provide the header for a TabPanel and in the ContentTemplate you can put any another controls in it.

<cc1:TabPanel ID="TabPanel1" runat="server">
                <HeaderTemplate>
                   Tab Panel One
                </HeaderTemplate>
                <ContentTemplate>
                    <asp:Image ID="Image1" runat="server" Height="140px" ImageUrl="~/dg1.gif"
                        Width="138px" />
                    Tab Panel1
                </ContentTemplate>
            </cc1:TabPanel>

In this way you can create a TabContainer and TabPanels in ASP.Net as well; you can use your own styles for the TabContainer as well as TabPanels. The following is the complete source for a tabcontainer.

<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"
            Width="600">
            <cc1:TabPanel ID="TabPanel1" runat="server">
                <HeaderTemplate>
                   Tab Panel One
                  </HeaderTemplate>
                <ContentTemplate>
                    <asp:Image ID="Image1" runat="server" Height="140px" ImageUrl="~/dg1.gif"
                        Width="138px" />
                    Tab Panel1
                </ContentTemplate>
            </cc1:TabPanel>
            <cc1:TabPanel ID="TabPanel2" runat="server">
                <HeaderTemplate>
                  Tab Panel Two
                 </HeaderTemplate>
                <ContentTemplate>
                    <asp:RadioButtonList ID="RadioButtonList1" runat="server">
                        <asp:ListItem>Items</asp:ListItem>
                        <asp:ListItem>Items</asp:ListItem>
                        <asp:ListItem>Items</asp:ListItem>
                        <asp:ListItem>Itens</asp:ListItem>
                        <asp:ListItem>Items</asp:ListItem>
                       <asp:ListItem>Items</asp:ListItem>
                    </asp:RadioButtonList>
                    <asp:Image ID="Image3" runat="server" Height="89px" ImageUrl="~/dg2.gif"
                        Width="122px" />
                    Tab Panel2
                </ContentTemplate>
            </cc1:TabPanel>
            <cc1:TabPanel ID="TabPanel3" runat="server">
                <HeaderTemplate>
                  Tab Panel Three
                 </HeaderTemplate>
                <ContentTemplate>
                    <asp:Image ID="Image2" runat="server" Height="151px" ImageUrl="~/dg3.gif"
                        Width="106px" />
                    Tab panel 3
                </ContentTemplate>
            </cc1:TabPanel>
       </cc1:TabContainer>