Databases
StackOverflow2013
Postsdbo
POAdding "active" tag to navigation list in an asp.net mvc master page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdding "active" tag to navigation list in an asp.net mvc master page
    text
    copied!<p>In the default asp.net mvc project, in the Site.Master file, there is a menu navigation list:</p> <pre><code>&lt;div id="menucontainer"&gt; &lt;ul id="menu"&gt; &lt;li&gt;&lt;%= Html.ActionLink("Home", "Index", "Home")%&gt;&lt;/li&gt; &lt;li&gt;&lt;%= Html.ActionLink("About Us", "About", "Home")%&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>This renders in the browser to:</p> <pre><code>&lt;div id="menucontainer"&gt; &lt;ul id="menu"&gt; &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/Home/About"&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>I want to be able to dynamically set the active list item, based on the view that is being called. That is, when the user is looking at the home page, I would want the following HTML to be created:</p> <pre><code>&lt;div id="menucontainer"&gt; &lt;ul id="menu"&gt; &lt;li class="active"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/Home/About"&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>I would expect that the way to do this would be something like:</p> <pre><code>&lt;div id="menucontainer"&gt; &lt;ul id="menu"&gt; &lt;li &lt;% if(actionName == "Index"){%&gt; class="active"&lt;%}%&gt;&gt;&lt;%= Html.ActionLink("Home", "Index", "Home")%&gt;&lt;/li&gt; &lt;li &lt;% if(actionName == "About"){%&gt; class="active"&lt;%}%&gt;&gt;&lt;%= Html.ActionLink("About Us", "About", "Home")%&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>The key bit here is the <code>&lt;% if(actionName == "Index"){%&gt; class="active"&lt;%}%&gt;</code> line. I do not know how to determine what the current actionName is.</p> <p>Any suggestions on how to do this? Or, if I'm on completely the wrong track, is there a better way to do this?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload