Menu nawigacji z podświetleniem w Asp.NET MVC?

Question

To proste pytanie. Jak stackoverflow zrobił swoje menu w Asp.net MVC, podając na na jakiej stronie jesteśmy na.

Answer 1

Dla celów tego, mam napisany jakiś kod w dół, istnieją pewne części, które przy moim niestandardowego rozszerzenia jak język, należy iść dalej i użyć go, po prostu zignorować niewielką część.

Ten jeden i umieścić na szczycie mojej Częściowa które zawierają menu, aby uzyskać działanie i kontrolera, tak, że mogę przekazać do rozszerzenia.

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

Jest to pasek boczny element, w zasadzie to wygeneruje „Li” tag z linkiem i niestandardowej klasy do wskazania, czy połączenie jest obecnie stosowany w widoku/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>"); 
} 

i tutaj jest rzeczywiste wykorzystanie kodu powyżej

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

Answer 2

Patrz czyli tego URL

http://stackoverflow.com/questions oznacza to, że prawdopodobnie Pytania Controller obsługuje tej strony. Zmienia więc widok View, aby wyświetlić podświetlony element menu.

Answer 3

Prawdopodobnie nie ma specjalnej magii MVC, która to umożliwia.

jestem pewien:

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

lub

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

służy gdzieś.

Możesz umieścić ten kod w trzech różnych lokalizacjach (View (.aspx), ViewModel, Custom HtmlHelper) i wszystkie one wymagają tego samego fragmentu kodu.

Answer 4

Jeśli spojrzysz na źródło strony, dodali oni klasę css do elementu <li>, aby zmienić kolor tła. Zgaduję, że kod sprawdza, do jakiego kontrolera użytkownik uzyskuje dostęp (pytania, użytkownicy itp.) I dodaje klasę do tej sekcji o numerze <li>.

Answer 5

Można użyć Pomocnika HTML do tworzenia menu. W ten sposób cały kod jest w jednym miejscu.

SiteMap HtmlHelper ASP.NET MVC ma pewne informacje o komponencie, który jest dostępny.

Answer 6

1.First tworzyć 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

Najlepszym sposobem - tworzenie MVC pomocnika (patrz poprzedni odpowiedzi) Ale jeśli nie chcesz, aby to zrobić i chcą zrobić szybko - pamiętaj o nowej funkcji MVC 4.0 z ustawionymi atrybutami znaczników html (atrybut będzie unikany, jeśli ma wartość 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> 
     }