Solved

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

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

747 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

12 Experts available now in Live!

Get 1:1 Help Now