Menu de navigation avec surbrillance dans Asp.NET MVC?

Question

C'est une question simple. Comment stackoverflow a fait son menu dans Asp.net MVC, avec surlignez sur quelle page nous sommes sur.

Answer 1

Pour cela, j'ai écrit du code, il y a une partie qui utilise mon extension personnalisée comme Language, allez-y et utilisez-la, ignorez simplement la partie mineure.

Celui-ci je place au-dessus de mon partiel qui contient le menu pour obtenir l'action et le contrôleur, de sorte que je puisse passer à l'extension.

<% string currentAction = ViewContext.RouteData.Values["action"].ToString(); 
    string currentController = ViewContext.RouteData.Values["controller"].ToString(); %> 

C'est le point de la barre latérale, essentiellement cela va générer une balise « li » avec un lien et votre classe personnalisée pour indiquer si le lien est actuellement utilisé dans la page/highlight.

public static string SidebarItem(this System.Web.Mvc.HtmlHelper html, string currentAction, string currentController, string action, string controller, string languageKey, params object[] args) 
{ 
    TagBuilder tb = new TagBuilder("li"); 
    if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) && string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase)) 
    { 
     tb.GenerateId("activemenu"); 
    } 
    string text = html.Language(languageKey, args); 
    string link = html.ActionLink(text, action, controller).ToHtmlString(); 
    tb.SetInnerText("{0}"); 
    return String.Format(tb.ToString(), "<span>"+link+"</span>"); 
} 

et voici l'utilisation réelle du code ci-dessus

<%= Html.SidebarItem(currentAction, currentController, "index", "home", "index") %> 

Answer 2

Voir pour dire cette URL

http://stackoverflow.com/questions cela indique que probablement les questions Controller gère cette page. Donc, il change le Voir pour afficher un élément de menu en surbrillance.

Answer 3

Il n'y a probablement pas de magie spéciale MVC qui rend cela possible.

Je suis sûr:

if(HttpContext.Current.Request.Path == "some some menu url") 

ou

if(ViewContext_Or_ControllerContext.RouteData.Values["controller"] == "some value") 

est utilisé quelque part.

Vous pouvez placer ce code dans trois emplacements différents (View (.aspx), ViewModel, Custom HtmlHelper) et tous nécessiteraient le même code.

Answer 4

Si vous regardez la source de la page, ils ont ajouté une classe css à l'élément <li> pour changer la couleur d'arrière-plan. Je devine que le code regarde quel contrôleur l'utilisateur accède (questions, utilisateurs, etc.) et ajoute la classe à la balise <li> de cette section.

Answer 5

Vous pouvez utiliser une aide HTML pour créer le menu. De cette façon tout le code est dans un endroit.

SiteMap HtmlHelper ASP.NET MVC contient des informations sur un composant disponible.

Answer 6

1.Premièrement créer extention

public class Extention 
{ 
    public static Dictionary<Menu, Menu> GetDictionary() 
    { 
     Dictionary<Menu, Menu> urls = new Dictionary<Menu, Menu>(); 
     urls.Add(new Menu { Controller = "AppHome", Action = "Index" }, new Menu { Controller = "AppHome", Action = "Index" }); 
     urls.Add(new Menu { Controller = "Home", Action = "Index" }, new Menu { Controller = "Home", Action = "Index" }); 

     return urls; 
    } 
} 
public static class HtmlExtensions 
{ 
    public static MvcHtmlString ActionMenu(this HtmlHelper helper,String linkText,string actionName,String controllerName) 
    { 
     var tag= new TagBuilder("li"); 
     if(helper.ViewContext.RequestContext.IsCurrentRoute(null,controllerName,actionName)|| 
      helper.ViewContext.RequestContext.IsParentRoute(controllerName,actionName)) 
     { 
      tag.AddCssClass("active"); 
     } 
     else 
     { 
      tag.AddCssClass("inactive"); 
     } 
     tag.InnerHtml = helper.ActionLink(linkText, actionName, controllerName).ToString(); 
     return MvcHtmlString.Create(tag.ToString()); 
    } 
} 
public static class RequestExtentions 
{ 
    public static bool IsCurrentRoute(this RequestContext context, String areaName) 
    { 
     return context.IsCurrentRoute(areaName, null, null); 
    } 
    public static bool IsCurrentRoute(this RequestContext context, String areaName, String controllerName) 
    { 
     return context.IsCurrentRoute(areaName, controllerName, null); 
    } 
    public static bool IsCurrentRoute(this RequestContext context, String areaName, String controllerName, params String[] actionNames) 
    { 
     var routeData = context.RouteData; 
     var routeArea = routeData.DataTokens["area"] as String; 
     var current = false; 

     if (((String.IsNullOrEmpty(routeArea) && String.IsNullOrEmpty(areaName)) || (routeArea == areaName)) && 
      ((String.IsNullOrEmpty(controllerName)) || (routeData.GetRequiredString("controller") == controllerName)) && 
      ((actionNames == null) || actionNames.Contains(routeData.GetRequiredString("action")))) 
     { 
      current = true; 
     } 
     return current; 
    } 
    public static bool IsParentRoute(this RequestContext context, String controller, String action) 
    { 
     var routeData = context.RouteData; 
     Menu returnUrl = null; 
     Menu requestUrl = new Menu { Action = routeData.GetRequiredString("action"), Controller = routeData.GetRequiredString("controller") }; 
     Menu linkUrl = new Menu { Action = action, Controller = controller }; 

     var urls = Extention.GetDictionary(); 
     urls.TryGetValue(requestUrl, out returnUrl); 

     if (returnUrl != null && returnUrl.Equals(linkUrl)) 
      return true; 
     else 
      return false; ; 
    } 
} 

Answer 7

La meilleure façon - créer aide MVC (voir les réponses précédentes) Mais si vous ne voulez pas le faire et que vous voulez faire rapidement - se rappeler au sujet nouvelle fonctionnalité MVC 4.0 avec attributs set de balises html (l'attribut sera éviter si elle est définie sur null):

 @{ 
      string currentAction = ViewContext.RouteData.Values["action"].ToString().ToLower(); 

      string classUpcomingTime = null; 
      string classArchive = null; 
      string classReporting = null; 

      switch (currentAction) 
      { 
       case "upcomingtime": 
        classUpcomingTime = "active"; 
        break; 
       case "archive": 
        classArchive = "active"; 
        break; 
       case "reporting": 
        classReporting = "active"; 
        break; 
      } 

      <ul class="nav navbar-nav"> 
       <li class="@classUpcomingTime"> 
        <a href="/Vacancy/UpcomingTime">Open Vacancies</a> 
       </li> 
       <li class="@classArchive"> 
        <a href="/Vacancy/Archive">Archive</a> 

       <li class="@classReporting"> 
        @*<a href="#">Reporting</a>*@ 
        <a href="/Vacancy/Reporting">Reporting</a> 
       </li> 
      </ul> 
     }