selected list item in MVC 2.0

Question

Hello,

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.