How to use TabContainer Ajax Control in Asp.net OR TabContainer Ajax Control Example - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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.
TabContainer

Description:

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.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon