8

My ultimate goal is to have a menu that adds a class to the list item that associates with the current page I am on.

So I have it set up such that each controller will be associated with an item in my menu. I need to add a class to that list item (changing the color, background, whatever).

Is there a simple way to do this? Pass a value to the View, then what?

2
  • Related: stackoverflow.com/questions/906423/… Commented Aug 5, 2009 at 2:37
  • @Robert - Kind of, but I want a non-javascript solution. I would think ideally, since I have all the info I need on the server, I could do this on the server. Commented Aug 5, 2009 at 12:17

1 Answer 1

12

In a recent project of mine I did it using HtmlHelper extensions and getting data from the ViewContext.RouteData.Values collection.

So building off a simple extension like this:

public static string OnClass(this HtmlHelper html, bool isOn)
{
    if (isOn)
        return " class=\"on\"";

    return string.Empty;
}

You can build up any number of combinations, e.g.

Just testing the current action:

public static string OnClass(this HtmlHelper html, string action)
{
    string currentAction = html.ViewContext.RouteData.Values["action"].ToString();

    return html.OnClass(currentAction.ToLower() == action.ToLower());
}

Testing for a number of actions:

public static string OnClass(this HtmlHelper html, string[] actions)
{
    string currentAction = html.ViewContext.RouteData.Values["action"].ToString();

    foreach (string action in actions)
    {
        if (currentAction.ToLower() == action.ToLower())
            return html.OnClass(true);
    }

    return string.Empty;
}

Testing for action and controller:

public static string OnClass(this HtmlHelper html, string action, string controller)
{
    string currentController = html.ViewContext.RouteData.Values["controller"].ToString();

    if (currentController.ToLower() == controller.ToLower())
        return html.OnClass(action);

    return string.Empty;
}

Etc, etc.

Then you simply call it in your view(s) like so

<ul id="left-menu">
    <!-- simple boolean -->
    <li <%= Html.OnClass(something == somethingElse) %>>Blah</li>
    <!-- action -->
    <li <%= Html.OnClass("Index") %>>Blah</li>
    <!-- any number of actions -->
    <li <%= Html.OnClass(new string[] { "Index", "Details", "View" }) %>>Blah</li>
    <!-- action and controller -->
    <li <%= Html.OnClass("Index", "Home") %>>Blah</li>
</ul>

Which ever way you look at it, HtmlHelper extensions are your friend! :-)

HTHs
Charles

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

2 Comments

I just got a chance to look through this and implement it. Freakin Awesome! Thanks dude!
if (currentAction.ToLower() == action.ToLower()).. I think the proper way to compare strings is by using StringComparison.InvariantCultureIgnoreCase

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.