Question

I’ve got a HTML list of menu items generated by MVC 2.

<%= Html.MenuItem("Home", "Home", "Index")%>
<%= Html.MenuItem("Login", "Login", "Account")%>

Which generate in HTML:

<li>
  <a href="Index">Home</a>
</li>

<li>
  <a href="Account">Login</a>
</li>

How can I add a CSS class to the element in the list for each item in the list?

Answer 1

I am guessing this MenuItem is an extension method that you wrote or that you took from someone, I am also guessing that they are wrapping an ActionLink Method, As in:

public static string MenuItem(this HtmlHelper helper, string linkText, string actionName, string controllerName)
{
    string currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"];
    string currentActionName = (string)helper.ViewContext.RouteData.Values["action"];

    // Add selected class
    if (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) && currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase))
        return string.Concat("<li class=\"selected\">", helper.ActionLink(linkText, actionName, controllerName), "</li>");

    // Add link
    return string.Concat("<li>", helper.ActionLink(linkText, actionName, controllerName), "</li>");
}

if this is the case just make it take is a css class as a parameter and use the ActionLink that takes in htmlattributes, as in:

public static string MenuItem(this HtmlHelper helper, string linkText, string actionName, string controllerName, string cssClass = "menu-item")
{
    string currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"];
    string currentActionName = (string)helper.ViewContext.RouteData.Values["action"];

    // Add selected class
    if (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) && currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase))
        return string.Concat("<li class=\"selected\">", helper.ActionLink(linkText, actionName, controllerName), "</li>");

    // Add link
    return string.Concat("<li>", helper.ActionLink(linkText, actionName, controllerName, new {@class = cssClass} ), "</li>");
}

then you just call them like this:

<%= Html.MenuItem("Home", "Home", "Index", "index-tem")%>