Thursday, 30 August 2012

ASP.NET MVC - Highlight Current Link using extension methods

On _layout view :

<ul id="menu">
        <li>@Html.MenuLink("Contact", "Index", "Home")
            @Html.MenuLink("Edit", "Edit", "Home")
            @Html.MenuLink("Detail", "Detail", "Home")</li>
    </ul>

css :

ul#menu li a {
    background: none;
    color: #999;
    padding: 5px;
    border-radius: 15px;
    text-decoration: none;   
}

ul#menu li a.currentMenuItem {
    background-color: black;  
    color: white;
}

class :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace System.Web.Mvc.Html
{
    public static  class MenuExtenstionClass
    {
        public static MvcHtmlString MenuLink(this HtmlHelper helper, string text, string action, string controller)
        {
            var routeData = helper.ViewContext.RouteData.Values;
            var currentController = routeData["controller"];
            var currentAction = routeData["action"];

            if (String.Equals(action, currentAction as string,StringComparison.OrdinalIgnoreCase)
                        && String.Equals(controller, currentController as string, StringComparison.OrdinalIgnoreCase))
            {
                return helper.ActionLink(text, action, controller, null,new { @class = "currentMenuItem" });
            }
            return helper.ActionLink(text, action, controller);
        }
    }
}

No comments:

Post a Comment