ASP.net MVC - Navigation and highlighting the “current” link

Question

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

    

        <         


        
                      

              相关标签:
       
      

Answer 1

First Make a Helper Class and HTML Helper method

 public static string IsActive(this HtmlHelper html,string control,string action)
    {
        var routeData = html.ViewContext.RouteData;

        var routeAction = (string)routeData.Values["action"];
        var routeControl = (string)routeData.Values["controller"];

        // both must match
        var returnActive = control == routeControl &&
                           action == routeAction;

        return returnActive ? "active" : "";
    }

And in View or Layour Section Just Call the Helper Method with appropriate Conntroller and Action.

  @using YourNamespace.HtmlHelpermethodName

 <a class="nav-link @Html.IsActive("Dashboard","Index")" href="@Url.Action("Index","Dashboard")">

this will add "active" string in class attribute and it will show like

 <a class="nav-link active" href="@Url.Action("Index","Dashboard")">

Answer 2

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

Answer 3

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")

Answer 4

I Used this approach with a htmlhelper for the problem:

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.Equals(currentAction, StringComparison.InvariantCultureIgnoreCase) && controllerName.Equals(currentController, StringComparison.InvariantCultureIgnoreCase))
        {
            return htmlHelper.ActionLink(linkText, actionName, controllerName, null, new { @class = "active" });
        }

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

    }
}

and for the view

@Html.MenuLink"Linktext", "action", "controller")

Answer 5

<div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                <li>@Html.ActionLink("Products", "Index", "Products")</li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Archivo<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>@Html.ActionLink("Document Type", "Index", "DocumentTypes")</li>
                        <li>@Html.ActionLink("Employee", "Index", "Employees")</li>
                        <li>@Html.ActionLink("Suppliers", "Index", "Suppliers")</li>
                    </ul>
                </li>    
            </ul>
            @Html.Partial("_LoginPartial")
        </div>

Answer 6

You might like to check out my series of MVC navigation controls, which includes the ability to automatically highlight the current link:

http://mvcquicknav.apphb.com/