selected list item in MVC 2.0 - list

Question

i inherited a menu based on lists that was used before i started and that needs going into MVC.
The list needs to show a white box for the selected item and a standard grey box for the rest. up to now, all that gets shown is a grey box for all. We have been looking around for a solution for this but we fail to get to the bottom to this. The list would be extended as time goes by
<ul id="headerBarMenu" class="horizontalMenu">
<li class="fontstyle01a" >
<%: Html.ActionLink("Manage Payment Run", "ManagePaymentRun", "Home")%></li>
<li class="fontstyle01a" >
<%: Html.ActionLink("About", "About", "Home")%></li>
</ul>
ul.horizontalMenu li
{
list-style: none;
padding: 0;
float: left;
border-top: 1px solid #bbb;
border-right: 1px solid #bbb;
border-bottom: 0px;
border-left: 1px solid #bbb;
margin: 0;
}
ul.horizontalMenu a
{
padding: .6em 1.5em 1em 1.5em;
display: block;
background: #cccccc;
}
ul.horizontalMenu a.selected
{
position: relative;
top: 1px;
background: white;
color: black;
font-weight: bold;
}
.fontstyle01a /*bold_dark*/
{
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
font-size: 7pt;
font-style: normal;
font-weight: bold;
color:#666666;
text-decoration: none;
margin: 0;
padding: 0;
width: 140px;
}
.fontstyle01a a, a:link, a:visited
{
color:#666666;
text-decoration: none;
}
.fontstyle01a a:activea:hover
{
color:#9f117a;
}
Ive been looking at the following to try and change it this, but i have not yet found a solution.
Thanks for the time

Answer 1

Here's a html helper method you might try. It sets the classname based on the current action:
public class Link
{
public string Text { get; set; }
public string Action { get; set; }
public string Controller { get; set; }
public object RouteValues { get; set; }
public object HtmlAttributes { get; set; }
}
public static class HtmlExtensions
{
public static MvcHtmlString Menu(this HtmlHelper htmlHelper, IEnumerable<Link> links)
{
var currentAction = (string)htmlHelper.ViewContext.RouteData.Values["action"];
var currentController = (string)htmlHelper.ViewContext.RouteData.Values["controller"];
var ul = new TagBuilder("ul");
ul.GenerateId("headerBarMenu");
ul.AddCssClass("horizontalMenu");
links = links ?? Enumerable.Empty<Link>();
var sb = new StringBuilder();
foreach (var link in links)
{
var li = new TagBuilder("li");
if (string.Equals(currentAction, link.Action, StringComparison.OrdinalIgnoreCase) &&
string.Equals(currentController, link.Controller, StringComparison.OrdinalIgnoreCase))
{
li.AddCssClass("white");
}
else
{
li.AddCssClass("grey");
}
li.InnerHtml = htmlHelper.ActionLink(link.Text, link.Action, link.Controller, link.RouteValues, link.HtmlAttributes).ToHtmlString();
sb.Append(li.ToString());
}
ul.InnerHtml = sb.ToString();
return MvcHtmlString.Create(ul.ToString());
}
}
And then apply the menu in your views:
<%= Html.Menu(new[] {
new Link { Text = "Manage Payment Run", Action = "ManagePaymentRun", Controller = "Home" },
new Link { Text = "About", Action = "About", Controller = "Home" },
}) %>
Now if you navigate to /home/ManagePaymentRun the first li will get the class white and if you navigate to /home/about the second li will get this class.
All that is left now is to style those rules:
.white {
/** TODO **/
}
.grey {
/** TODO **/
}

Answer 2

Check out this answer to one of my questions. It is a HtmlHelper that returns a class name based on controller and/or action.