Pages

October 6, 2014

Tabs in MVC 5 Using JQuery UI



Here is how to implement tabs inside MVC 5 project using jQuery UI library.

Steps To Do It:

1. Install jquery ui (combined library) to get the js files and base theme


These files will be added by the Nuget:
jquery-ui-1.11.1.js
jquery-ui.min-1.11.1.js


2. From jquery UI website, make a custom download including the tabs widget and the desired theme (for example: 'Cupertino ' theme). Then add the file 'jquery-ui.css' to project under '/Contents' folder:


3. Add the following changes inside the <head> section in /Shared/_Layout.cshtml view file (Note that 2 file bundles (/bundles/jquery & /bundles/bootstrap) already exist in layout view but should be moved from bottom to top of the page):

@*moved from bottom of page*@
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

<link rel="stylesheet" href="/Content/jquery-ui.css" />

<script src="/Scripts/jquery-ui-1.11.1.js"></script>

@*style for vertical tabs*@
<style>
.ui-tabs-vertical .ui-tabs-nav {
padding.2em .1em .2em .2em;
floatleft;
width12em;
}
.ui-tabs-vertical .ui-tabs-nav li {
clearleft;
width100%;
border-bottom-width1px !important;
border-right-width0 !important;
margin0 -1px .2em 0;
}
.ui-tabs-vertical .ui-tabs-nav li a {
displayblock;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-bottom0;
padding-right.1em;
border-right-width1px;
border-right-width1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding1em;
floatright;
width40em;
}
</style>


4.  In /Home/index.cshtml view file: replace existing code with code below (where 'TabsSet1' is for horizontal tabs, & 'TabsSet2' is for vertical tabs):

@{  
 ViewBag.Title = "Home Page";
}

<title>@ViewBag.Title</title>

<h2 class="demoHeaders">IBR Testing JQuery UI Tabs</h2>

<div id="TabsSet1">
<ul>
<li><a href="#tabs-test">Test</a></li>
<li><a href="/home/About">About</a></li>
<li><a href="/Home/Contact">Contacts</a></li>
</ul>
<div id="tabs-test">
<h1>Welcome to this test tab</h1>
</div>
</div>

<br/><br/>

<div id="TabsSet2">
<ul>
<li><a href="/Home/About">About Us</a></li>
<li><a href="/Home/Contact">Contacts</a></li>
<li><a href="/Product/Index">Our Products</a></li>
<li><a href="#tabs-5">Tab X</a></li>
<li><a href="#tabs-6">Tab Y</a></li>
</ul>
<div id="tabs-5">
<h1>This is another Main tab</h1>
</div>
<div id="tabs-6">
<h1>Some Tab 2</h1>
</div>
</div>

<script>
$(function () {
$("#TabsSet1").tabs();
$("#TabsSet2").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#TabsSet2 li").removeClass("ui-corner-top").addClass("ui-corner-left");
});
</script>


Notes:
- Tabs can redirect to an MVC action (ex: href="/Home/Contact") or to another div content (ex: href="#tabs-5")
- Extra work required for adjusting the content for vertical tabs when page width is too small because the content div will overlap the tab boundaries.



A useful reference:
http://vizagtechie.blogspot.mx/2012/10/aspnet-mvc-dynamic-tab-using-jquery-ui.html?view=snapshot


15 comments:

  1. Awesome! This was very helpful. Thanks.

    ReplyDelete
  2. Great, thanks! Took me a while but finally got it working, thanks for the help.

    ReplyDelete
  3. Tab1 Tab2 Tab3 .... Tab1 click next display
    Tab1 Tab2 .... Next tab1 click diaply
    Registration form open this type of design code send th err m

    ReplyDelete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. This comment has been removed by a blog administrator.

    ReplyDelete