CODEWITHSUNDEEP
c#jqueryasp.net-mvcjquery-uirazor
Anandaraj
Anandaraj

Reputation: 161

Using tabs in asp.net mvc with jquery ui

I am trying to create tabs in my mvc application using jquery ui.

I tried the following code:

<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#tabs').tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Exploded pie slice</a></li>
<li><a href="#tabs-2">Normal pie chart</a></li>
</ul>
<div id="tabs-1">@(Html.Partial("PartialView1"))</div>
<div id="tabs-2">@(Html.Partial("PartialView2"))</div>
</div>

I saw something like the above code in jquery ui demo. Please advice me what I'm missing in my code because I only get two links instead of tabs and my two partial view pages are displayed in the index page.

Thanks, Anandaraj

Upvotes: 2

Views: 4011

Answers (1)

Mathew Thompson
Mathew Thompson

Reputation: 56429

You haven't included the jQuery UI CSS file.

Either use the default skin, or pick one, or even build your own.

Bear in mind that you'll need all the images too, so follow my second link to download the whole theme (either an existing one or one you have built).

Upvotes: 3

Related Questions