.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Post New Resource Bookmark and Share   

Tabs in ASP.NET

Posted By:Ashutosh Jha       Posted Date: April 28, 2014    Points: 200    Category:    URL: http://www.dotnetspark.com  

HEre i will show how we can use tab in ASP.NET. This can be integrated in any .net applications.
 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tabs.aspx.cs" Inherits="tabs" %>
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
  
    <title>HTML Tab Container</title>
    <script src="../js/ver_tabs.js" type="text/javascript"></script>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/jquery.tabify.js" type="text/javascript"></script>
  
    <style type="text/css">
        .viewTabs
        {
            padding0;
            clearboth;
        }
        .viewTabs li
        {
            displayinline;
        }
        .viewTabs li a
        {
            background#FFF;
            margin0 5px 0 0;
            padding10px;
            floatleft;
            border1px solid #DDD;
            border-bottomnone;
            text-decorationnone;
            color#000;
            font-weightbold;
            font-size12px;
        }
        .viewTabs li.active a
        {
            background#15acdb;
            color#FFF;
        }
        .content
        {
            floatleft;
            clearboth;
            border1px solid #DDD;
            background#fff;
            padding1% 2%;
            width100%;
        }
    </style>
   
    <script type="text/javascript">
        $(document).ready(function () {
        //UL class id
            $('#Details').tabify();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       
        <ul id="Details" class="viewTabs">
            <li class="active"><a href="#Tab1">Tab1</a></li>
            <li><a href="#Tab2">Tab2</a></li>
            <li><a href="#Tab3">Tab3</a></li>
            <li><a href="#Tab4">Tab4</a></li>
        </ul>


        <div id="Tab1" class="content">
            <table style="width: 50%; border: none;">
                <tr>
                    <td>
                        First Name:
                    </td>
                    <td>
                        <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        Second Name:
                    </td>
                    <td>
                        <asp:TextBox ID="txtSecondName" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        City:
                    </td>
                    <td>
                        <asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
                    </td>
                </tr>
            </table>
        </div>
        <div id="Tab2" class="content" runat="server">
            <table style="width: 50%; border: none;">
                <tr>
                    <td>
                        First Name:
                    </td>
                    <td>
                        Ashutosh Jha
                    </td>
                </tr>
                <tr>
                    <td>
                       Place
                    </td>
                    <td>
                        Delhi
                    </td>
                </tr>
                <tr>
                    <td>
                        Country:
                    </td>
                    <td>
                        India
                    </td>
                </tr>
            </table>
        </div>
        <div id="Tab3" class="content" runat="server">
            Tab 3 sections<br />
Ashutosh Jha
        </div>
        <div id="Tab4" class="content" runat="server">
           Tab 4 area.
   &am


     

Further Readings:

    Responses

    No response found. Be the first to respond this post

    Post Comment

    You must Sign In To post reply
    Here

    Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend