Asp.net mvc and css: menu tab availability highlighted when selected

Question

Is there a better way to do this?

I have an extension method for the HTML helper that checks if the current tab menu is selected, and then selects the selected css class or not. I put the html.IsSelected link in every li like

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

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

Is it clean or is there a better way?

Answer 1

If you can live with a javascript solution, see how this supports jQuery UI Accordion . Essentially, you can select a dedicated tab based on the controller by examining the request URL when the page loads.

Alternatively, you can set the ViewBag element for each tab to match the value of the tab class. Set the current tab to the value of the active css class, and the rest to empty (or by default). Then you can use:

 <li id="HomeTab" class="<%= ViewBag.HomeTabClass %>" /> <li id="OtherTab" class="<%= (string)ViewBag.OtherTabClass %>" /> 

In your controller, you must set the correct values ​​for the ViewData variables.

 ViewBag.HomeTabClass = "tab activeTab"; ViewBag.OtherTabClass = "tab"; 

Answer 2

I use this approach in one of my projects and it works very well. I assigned ViewData ["Home"] = "activeTab" in each class of the class and used the default value of the empty string, as shown below. This will make the tab active if the value of this dictionary viewData is accepted. 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 3

You can also take a look at the previous sentence:

Easy way to set active tab using controllers and user control in ASP.NET MVC?

Answer 4

I tried to get this to work without any luck.

What does your CSS look like? My is below.

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

I use this with the main page, not the home view, not sure if this affected it.