Post
Ask Question

Tabs Using JQuery For an ASP.NET MVC Application


Introduction

In this article we will see how to create tabs for our ASP.Net MVC application. We will create these tabs using a j-query UI. In last article we saw creation of an accordion control for our MVC application using same j-query UI we will create tabs for our MVC application.

To do this we need an additional j-query UI plugin of which you can download from here. After downloading the UI find the scripts listed below in the UI folder.

  1. jquery-1.7.1.js

  2. jquery.ui.core.js

  3. jquery.ui.widget.js

  4. jquery.ui.tabs.js


Now you have all the script files. You can start the work. Here we will see simple and collapsible tabs. So let's start.

Step 1:

First start a new MVC web application project and add a controller with an Index action and add the view associated with the Index action.

Step 2:

First in your view refer to the given js files and CSS in <head>section</head> like below.

<link rel="stylesheet" href="../../Content/themes/base/jquery.ui.all.css">     
<script src="../../Scripts/jquery-1.7.1.js"></script>    
<script src="../../Scripts/jquery.ui.core.js"></script>  
<script src="../../Scripts/jquery.ui.widget.js"></script>         
<script src="../../Scripts/jquery.ui.tabs.js"></script>  
<link rel="stylesheet" href="../../Content/themes/base/demos.css"> 
<script>
    $(function () { $("#tabs").tabs(); });
</script>

In the above line of code we only refer to the CSS and js files of the j-query UI with one script to pass the tab id to the tabs. The js file functions which will make our <div> as tab. The above tab is a simple tab; you can create it as collapsible by passing the collapsible=true property in the above script.

Step 3:

Now we need to create one tab which has an id as tabs and contains subtabs elements so create it like below.

<div id="tabs">         
<ul>                
<li><a href="#tabs-1">Tab One</a></li>                 
<li><a href="#tabs-2">Tab Two</a></li>                 
<li><a href="#tabs-3">Tab Three</a></li>   
</ul>   
<div id="tabs-1">                  
<p>Tab One Content Here.</p>        
</div>
<div id="tabs-2">                  
<p>Tab Two Contents Here</p>       
</div>
<div id="tabs-3">                  
<p>Tab Three Contents Here.</p>    
</div>
</div>

In the above line of code we create our main div which will contain sub divs to display the tab content as well you can see we have given an anchor tag to refer to the sub tabs on the top.

Step 4:

That's it; we have created our tabs. Now just run your application and see the result.

Conclusion

Using J-query we are able to create tabs for our ASP.NET MVC application.


Similar Articles