How can I build a tabbed menu in ASP.NET MVC?

Question

I would like to build a tabbed menu pretty similar to the profile management of StackOverflow.

tabbed menu StackOverflow http://img410.imageshack.us/img410/3037/image1nw

Answer 1

From the looks of it, none of the tabs seem to reveal anything without firing off the link and looking at the HTML for it, it just seems they are styled to look like how they look and just pass specific query string values.

To achieve what you seem to be after you would need to grab the specified query string value if there is one and then sort your resulting data accordingly.

Answer 2

Create View Model:

public class UserViewModel {
    public myApplication.Models.User User;

    public string PartialViewName;

    public PartialViewModelBase Tab;
}

Create View Models for each Tab, derived from PartialViewModelBase:

public abstract class PartialViewModelBase {
}

public class Tab1PartialViewModel : PartialViewModelBase {
    ...
}

public class TabNPartialViewModel : PartialViewModelBase {
    ...
}

Then make your View and PartialViews strongly typed:

View:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<UserViewModel>" %>

PartialViews:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Tab1PartialViewModel>" %>

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TabNPartialViewModel>" %>

Then in your View you can use your Partial Views as:

<% Html.RenderPartial(Model.PartialViewName, Model.Tab); %>

In your controller action:

public ActionResult YourAction(string tab)
{
    // check if tab is valid !!!

    var model = new UserViewModel {
        User = new myApplication.Models.User();
        PartialViewName = tab;
        Tab = TabRepository.GetTabByName(tab);
        /*
         * or
         * Tabs = (new Dictionary<string, type> {
         *     {"Tab1", typeof(Tab1PartialViewName)},
         *     {"TabN", typeof(TabNPartialViewName)}
         *     })[tab];
         */
    };

    Return View(model);
}

Hope this helps.

Answer 3

Another solution would be to create a custom route (Derive from RouteBase) that uses the querystring to select a different action. Each action would have a separate view that uses a master page containing the common content for the page.

Basically you'd have "UsersController" with actions "stats", "prefs", etc. All chosen by a custom route class that you've implemented.

Answer 4

they are likely using the jquery ui tabs: http://docs.jquery.com/UI/Tabs