Como indicar visualmente página atual no ASP.NET MVC?

Question

Como uma base para discussão. Criar um projeto ASP.NET MVC Web padrão.

Ele irá conter dois itens de menu na página mestra:

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

Como posso definir o estilo de CSS visuais indicando a página atual. Por exemplo, quando na página Sobre / controller, eu basicamente gostaria de fazer isso:

<%= Html.ActionLink("About", "About", "Home", new {class="current"})%></li>

E, claro, quando na home page:

<%= Html.ActionLink("Home", "Index", "Home", new {class="current"})%></li>

(com um nomes de estilo CSS atuais que indica visualmente no menu que esta é a página atual.)

Eu poderia sair do div menu a partir da página mestra em um espaço reservado de conteúdo, mas isso significaria que eu devo colocar o menu em cada página.

Todas as ideias, há uma boa solução para isso?

Answer 1

A maneira mais fácil é para obter o controlador de corrente e ação de RouteData do ViewContext. Observe a mudança na assinatura e uso de @ para escapar a palavra-chave.

<% var controller = ViewContext.RouteData.Values["controller"] as string ?? "Home";
   var action = ViewContext.RouteData.Values["action"] as string ?? "Index";
   var page = (controller + ":" + action).ToLower();
 %>

<%= Html.ActionLink( "About", "About", "Home", null,
                     new { @class = page == "home:about" ? "current" : "" ) %>
<%= Html.ActionLink( "Home", "Index", "Home", null,
                     new { @class = page == "home:index" ? "current" : "" ) %>

Note que você poderia combinar esta uma extensão HtmlHelper como @ Jon e torná-lo mais limpo.

<%= Html.MenuLink( "About", "About", "Home", null, null, "current" ) %>

Onde MenuActionLink é

public static class MenuHelperExtensions
{
     public static string MenuLink( this HtmlHelper helper,
                                    string text,
                                    string action,
                                    string controller,
                                    object routeValues,
                                    object htmlAttributes,
                                    string currentClass )
     {
         RouteValueDictionary attributes = new RouteValueDictionary( htmlAttributes );
         string currentController = helper.ViewContext.RouteData.Values["controller"] as string ?? "home";
         string currentAction = helper.ViewContext.RouteData.Values["action"] as string ?? "index";
         string page = string.Format( "{0}:{1}", currentController, currentAction ).ToLower();
         string thisPage = string.Format( "{0}:{1}", controller, action ).ToLower();
         attributes["class"] = (page == thisPage) ? currentClass : "";
        return helper.ActionLink( text, action, controller, new RouteValueDictionary( routeValues ), attributes );
     }
}

Answer 2

Recentemente, criou uma Helper HTML para este que se parece com:

public static string NavigationLink(this HtmlHelper helper, string path, string text)
{
    string cssClass = String.Empty;
    if (HttpContext.Current.Request.Path.IndexOf(path) != -1)
    {
        cssClass = "class = 'selected'";
    }

    return String.Format(@"<li><a href='{0}' {1}>{2}</a></li>", path, cssClass, text);
}

Os olhares de implementação como este:

  <ul id="Navigation">
  <%=Html.NavigationLink("/Path1", "Text1")%>
  <%=Html.NavigationLink("/Path2", "Text2")%>
  <%=Html.NavigationLink("/Path3", "Text3")%>
  <%=Html.NavigationLink("/Path4", "Text4")%>
  </ul>

Answer 3

Se você estiver usando T4MVC, você pode usar isto:

        public static HtmlString MenuLink(
        this HtmlHelper helper,
        string text,
        IT4MVCActionResult action,
        object htmlAttributes = null)
    {
        var currentController = helper.ViewContext.RouteData.Values["controller"] as string ?? "home";
        var currentAction = helper.ViewContext.RouteData.Values["action"] as string ?? "index";

        var attributes = new RouteValueDictionary(htmlAttributes);
        var cssClass = (attributes.ContainsKey("class"))
                           ? attributes["class"] + " "
                           : string.Empty;

        string selectedClass;
        if(action.Controller.Equals(currentController, StringComparison.InvariantCultureIgnoreCase)
        {
            selectedClass = "selected-parent";
            if(action.Action.Equals(currentAction, StringComparison.InvariantCultureIgnoreCase))
                selectedClass = "selected";
        }
        cssClass += selectedClass;

        attributes["class"] = cssClass;

        return helper.ActionLink(text, (ActionResult)action, attributes);
    }

Answer 4

Pode ser apenas que ele é o quinto parâmetro, então encaixar um nulo antes de seu atributo de html. Este post aqui descreve-o como tal, embora você pode passar em algumas coisas no 4º argumento, a 5ª é especificamente para htmlAttributes

Answer 5

<script type="javascript/text">
$( document ).ready( function() {

        @if (Request.Url.AbsolutePath.ToLower() == "/") 
        {
            @Html.Raw("$('.navbar-nav li').eq(0).attr('class','active');")
        }

        @if (Request.Url.AbsolutePath.ToLower().Contains("details")) 
        {
            @Html.Raw("$('.navbar-nav li').eq(1).attr('class','active');")
        }

        @if (Request.Url.AbsolutePath.ToLower().Contains("schedule")) 
        {
            @Html.Raw("$('.navbar-nav li').eq(2).attr('class','active');")
        }

    });
</script>

lancei este juntos em 5 minutos, eu provavelmente poderia refatorar-lo, mas deve dar-lhe a idéia básica, o seu provavelmente mais útil para sites menores.