Tab Control in Asp.Net

Scenerio:

I need your help in designing tab control in asp.net.My requirement is I need a tab control in asp.net(C#) like  for example goto my computer ,right click c drive and select properties.we get tabs like general,security etc.......

like that i need to design one tab control(no need of any rightclick) in my web page and the database table columns should come as tabs and inseide the tab data of that particular column should come.

 

Example:Employee master

tab1:Employee name.........his name in the tab

tab2:Age.............his age

tab3:Address........his address

 

Solution:

 

You can do this using a simple div

<style type="text/css">

.tabs
        {
            position: relative;
            height: 20px;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .tabs li
        {
            display: inline;
        }
        .tabs a
        {
            height: 16px;
            background: #c2ceda;
            position: relative;
            padding: 8px;
            font-size: 11px;
            font-weight: bold;
            color: #fff;
            font-family: Verdana, arial, helvetica, sans-serif;
            text-decoration: none;
        }
        .tabs a.tab-visited
        {
            background-color: #6898d0;
            border-right: 1px solid #fff;
            font-size: 11px;
            font-weight: bold;
            color: #fff;
            font-family: Verdana, arial, helvetica, sans-serif;
            text-decoration: none;
        }
        .tabs a:hover
        {
            background-color: #80A0C6;
            font-size: 11px;
            font-weight: bold;
            color: #fff;
            font-family: Verdana, arial, helvetica, sans-serif;
            text-decoration: none;
        }
        .tabs a.tab-active
        {
            background-color: #6898d0;
            border-right: 1px solid #fff;
            font-size: 11px;
            font-weight: bold;
            color: #fff;
            font-family: Verdana, arial, helvetica, sans-serif;
            text-decoration: none;
        }
</style>
          
<div id="menuTabs">
                <ul id="tabs">
                    <li id="tab1">
                       <a href="#" onclick="javascript:showPanel1()">
                       <asp:Label ID="empName"></asp:Label>
                       </a>
                    </li>
                    <li id="tab2">
                        <a href="#" onclick="javascript:showPane2()">
                        <asp:Label ID="empAge"></asp:Label>
                        </a>
                   </li>
                </ul>
</div>
<div id="pane1"></div>

<div id="pane2" style="display:'none'"></div>

 

 

 

 

 

 

 

 

 

Now bind the table columns to each label

 

If you use Ajax Tab control if it contains long elapsed methods to invok asynchronously then exception throws. Rather using Ajax Tab control better use infragestic or simple div based tabs.