ansaurus

Question

An easy way to set the active tab using controllers and a usercontrol in ASP.NET MVC?

Answer 1

+7 A:

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"); %>

Kyle West 2008-11-13 17:53:38

Does IDictionary work? It looks like it should be Dictionary instead.

Anthony Potts 2008-11-14 16:30:21

What about when one controller has two actions?

Anthony Potts 2008-11-21 20:30:06

@Anthony - this code works, it's in production now.@Anthony2 - you mean you want a different tab highlighted per controller action? This won't help that. I'd suggest putting your controller specific nav in a user control and declare which tab to make active when embedding the UC in the page.

Kyle West 2008-11-25 20:27:52

Answer 2

+1 A:

One method I am using on a current project - this also helps for other page-specific CSS needs.

First, an HTML helper that returns a string that represents the current controller and action:

public static string BodyClass(RouteData data) {
   return string.Format("{0}-{1}", data.Values["Controller"], data.Values["Action"]).ToLower();
}

Then, add a call to this helper in your master page:

<body class="<%=AppHelper.BodyClass(ViewContext.RouteData) %>">
...
</body>

Now, you can target specific pages with your CSS. To answer your exact question about navigation:

#primaryNavigation a { ... }
.home-index #primaryNavigation a#home { ... }
.home-about #primaryNavigation a#about { ... }
.home-contact #primaryNavigation a#contact { ... }
/* etc. */

81bronco 2009-08-10 13:30:59

Answer 3

+2 A:

Hi,

I wrote some simple helper classes to solve this problem. The solution looks att both which controller that is used as well as which action in the controller.

public static string ActiveTab(this HtmlHelper helper, string activeController, string[] activeActions, string cssClass)  
{  
     string currentAction = helper.ViewContext.Controller.  
     ValueProvider.GetValue("action").RawValue.ToString();
     string currentController = helper.ViewContext.Controller.  
     ValueProvider.GetValue("controller").RawValue.ToString();  
     string cssClassToUse = currentController == activeController &&  
                            activeActions.Contains(currentAction)  
                            ? cssClass  
                            : string.Empty;  
     return cssClassToUse;  
}

You can the call this extension method with:

Html.ActiveTab("Home", new string[] {"Index", "Home"}, "active")

This will return "active" if we are on the HomeController in either the "Index" or the "Home" action. I also added some extra overloads to ActiveTab to make it easier to use, you can read the whole blog post on: http://www.tomasjansson.com/blog/2010/05/asp-net-mvc-helper-for-active-tab-in-tab-menu/

Hope this will help someone.

Regards, --Tomas

mastoj 2010-05-28 07:32:15

ansaurus

tags:

views:

answers:

An easy way to set the active tab using controllers and a usercontrol in ASP.NET MVC?

related questions