Solved

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

Posted on 2013-05-13
4
1,610 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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …
Delivering innovative fully-managed cloud services for mission-critical applications requires expertise in multiple areas plus vision and commitment. Meet a few of the people behind the quality services of Concerto.

914 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now