How to create a ASP MVC 3 page with multiple sub Tabs

I'm new to ASP MVC and struggling through it.  I have a situation that requires pages with sub tabs.

I'm using ASP MVC 3

Eg:

The main page has 4 tabs.  Each tab will then have 5-6 sub tabs which display data in grids or entry boxes where the user enters info.

Main Page:

Using the MVC music store tutorial as the example.

Home     Store     Admin

Store
     Country (sub tab 1)
     Rock (sub tab 2)
     Clasical (sub tab 3)
     Jazz (sub tab 3)
     Blues (sub tab 4)


     Country (sub tab)
          Grid displaying all titles
           Buttons for actions
     
     Rock (sub tab)
          text box for entry
          Grid displaying titles

Rather than post the code I've provided the link to the code that I'm trying to implement.
http://www.kevgriffin.com/using-jquery-tabs-and-asp-net-mvc-partial-views-for-ajax-goodness/

This is exactly the display and effect I'm looking for, however I can't get it to work for the life of me, I suspect it has something to do with the jQuery version.  I don't know enough about ASP to get this to work or how to set the reference to the jQuery version mentioned in the article.

Could someone please help me to understand how to fix the jQuery reference and get this sample working.

Or, If anyone has another solution that would give me what I need I'm open to ideas and new examples.
Steve7423Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
muh_abbasConnect With a Mentor Commented:
Hi Steve7423,

The best option for you is to use J Query tabs.
You can download from http://jqueryui.com/tabs/


Regards,
Abbas
0
 
Steve7423Author Commented:
Thanks muh_abbas.  Sorry for the late response, I have a full plate.

At the risk of appearing ignorant, once I download and unzip the JQuery files, is there an install or setup package I need to run?  How do I get started with JQuery, referencing the libraries and such in my project?  could you give me a quick lesson to get me going.

also, where can I find some samples on how to use these components?
0
 
Steve7423Author Commented:
muh_abbas:

I've downloaded the jquery-ui-1.10.3.custom.zip from the download builder on the JQuery site.  also downloaded jquery-1.9.1.js, jquery-1.9.1.min.js, jquery-1.9.1-vsdoc.js

The problem is that the tabs display as links, not tabs, why ??  how can I fix this?

The _Layout file:

<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="../../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
      <script src="../../Scripts/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
      <script src="../../Scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <script>          $(function () { $("#tabs").tabs(); });  </script>
</head>


<body>

<div id="tabs">  
        <ul>    
            <li><a href="#tabs-1">Nunc tincidunt</a></li>    
            <li><a href="#tabs-2">Proin dolor</a></li>    
            <li><a href="#tabs-3">Aenean lacinia</a></li>  
            </ul>  
                <div id="tabs-1">    
                    <p>Some text for tab 1.</p>  
                </div>  <div id="tabs-2">    
                    <p>Some text for tab 2.</p>  
                </div>  <div id="tabs-3">    
                    <p>Some text for tab 3.</p>  
                </div>
       </div>
</body>
0
 
Steve7423Author Commented:
Tab display as links
0
All Courses

From novice to tech pro — start learning today.