8

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?

Fabian Steeg
  • 44,988
  • 7
  • 85
  • 112
zsharp
  • 13,656
  • 29
  • 86
  • 152

4 Answers4

5

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>
Geo
  • 8,663
  • 13
  • 63
  • 93
4

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?

Community
  • 1
  • 1
Zhaph - Ben Duguid
  • 26,785
  • 5
  • 80
  • 117
3

If you can live with a javascript solution, look at how the jQuery UI 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 ViewBag 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="<%= ViewBag.HomeTabClass %>" />
<li id="OtherTab" class="<%= (string)ViewBag.OtherTabClass %>" />

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

ViewBag.HomeTabClass = "tab activeTab";
ViewBag.OtherTabClass = "tab";
tvanfosson
  • 524,688
  • 99
  • 697
  • 795
  • that is what pretty much what i did, used ViewData to assign class. would you say the java solution is more efficient or better for any particular reason? – zsharp Jan 24 '09 at 21:03
  • 1
    Using the javascript solution keeps you from having to add code to every action to set the correct tab, though I suppose you could get basically the same thing by implementing in OnActionExecuting. The downside of using javascript is it's broken if javascript is turned off. – tvanfosson Jan 31 '09 at 21:07
  • If I have more than five menu item and subitem, how can i use your answer? – Elvin Mammadov Jul 29 '13 at 10:17
  • 1
    @ElvinArzumanoğlu I don't think there's any limit on the number of items the accordion can support. I still think I'd go with the ViewBag (I've updated) approach with *named* tabs. An alternative (worse, I think because you lose meaning) would be to use a collection of class names (`string[]`, for example) order in the same order as your tabs and index into it. – tvanfosson Jul 29 '13 at 12:34
  • thank you. I asked question because I want to best approach for this, so I looked at this answer, but can't decide. http://stackoverflow.com/questions/6323021/better-way-to-get-active-page-link-in-mvc-3-razor/6323032#6323032 – Elvin Mammadov Jul 29 '13 at 12:56
  • 1
    @ElvinArzumanoğlu I've done things similar to that in the past. I would say "it depends" - the helper approach depends more on conventions and can constrain you to using/naming tabs in ways you wouldn't prefer but it is certainly a cleaner approach. – tvanfosson Jul 29 '13 at 14:03
1

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.

Carl Weis
  • 6,794
  • 15
  • 63
  • 86