Mastering Bootstrap Tabs in ASP.NET

Erukulla's February 23, 2016

Bootstrap Tabs are a powerful tool for organizing and presenting content on your web pages. They allow you to create a user-friendly interface by dividing information into distinct panes that users can navigate seamlessly. In this tutorial, we will explore how to implement Bootstrap Tabs in an ASP.NET environment, providing a step-by-step guide along with the necessary HTML and jQuery code.

Bootstrap JQuery Tab in ASP.NET

Understanding Bootstrap Tab Classes

Before diving into the implementation, let's familiarize ourselves with the key Bootstrap tab classes:

Class Description
.nav nav-tabs Creates navigation tabs
.nav-justified Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs are stacked
.tab-content Together with .tab-pane and data-toggle="tab", it makes the tab toggable
.tab-pane Together with .tab-content and data-toggle="tab", it makes the tab toggable

Creating the HTML Page

To set up your HTML page with Bootstrap Tabs, follow these steps:

  1. Include the necessary Bootstrap CSS and JavaScript files.
  2. Create a navigation structure using the .nav-tabs class.
  3. Define tab panes using the .tab-content and .tab-pane classes.

Here's a sample HTML page illustrating the implementation:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="CSS/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="JS/bootstrap.min.js" type="text/javascript"></script>
    <script src="JS/jquery-2.2.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    
     Copy and Paste JQuery Code Here
     
    </script>

</head>
<body>
 <form id="form1" runat="server">
  <div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li id="l1"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li id="l2"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li id="l3"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active">
    Home Tab
    </div>
    <div role="tabpanel" class="tab-pane fade" id="profile">
     Profile Tab
    </div>
    <div role="tabpanel" class="tab-pane fade" id="messages">
     Message Tab
    </div>
  </div>

</div>

</div>
 </form>
</body>
</html>

Implementing jQuery Code for Bootstrap Tab

To enhance the functionality of Bootstrap Tabs, jQuery is used. Below is the jQuery code responsible for handling tab clicks and managing tab content:


<script type="text/javascript">
    
 $(document).ready(function () {

           DisableTabs();

           function DisableTabs() {
               $('#home').hide();
               $('#profile').hide();
               $('#messages').hide();
               $('#home').addClass('active');
           }
           
           $('.nav-tabs li a[href="#home"]').on('click', function (event) {
               DisableTabs();
               var tabid = $(this).attr('href');
               $('#l1').addClass('active');
               $('#l1').siblings().removeClass('active');
               var tabpanel = $('' + tabid).show();
               $(tabpanel).addClass('tab-pane fade in active');
           });
           
            $('.nav-tabs li a[href="#profile"]').on('click', function (event) {
               DisableTabs();
               var tabid = $(this).attr('href');
               $('#l2').addClass('active');
               $('#l2').siblings().removeClass('active');
               var tabpanel = $('' + tabid).show();
               $(tabpanel).addClass('tab-pane fade in active');
           });

           $('.nav-tabs li a[href="#messages"]').on('click', function (event) {
               DisableTabs();
               var tabid = $(this).attr('href');
               $('#l3').addClass('active');
               $('#l3').siblings().removeClass('active');
               var tabpanel = $('' + tabid).show();
               $(tabpanel).addClass('tab-pane fade in active');
           });

       });

This jQuery code ensures that when a tab is clicked, the corresponding tab content is displayed, and the styling is adjusted accordingly.

Conclusion

In this comprehensive guide, we've covered the basics of implementing Bootstrap Tabs in an ASP.NET environment. By utilizing Bootstrap classes and integrating jQuery code, you can create a dynamic and user-friendly tabbed interface for your web applications. Feel free to customize the code according to your specific requirements and explore additional Bootstrap features for further enhancements. Happy coding!

Post a Comment

0 Comments