How to use TabContainer Ajax Control in Asp.net OR TabContainer Ajax Control Example

Introduction: In this article I have try to explain how we can use the TabContainer Ajax control in Asp.net.

Description:

In the last article I have explained How to install Ajax control Toolkit in Visual Studio, How to useAutoCompleteExtender Ajax control in Asp.net, How to Upload multiple filesusing AjaxFileUpload and save path to database in Asp.net.

We use the TabContainer Control to show/display the a lot of information on one page. TabContainer contain the set of Tabs. TabPanel define HeaderText and ContentTemplate.

 Add a new webform to project. Drag and drop the TabContainer Control from Toolbox. Design your page as shown below:

    <div style=" width:30%">

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

        </asp:ScriptManager>

        <asp:TabContainer ID="TabContainer1" runat="server">

        <asp:TabPanel ID="tab1" runat="server" HeaderText="Employee Detail">

        <ContentTemplate>

        <table align="right"><tr><td><img src="Upload_Images/Thumb/ff9eb48c-e83e-4d55-9d86-6dd405421df3.png" /></td></tr></table>

        <table>

        <tr><td>Employee Name:</td><td>Rakesh</td></tr>

        <tr><td>Address:</td><td>#1219 Sec 40B CHD</td></tr>

        <tr><td>City:</td><td>Chandigarh</td></tr>

        <tr><td>Phone No.:</td><td>1523451245</td></tr>

        </table>

        </ContentTemplate>

        </asp:TabPanel>

        <asp:TabPanel ID="tab2" runat="server" HeaderText="Employee Qualification">

        <ContentTemplate>

        <table>

        <tr><td>Professional Qualification:</td><td>B.Tech.</td></tr>

        <tr><td>College Name:</td><td>ABCDE</td></tr>

        <tr><td>University:</td><td>ABCD</td></tr>

        <tr><td>Percentage:</td><td>85%</td></tr>

        </table>

        </ContentTemplate>

        </asp:TabPanel>

        <asp:TabPanel ID="tab3" runat="server" HeaderText="Job Description">

        <ContentTemplate>

         <table>

        <tr><td>Desgination:</td><td>Manager</td></tr>

        <tr><td>Industry:</td><td>Mechanical</td></tr>

        <tr><td>Experience:</td><td>3 Years</td></tr>

        <tr><td>Nature of Duty:</td><td>Manegement of Engineer Division</td></tr>

        </table>

        </ContentTemplate>

        </asp:TabPanel>

        </asp:TabContainer>

    </div>

Run the project and check the result.

Is it helpful?

If yes post your comment to admire my work. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.