ASP.NET MVC et la navigation

Question

J'essaie d'apprendre ASP.NET MVC, et je veux avoir les menus en surbrillance sur l'élément qui est actuellement sélectionné. Je sais que je l'ai fait auparavant dans les formulaires Web (même si je ne me souviens pas comment en ce moment, mais en quelque sorte avec le sitemap). Mais comment cela peut-il être fait dans MVC?

Cela semble être une chose si simple que cela devrait être simple à faire dans MVC? Bien sûr, je peux le faire en ajoutant des règles CSS qui sont couplées entre un identifiant de corps et un identifiant dans le menu (#home #homeli [style comme courant]), mais il semble que cela deviendrait rapidement difficile, surtout s'il y a aussi beaucoup de sous-menus en plus de la navigation principale (dans plusieurs sous-pages, j'ai un sous-menu dans un conteneur de contenu.) BTW, je suppose que c'est la seule façon de le faire dans MVC? le sitemap, mais je n'ai pas vu un moyen de le faire dans MVC ...)

Des suggestions?

Answer 1

Voici un tutoriel qui fournit un moyen très propre pour réaliser ce type de menu:

http://www.dev102.com/2009/04/14/creating-a-tabbed-menu-control-for-aspnet-mvc/

Le bit magique déterminer si un élément de menu ou non actif se produit dans la méthode d'assistance qui rend les articles:

public static class MyHtmlHelper 
{ 
    public static string TabbedMenu(this HtmlHelper helper, IEnumerable<MenuTab> tabs) 
    { 
     var route = helper.ViewContext.RequestContext.RouteData; 
     //This is the current controller 
     var controller = route.GetRequiredString("controller"); 
     var action = route.GetRequiredString("action"); 
     var menu = "\n\n<ul id=\"menu\">"; 

     foreach (var tab in tabs) 
     { 
      //if the menu controller and action match current controller and action, mark it as selected 
      if (controller == tab.Controller && action == tab.Action) 
       menu += "\n\t<li>" + helper.ActionLink(tab.Text, tab.Action, 
       tab.Controller, new { @class = "selected" }) + "</li>"; 
      else 
       menu += "\n\t<li>" + helper.ActionLink(tab.Text, 
       tab.Action, tab.Controller) + "</li>"; 
     } 
     menu += "\n</ul>\n\n"; 
     return menu; 
    } 
} 

classe MenuTab:

public class MenuTab 
{ 
    private MenuTab(string text, string action, string controller) 
    { 
     Text = text; 
     Action = action; 
     Controller = controller; 
    } 

    public static MenuTab Create(string text, string action, string controller) 
    { 
     return new MenuTab(text, action, controller); 
    } 

    public string Text { get; private set; } 
    public string Action { get; private set; } 
    public string Controller { get; private set; } 
} 

Utilisation:

<%= Html.TabbedMenu(new List<MenuTab> { 
    MenuTab.Create("Home", "Index", "Home"), 
    MenuTab.Create("About", "About", "Home"), 
    MenuTab.Create("Services", "Services", "Home"), 
    MenuTab.Create("Pricing", "Pricing", "Home"), 
    MenuTab.Create("Contact", "Contact", "Home") 
}) %> 

Answer 2

élément de menu par contrôleur

@{ 
    var currentController = (string)ViewContext.RouteData.Values["controller"]; 

    Func<string, object> htmlAttributesFactory = 
     controller => currentController == controller ? new {@class = "selected"} : null; 

    Func<string, string, MvcHtmlString> menuItemFactory = 
     (title, controller) => 
     Html.RouteLink(
      title, 
      new {controller}, 
      htmlAttributesFactory(controller)); 


} 

@menuItemFactory("Home", "Home") 
@menuItemFactory("Pending", "Pending")