Unable to Highlight Active Link in MVC 4

Question

i'm trying to highlight the current link in MVC 4 but i cannot do this, i'm sharing what i have done so far

MenuHelper Extension:

public static class MenuHelper
    {
        public static MvcHtmlString ListItemAction(this HtmlHelper helper, string name, string actionName, string controllerName)
        {
            var currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"];
            var currentActionName = (string)helper.ViewContext.RouteData.Values["action"];
            var sb = new StringBuilder();

            sb.AppendFormat("<li{0}", (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) &&
                                                currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase)
                                                    ? " class=\"active\">" : ">"));
            var url = new UrlHelper(HttpContext.Current.Request.RequestContext);
            sb.AppendFormat("<a href=\"{0}\">{1}</a>", url.Action(actionName, controllerName), name);
            sb.Append("</li>");
            return new MvcHtmlString(sb.ToString());
        }
    }

THis is my HTML

<li class="has-sub active">
            <a href="javascript:;" class="">
                <i class="icon-magnet"></i>Manage
                <span class="arrow open"></span>
                <span class="selected"></span>
            </a>
            <ul class="sub">
                @{


                        @Html.ListItemAction("Parts", "Index", "Part")
                        @Html.ListItemAction("Categories", "Index", "Category")
                        @Html.ListItemAction("Tickets", "Index", "Ticket")
                        @Html.ListItemAction("SearchLog", "Index", "SearchLog")
                        @Html.ListItemAction("Reviews", "Index", "Review")


                }



            </ul>

        </li>

this is just highlighting the link but i want to change the LI tag class as well because of my design. i have other links as well i want that when the link is clicked the parent LI tag will be assigned with the active class.how i can do this? i have searched internet but couldn't get any method to solve this.

Answer 1

Here is my menu helper which includes nested links so it highlight both active link and parent menu item. I think you can modify it for your solution.

public static MvcHtmlString MenuItem(this HtmlHelper htmlHelper,
                                         MenuItem menuItem)
    {
        var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
        var li = new TagBuilder("li");
        var routeData = htmlHelper.ViewContext.RouteData;
        var currentAction = routeData.GetRequiredString("action");
        var currentController = routeData.GetRequiredString("controller");
        var isSelected = false;
        if (string.Equals(currentAction,
                          menuItem.item.Action,
                          StringComparison.OrdinalIgnoreCase) &&
            string.Equals(currentController,
                          menuItem.item.Controller,
                          StringComparison.OrdinalIgnoreCase) && menuItem.item.Action != "")
        {
            li.AddCssClass("start active");
            isSelected = true;

        }
        else if (menuItem.item.Action == "" && string.Equals(currentController,
                          menuItem.item.Controller,
                          StringComparison.OrdinalIgnoreCase))
        {
            li.AddCssClass("active open");
            isSelected = true;
        }

        var tag = new TagBuilder("a");

        tag.InnerHtml = "<i class=\"" + menuItem.item.Ikon + "\"></i> <span class=\"title\">" + menuItem.item.MenuYazisi + "</span>";
        if (isSelected) tag.InnerHtml += "<span class=\"selected\"></span>";
        if (menuItem.item.MenuEleman1.Count > 0)
        {
            if (isSelected)
            {
                tag.InnerHtml += "<span class=\"arrow open\"></span>";
            }
            else
            {
                tag.InnerHtml += "<span class=\"arrow \"></span>";

            }
        }

        tag.MergeAttribute("href",
            menuItem.childItems.Any()
                ? "javascript:;"
                : urlHelper.Action(menuItem.item.Action, menuItem.item.Controller));
        li.InnerHtml = tag.ToString();

        if (menuItem.childItems.Any())
        {
            li.InnerHtml += "<ul class=\"sub-menu\">";
            foreach (var item in menuItem.childItems)
            {
                var liTemp = new TagBuilder("li");
                if (string.Equals(currentAction,
                          item.Action,
                          StringComparison.OrdinalIgnoreCase) &&
                           string.Equals(currentController,
                          item.Controller,
                          StringComparison.OrdinalIgnoreCase))
                {
                    liTemp.AddCssClass("active");
                }
                var aTemp = new TagBuilder("a");
                aTemp.MergeAttribute("href", urlHelper.Action(item.Action, item.Controller));
                aTemp.InnerHtml = item.MenuYazisi;
                liTemp.InnerHtml += aTemp.ToString();
                li.InnerHtml += liTemp.ToString();
            }
            li.InnerHtml += "</ul>";
        }
        return MvcHtmlString.Create(li.ToString());
    }