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/image1nwr.jpg

When you take a look at the url, it said: /users/flesym?tab=stats or ?tab=prefs. I was able to create the tabbed menu, but I'd like to know HOW can I call an action method and display the result depending the selected tab.

I tried using a partial view. But as my page /users/flesym inherits from Mvc.ViewPage(myApplication.Models.User), I can't use another inheritance in my partial view (for example, I'd like to use Mvc.ViewUserControl(myApplication.Models.Format)).

Any thoughts on how to do it ?

Answer 1

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 2

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