Thursday, July 11, 2013

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.

No comments:

Post a Comment