Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ASP.net MVC - Navigation and highlighting the "current" link

When you create a new MVC project it creates a Site.master with the following markup:

<div id="menucontainer">
    <ul id="menu">
        <li><%: Html.ActionLink("Home", "Index", "Home")%></li>
        <li><%: Html.ActionLink("About", "About", "Home")%></li>
    </ul>
</div>

I would like to put code in here that will highlight the current link if I am on that page.

If I add another link such as:

<li><%: Html.ActionLink("Products", "Index", "Products")%></li>

I would want the Products link to be active (using a css class like .active) if I'm on any action in the Products controller.

The About link should be active if I'm on the HomeController About action. The Home link should be active if I'm on the Index action of the HomeController.

What is the best way to do this in MVC?

like image 333
Dismissile Avatar asked Nov 04 '10 17:11

Dismissile


3 Answers

Check out this blog post

It shows how to create an HTML Extension that you call instead of the usual Html.ActionLink The extension then appends class="selected" to the list item that is currently active.

You can then put whatever formatting/highlighting you want in your CSS

EDIT

Just adding some code to rather than just a link.

public static class HtmlHelpers
{

    public static MvcHtmlString MenuLink(this HtmlHelper htmlHelper,
                                        string linkText,
                                        string actionName,
                                        string controllerName
                                        )
    {

        string currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
        string currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");

        if (actionName == currentAction && controllerName == currentController)
        {
            return htmlHelper.ActionLink(linkText, actionName, controllerName, null, new { @class = "selected" });
        }

        return htmlHelper.ActionLink(linkText, actionName, controllerName);


    }
} 

Now you need to define your selected class in your CSS and then in your views add a using statement at the top.

@using ProjectNamespace.HtmlHelpers

And use the MenuLink instead of ActionLink

@Html.MenuLink("Your Menu Item", "Action", "Controller")

like image 112
codingbadger Avatar answered Nov 02 '22 07:11

codingbadger


You could do this by using "data-" attributes to identify the container(s) then using jQuery change CSS class of the link, like the following:

<div class="..." data-navigation="true">
                    <ul class="...">
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
</div>

<script>
    $(function () {
        $("div[data-navigation='true']").find("li").children("a").each(function () {
            if ($(this).attr("href") === window.location.pathname) {
                $(this).parent().addClass("active");
            }
        });
    });
</script>
like image 45
Mentor Avatar answered Nov 02 '22 06:11

Mentor


Here is a way to implement this as an MVC helper:

@helper NavigationLink(string linkText, string actionName, string controllerName)
{
    if(ViewContext.RouteData.GetRequiredString("action").Equals(actionName, StringComparison.OrdinalIgnoreCase) &&
       ViewContext.RouteData.GetRequiredString("controller").Equals(controllerName, StringComparison.OrdinalIgnoreCase))
    {
        <span>@linkText</span>
    }
    else
    {
        @Html.ActionLink(linkText, actionName, controllerName);
    }
}

It can then be used similar to the following:

@NavigationLink("Home", "index", "home")
@NavigationLink("About Us", "about", "home")

A good article on MVC helpers can be found here: http://weblogs.asp.net/scottgu/archive/2011/05/12/asp-net-mvc-3-and-the-helper-syntax-within-razor.aspx

like image 21
bingles Avatar answered Nov 02 '22 06:11

bingles