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 ?

eu-ge-ne · Accepted Answer · 2009-06-10 21:45:15Z

9

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.

edited Jun 10, 2009 at 21:45

answered Jun 10, 2009 at 21:05

eu-ge-ne

28.2k6 gold badges73 silver badges62 bronze badges

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

2 Comments

Flesym Over a year ago

This seems to be a great way to deal with my problem. But what about the class PartialViewModelBase ? Is it a class that I have to create ? TabRepository.GetTabByName(tab); have to return a PartialViewModelBase. How can I do this ?

eu-ge-ne Over a year ago

PartialViewModelBase is just a base class for your PartialViewModels. It could be just an empty abstract class. TabRepository is only for example. You could just create Dictionary<string, Type> TabTypes = new { {"Tab1", typeof(Tab1ViewModel)}, ... }; somewhere in your controller and then do: Tab = Activator.CreateInstance(TabTypes[tab]);

Joel Martinez · Accepted Answer · 2009-06-10 20:43:05Z

2

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

answered Jun 10, 2009 at 20:43

Joel Martinez

47.9k26 gold badges136 silver badges186 bronze badges

3 Comments

erikkallen Over a year ago

I'd be surprised, the JQuery UI tabs are all-client.

Joel Martinez Over a year ago

no they are not, there is an option to load them via ajax: docs.jquery.com/UI/Tabs#option-ajaxOptions

erikkallen Over a year ago

Yes, but they won't postback when you click them, they'll use XmlHttpRequest

Blair Scott · Accepted Answer · 2009-06-10 20:46:24Z

0

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.

answered Jun 10, 2009 at 20:46

Blair Scott

1,8852 gold badges19 silver badges29 bronze badges

Comments

Talljoe · Accepted Answer · 2009-06-10 21:40:17Z

0

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.

answered Jun 10, 2009 at 21:40

Talljoe

14.8k4 gold badges45 silver badges39 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related