Friday, July 13, 2012

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.

No comments:

Post a Comment