How can I use jQuery tabs for navigation in my ASP.NET MVC app?

Question

I'm creating a new application using ASP.NET MVC.

I'd like to use a series of jQuery tabs at the top of my window to allow the user to access the various modules of the application.

I want to put the tabs in my shared layout view so that I don't replicate them throughout the app.

I'm running into two conflicting issues that I can't seem to find a coherent solution for:

When I click on a tab, I'd like the whole window to navigate to that page, rather than just loading the content into a div. I'm doing this to allow for bookmarking of a particular module. (I'd like the address bar to contain the URL of the current content, rather than just a "main page" URL.)
Currently when I call $("#tabs").tabs(); jQuery creates a div for each of my tabs and attempts to load the content of my href into the div. That ends up creating a copy of the page I'm on nested within itself.

Here are my tab definitions (from the default layout page):

   <section class="tabs">
        <div id="tabs">
            <ul>
                <li><a href="Home" rel="Home">Instructions</a></li>
                <li><a href="Questions" rel="Questionnaire">Questions</a></li>
                <li><a href="Submit" rel="SubmitAndConfirm">Finish</a></li>
                <li><a href="FAQ">FAQ</a></li>
            </ul>
        </div>
    </section>

And here's the script I'm using to set them up:

function SetupTabs(sel) {

    $("#tabs").tabs();

    $("#tabs").tabs("select", sel); // Selects the tab
    $('#tabs').tabs({
        select: function (event, ui) {
            location.href = ui.tab.rel;
        }
    });
}

This actually gets my page navigating correctly, but nests the pages within themselves (issue #2 above). If I re-arrange it so that I have a main page, and load the content from the tabs using partial views, then I don't have a usable URL in the address bar (issue #1 above).

Any ideas would be greatly appreciated. I know this isn't the design paradigm for the jQuery tabs, but we're using them elsewhere in the app and we use a lot of jQuery UI-themed elements, so I'd like to stick with them for this element, too, if I can make it work.

Thanks

Jonathan Bates · Accepted Answer · 2012-04-25 18:42:18Z

4

Since you want each tab click to act as navigation, you may want to consider not using the JQueryUI Tabs, instead use a <ul> styled to look like tabs with the click events set to navigate to the pages you'd like.

answered Apr 25, 2012 at 18:42

Jonathan Bates

1,83514 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mgnoonan Over a year ago

+1 Agreed. The point of using jQuery tabs is to display things on the client side, without posting back to the server. Navigation is a different problem set.

Jason Over a year ago

That may be my best solution. I was hoping to leverage the jQuery plumbing to handle the styling on the selected tab, the hover style, etc. But I guess I may be spending more effort trying to incorporate existing code than I would spend just managing it myself...

Jonathan Bates Over a year ago

It you really wanted to make it work (I don't recommend using it for that), you could load the content of each tab with ajax. It would mean that you would have to write your endpoints to return JSON content. You'd need a view to host your tab control, and then an JSON result for each tab. Its seems alot more work than you might want to do.

Collectives™ on Stack Overflow

How can I use jQuery tabs for navigation in my ASP.NET MVC app?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related