Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2013-05-13
4
Medium Priority
?
1,760 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
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 is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.
Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…

670 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