asp.net mvc and css: Having menu tab stay highlighted on selection

Question

Is there a better way to do this?

I have an HTML helper extension method that checks if the current tab menu is the the selected one and then chooses .selected css class or not. I put the html.IsSelected link in each li as

<li class="<%=Html.IsSelected(string a, string b)%>" >

where a is the tab name and b is ViewData assigned.

is this clean or is there a better way?

Answer 1

If you can live with a javascript solution, look at how the jQuery Accordion plugin handles this. Essentially, you can choose the highlighted tab based on the controller by examining the request url when the page is loaded.

Alternatively, you can set a ViewData item for each tab that corresponds to the tab's class value. Set the value for the current tab to the active css class and the others to empty (or their defaults). Then you can use:

<li id="HomeTab" class="<%= (string)ViewData["homeTabClass"] %>" />
<li id="OtherTab" class="<%= (string)ViewData["otherTabClass"] %>" />

In your controller, you would then set up the proper values for the ViewData variables.

ViewData["homeTabClass"] = "tab activeTab";
ViewData["otherTabClass"] = "tab";

Answer 2

You could also take a look at a previous suggestion:

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

Answer 3

This approach I am using in one of my projects and is working pretty well. I assigned in each controller ViewData["Home"] = "activeTab" class, and use in the view a default value of empty string, as showing below. This will make the tab active if the value of that viewData dictionary is taken. Is simple and very clean.

Your home controller will look like this:

        ViewData["Home"] = "activeTab";

        return View("Index");
    }

The view will look like this:

<li class="<%= ((string)ViewData["Home"] ?? "") %>"><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li class="<%= ((string)ViewData["About"] ?? "") %>"><%= Html.ActionLink("About", "About", "Home")%></li>

Answer 4

I've tried to get this to work with no luck.

What's your CSS look like? Mine is below.

.activeTab { background:#FFFFFF; color:#000000; }

I'm using this with the master page and not the home view, not sure if that's affecting it.