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 !

About Yasser Shaikh

Hello, I am a Web Dev, employed with Media.Net where I primarily work on ASP.NET MVC and Angular JS based developement.

Questions? Enquiries? Comments? Or even just want to say “Hi” to me, you are welcome to all of that. Just drop me a message at “mail@yassershaikh.com” and I’ll get back to you as soon as possible.

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>