Ajax Tab Container extender example in Asp.Net or how to use Ajax Tab Container extender in Asp.Net.

Ajax Tab Container extender example in Asp.Net or how to use Ajax Tab Container extender in Asp.Net. Introducation

In this Example Iam Going to Explain  how to use Ajax Tab Container Control in asp.net

If you want to check all the example in my site please check this link Ajax all extenders examples and also you check my previous example HTML  Tab Container example.

Demo:

Ajax Tab Container extender

 

what is Ajax Tab container extender?

TabContainer is an ASP.NET AJAX Control which creates a set of Tabs that can be used to organize page content. A TabContainer is a host for a number of TabPanel controls. 


Each TabPanel defines its HeaderText or HeaderTemplate as well as a ContentTemplate that defines its content. The most recent tab should remain selected after a postback, and the Enabled state of tabs should remain after a postback as well.

 When Ever You Want to Use Ajax Controls in your website First you need Add AjaxControlToolkit reference to your application

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

You can Change TagPrefix Also,Some Exaples  tagPrefix="ajax", tagPrefix="cc1",tagPrefix="asp"

and also You can add ToolkitScriptManager Control under <form> Tag


<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajax:ToolkitScriptManager>

Your Aspx Page Code Should be like this :

<head runat="server">
    <title>Tab  Container</title>
</head>
<body>
    <form id="form1" runat="server">
    <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </ajax:ToolkitScriptManager>
    <div>
        <ajax:TabContainer ID="TabContainer1" runat="server">
            <ajax:TabPanel ID="tbpnluser" runat="server">
                <HeaderTemplate>
                    Registration
                </HeaderTemplate>
                <ContentTemplate>
                    <table>
                        <tr>
                            <b>Registration Form</b>
                        </tr>
                        <tr>
                            <td>
                                UserName:
                            </td>
                            <td>
                                <asp:TextBox ID="txtuser" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Password:
                            </td>
                            <td>
                             <asp:TextBox ID="txtpwd" runat="server" TextMode="Password">                                 </asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                FirstName:
                            </td>
                            <td>
                                <asp:TextBox ID="txtfname" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                LastName:
                            </td>
                            <td>
                                <asp:TextBox ID="txtlname" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                            </td>
                            <td>
                                <asp:Button ID="btnsubmit" runat="server" Text="Save" />
                            </td>
                        </tr>
                    </table>
                </ContentTemplate>
            </ajax:TabPanel>
            <ajax:TabPanel ID="tbpnlusrdetails" runat="server">
                <HeaderTemplate>
                    Profile
                </HeaderTemplate>
                <ContentTemplate>
                    <table>
                        <tr>
                            <b>User Details</b>
                        </tr>
                        <tr>
                            <td>
                                UserName:
                            </td>
                            <td>
                                <b>Sairam VVS</b>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                FirstName:
                            </td>
                            <td>
                                <b>sai</b>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                LastName:
                            </td>
                            <td>
                                <b>Ram</b>
                            </td>
                        </tr>
                    </table>
                </ContentTemplate>
            </ajax:TabPanel>
            <ajax:TabPanel ID="tbpnljobdetails" runat="server">
                <HeaderTemplate>
                    Job Information
                </HeaderTemplate>
                <ContentTemplate>
                    <table>
                        <tr>
                            <b>Job Details</b>
                        </tr>
                        <tr>
                            <td>
                                Job Type:
                            </td>
                            <td>
                                <b>Software</b>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Industry:
                            </td>
                            <td>
                                <b>IT</b>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Designation:
                            </td>
                            <td>
                                <b>Software Engineer</b>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Company:
                            </td>
                            <td>
                                <b>Sterlings</b>
                            </td>
                        </tr>
                    </table>
                    :
                </ContentTemplate>
            </ajax:TabPanel>
        </ajax:TabContainer>
    </div>
    </form>
</body>
</html>