Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2013-05-13
4
Medium Priority
?
1,785 Views
Last Modified: 2013-07-18
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.
0
Comment
Question by:Steve7423
  • 3
4 Comments
 
LVL 1

Accepted Solution

by:
muh_abbas earned 2000 total points
ID: 39163775
Hi Steve7423,

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


Regards,
Abbas
0
 

Author Comment

by:Steve7423
ID: 39171877
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
 

Author Comment

by:Steve7423
ID: 39188418
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
 

Author Comment

by:Steve7423
ID: 39188674
Tab display as links
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
Screencast - Getting to Know the Pipeline
Is your OST file inaccessible, Need to transfer OST file from one computer to another? Want to convert OST file to PST? If the answer to any of the above question is yes, then look no further. With the help of Stellar OST to PST Converter, you can e…
Suggested Courses

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question