Categories
Uncategorized

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" />  
http://@Url.Content(
http://@Url.Content(

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 !