13 Responses to “Creating A Tabbed Menu Control For ASP.NET MVC”

1. Chris Pietschmann Said on Apr 14, 2009 :

   Looks like a good start, but where’s the rest of the code? CSS, JavaScript, etc?

2. Chris Pietschmann Said on Apr 14, 2009 :

   oh, duh… I just skimmed the article, there’s the CSS. Maybe I should pay attention some times.

3. Jon Said on Apr 22, 2009 :

   Could this work so that instead of a load of MenuTab.Create in the master page it somehow uses data from a database table and does a MenuTab.Create for each item in the database?

   This is a great example that I’ve been looking for, Thanks

4. Jon Said on Apr 22, 2009 :

   There is a bug in the code, the HTML output is incorrect. This is a working version.

   foreach(var tab in tabs) {
   if(controller == tab.Controller && action == tab.Action)
   menu += “\n\t” + helper.ActionLink(tab.Text, tab.Action,
   tab.Controller, null, new { @class = “selected” }) + “”;
   else
   menu += “\n\t” + helper.ActionLink(tab.Text,
   tab.Action, tab.Controller) + “”;
   }

5. Neeks Said on Apr 24, 2009 :

   Nice Article to start.

6. Jon Said on Apr 24, 2009 :

   How would you do it for a nested menu eg/

   Item 1

   SubItem1

   Item 2

   SubItem1

7. Mike Scott Said on May 21, 2009 :

   Hi Justin

   Nice article. Here are suggestions for improvements:

   1. Use a StringBuilder instead of concatenating strings to create the HTML.
   2. Lose the MenuTab.Create method, it’s redundant. You didn’t previously work with Delphi, did you?
   3. Add an overload to the MyHtmlHelper that takes a params MenuTab[] parameter so you can lose the new List( {…} ):

8. Robert Said on Dec 5, 2009 :

   The following code is made available for use with MVC2 “Functional Areas”…
   http://msdn.microsoft.com/en-us/library/ee671793(VS.100).aspx

   download tutorial here…
   http://go.microsoft.com/fwlink/?LinkId=164755

   public class MenuTab
   {
   private MenuTab(string text, string action, string controller, object routevalues)
   {
   Text = text;
   Action = action;
   Controller = controller;
   RouteValues = routevalues;
   }

   public static MenuTab Create(string text, string action, string controller, object routevalues)
   {
   return new MenuTab(text, action, controller, routevalues);
   }

   public string Text { get; private set; }
   public string Action { get; private set; }
   public string Controller { get; private set; }
   public object RouteValues { get; private set; }
   }

   public static class MyHtmlHelper
   {
   public static string TabbedMenu(this HtmlHelper helper, IEnumerable tabs)
   {
   var route = helper.ViewContext.RequestContext.RouteData;
   var action = route.GetRequiredString(”action”);
   var controller = route.GetRequiredString(”controller”);

   var menu = “\n\n”;
   foreach (var tab in tabs)
   {
   if (action == tab.Action && controller == tab.Controller)
   menu += “\n\t” + helper.ActionLink(tab.Text, tab.Action,
   tab.Controller, new { area = tab.RouteValues }, new { @class = “selected” }) + “”;
   else
   menu += “\n\t” + helper.ActionLink(tab.Text, tab.Action,
   tab.Controller, new { area = tab.RouteValues }, null) + “”;
   }
   menu += “\n\n\n”;
   return menu;
   }
   }

   Site.Master page…

   <%= Html.TabbedMenu(new List {
   MenuTab.Create(”Home”, “Index”, “Home”, “”),
   MenuTab.Create(”Blog”, “ShowRecent”, “Blog”, “blog”),
   MenuTab.Create(”Dashboard”, “AddPost”, “Dashboard”, “dashboard”),
   MenuTab.Create(”About”, “About”, “Home”, “”)
   }) %>

9. Robert Said on Dec 5, 2009 :

   I hope someone might find it useful; I modified the original code by Justin to work with MVC2 Areas.

   Thanks Justin!!

10. Bart van der Vliet Said on Mar 23, 2010 :

    Thanks for this article, it helped me a lot. For other people who are using this control: Add the namespaces System.Web.Mvc and System.Web.Mvc.Html to access the ActionLink extension method on the HtmlHelper object.

3 Trackback(s)

1. Apr 14, 2009: DotNetBurner - ASP.net MVC
2. Apr 15, 2009: 9eFish
3. Apr 16, 2009: Links 2009-04-16 - Gunnar Peipman's ASP.NET blog