MVC4 How can I set li class to active when the view is active

Question

Hi all I am having my _layout as follows

<div id="primary_nav">
    <ul>
        <li class="left active" id="nav_discussion" runat="server">
          <a title="Go to Forums" href="@Url.Action("Index", "Home")">Forums</a>
       </li>
       <li class="left" id="nav_members" runat="server">
          <atitle="Go to Member List" href="@Url.Action("Members", "Home")">Members</a>
       </li>
    </ul>
</div>

This I used as a layout or master page for every view I created, now what I required is When I moved to ...Home/Members I would like to set Members tab as active like

enter image description here

I'm not sure that you can do this if you are setting the active class in your _layout file. I think you would either have to define your menu as a parameterized partial view, or use JavaScript. — vansimke, Feb 09 '13 at 11:46
Yes, you could because the View is rendered before the _Layout and all its properties are available. Could use ViewBag or @DarinDimitrov s answer — Dave Alperovich, Feb 09 '13 at 16:09

score 5 · Answer 1 · edited May 23 '17 at 12:16

5

I would recommend you writing a custom helper for that. I have illustrated an example of how this could be achieved here: https://stackoverflow.com/a/6323032/29407

You could of course write some spaghetti code in your _Layout (as you have already started) and test the current controller and action using the RouteData and test whether it equals to the specified value and apply some custom CSS class to make it active. I prefer not to show an example of that because I consider it really bad practice. Encapsulating your menu items in a reusable helper is what I would do.

edited May 23 '17 at 12:16

Community

1
1

answered Feb 09 '13 at 12:36

Darin Dimitrov

1,023,142
271
3,287
2,928

i was going to suggest using viewbag for this but i like this solution much better +1 – Chris McGrath Apr 25 '13 at 07:37

score -2 · Answer 2 · answered Feb 09 '13 at 20:52

-2

I would suggest u to on clicking members use Jquery to remove class "left active" from forms and add it to Members .. that would be an easy solution!!!

answered Feb 09 '13 at 20:52

Venkata K. C. Tata

5,539
4
22
35

How about when you navigate straight into the page, what does jquery do? – Obi Jun 27 '14 at 09:14

MVC4 How can I set li class to active when the view is active

2 Answers2