Introduction to Jquery UI Tab with ASP.NET MVC

Step 1: Download

Before we start with how to integrate and use Jquery UI Tabs with ASP.NET MVC 2/3/4. Let me quickly list out the JavaScript libraries you will need to download.

  • jquery-1.4.4.min.js – (this you mostly will be having in your project)
  • jquery-ui-1.8.24.min.js
  • jquery-ui.css

You can download these files from this link, or better if you could use this Nuget extension(it goes by the name of : jQuery UI (Combined Library) 1.9.0).

Step 2: Import

So once you have the files with you add them to your view

<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />  
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>  
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.min.js")" type="text/javascript"></script>  

Step 3: Html Code

In the ‘li’ tags you need to define the tab header and for each tab header a tab content div exists, the code below is pretty self explanatory.

<div id="tabs">

<ul>  
<li><a href="#tabs-1">Tab Header 1</a></li>  
<li><a href="#tabs-2">Tab Header 2</a></li>  
<li><a href="#tabs-3">Tab Header 3</a></li>  
</ul>

<div id="tabs-1">  
Content for Tab 1 goes here.<br/>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,  
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  
</div>

<div id="tabs-2">  
Content for Tab 2 goes here.<br/>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,  
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  
</div>

<div id="tabs-3">  
Content for Tab 3 goes here.<br/>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,  
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  
</div>

</div>

Step 4: Final Touch – Jquery call to tabs()

<script type="text/javascript">  
$(function () {  
$("#tabs").tabs();  
});  
</script>  

Output:

Further Reading :

Jquery UI Tabs

Jquery UI Tab API/Documentation

Tabs Using JQuery For an ASP.NET MVC Application

Hope you found this article useful :) Cheers !

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>