Question

How do I create tabbed navigation with the ‘Current’ tab highlighted in the UI?

Answer 1

Before MVC I looked at the file path and figured out which tab was currrent. Now it’s a lot easier, you can assign the current tab based on the current controller.

Check it out …

Most of the work happens in the usercontrol.

public partial class AdminNavigation : ViewUserControl {     /// <summary>     /// This hold a collection of controllers and their respective 'tabs.' Each Tab should have at least one controller in the collection.     /// </summary>     private readonly IDictionary<Type, string> dict = new Dictionary<Type, string>();      public AdminNavigation()     {         dict.Add(typeof(BrandController), 'catalog');         dict.Add(typeof(CatalogController), 'catalog');         dict.Add(typeof(GroupController), 'catalog');         dict.Add(typeof(ItemController), 'catalog');         dict.Add(typeof(ConfigurationController), 'configuration');         dict.Add(typeof(CustomerController), 'customer');         dict.Add(typeof(DashboardController), 'dashboard');         dict.Add(typeof(OrderController), 'order');         dict.Add(typeof(WebsiteController), 'website');     }      protected string SetClass(string linkToCheck)     {         Type controller = ViewContext.Controller.GetType();         // We need to determine if the linkToCheck is equal to the current controller using dict as a Map         string dictValue;         dict.TryGetValue(controller, out dictValue);          if (dictValue == linkToCheck)         {             return 'current';         }         return '';     } } 

Then in your .ascx part of the usercontol call into the SetClass method to check the link against the dict. Like so:

<li class='<%= SetClass('customer') %>'><%= Html.ActionLink<CustomerController>(c=>c.Index(),'Customers',new{@class='nav_customers'}) %></li> 

All you need now is the CSS to highlight your current tab. There are a bunch of different ways to do this, but you can get started with some ideas here: http://webdeveloper.econsultant.com/css-menus-navigation-tabs/ Oh, and don’t forget to put the usercontrol on your page (or MasterPage) …

<% Html.RenderPartial('AdminNavigation'); %>