Comment faire pour afficher visuellement la page actuelle dans ASP.NET MVC?

Question

Comme base de discussion. Créez un projet Web ASP.NET MVC standard.

Il contiendra deux éléments de menu dans la page principale:

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

Comment puis-je définir le style visuel CSS indiquant la page en cours. Par exemple, lorsque dans la page A propos/contrôleur, je essentiellement comme le faire:

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

Et, bien sûr, quand sur la page d'accueil:

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

(Avoir un style CSS nom courant qui indique visuellement dans le menu que c'est la page actuelle.)

Je pourrais diviser le menu div de la page maîtresse en un espace réservé de contenu, mais cela signifierait que je dois mettre le menu sur chaque page .

Des idées, existe-t-il une bonne solution à cela?

Answer 1

La meilleure façon est d'obtenir le régulateur de courant et de l'action de RouteData du ViewContext. Notez le changement de signature et l'utilisation de @ pour échapper le mot-clé.

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

Notez que vous pouvez combiner cette extension HtmlHelper comme @ Jon's et la rendre plus propre.

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

Où MenuActionLink est

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

Il se peut que ce soit le 5ème paramètre, placez donc une valeur nulle avant votre attribut html. Ce poste ici décrit comme tel, mais vous pouvez passer des choses au 4ème arguement, le 5 est spécifiquement pour htmlAttributes

Answer 3

J'ai récemment créé un Helper HTML pour ce qui ressemble à:

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); 
} 

La mise en œuvre se présente comme suit:

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

Answer 4

Si vous utilisez T4MVC , Vous pouvez utiliser ceci:

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

lançai cela ensemble dans 5 minutes, je pourrais probablement factoriser, mais devrait vous donner l'idée de base, il est probablement plus utile pour les sites plus petits.