2009-04-16 7 views
1

J'essaie de trouver une solution (qui n'utilise pas javascript) à ce problème:Comment injecter le nom de l'action dans masterpage pour mettre en surbrillance l'action en cours dans le menu nav?

J'ai une page maître qui comprend un menu de navigation . Chaque élément de ce menu est une action. Lorsque l'utilisateur sélectionne cette action et passe à cette vue, je veux mettre en surbrillance cet élément dans le menu nav pour indiquer à l'utilisateur ce qu'il est en train de visualiser.

Je pourrais ajouter un nom d'action à un modèle de vue de base (dériver tous mes autres modèles de vue de cela) mais je me demande s'il y a une meilleure façon.

(Je peux déjà voir que quelques complexités se glissent quand c'est MVC.) Pour une action donnée n'importe quel nombre de vues différentes pourraient être retournées, ainsi toutes ces vues devraient souligner la même action dans le menu nav . D'ACCORD).

Pensées?

P.S. Je viens de remarquer que stackoverflow fait quelque chose de similaire avec la surbrillance orange dans le menu ci-dessus. Je vois qu'ils marquent avec la classe "youarehere". Quelle approche ont-ils pris je me demande ...

+0

"sans javascript" signifie sans javascript? – eKek0

Répondre

2

Vous pouvez utiliser CSS pour y parvenir. Si vous connaissez l'ID de l'élément que vous souhaitez mettre en évidence, ajouter une règle CSS à votre point de vue ...

#MenuId 
{ 
color: ...; 
etc... 
} 

Pour clarifier:
Ajouter un espace réservé dans la tête de votre maître, puis ajoutez une section de style dynamique, selon vous ...

dans la page principale:

<head id="Head1" runat="server"> 
<asp:ContentPlaceHolder ID="head" runat="server"> 

</asp:ContentPlaceHolder> 
</head> 

dans la vue

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
<style type="text/css"> 
    #<%= Model.IdToHighlight %> 
    { 
     color:Blue;//or something 
    } 
</style> 
</asp:Content> 
+0

Oui, je réalise que l'effet sera fait avec CSS. Le problème est que je dois définir une classe dans la page maître, en fonction de l'action définie. Vous cherchez une manière élégante ... – Schneider

+0

Pourquoi doit-il être dans le masterpage? Ajoutez un espace réservé à votre page maître et remplissez-le dynamiquement dans la vue. Ce n'est pas élégant? – markt

+0

Votre clarification m'a fait réaliser que vous suggérez effectivement la même chose que moi (minutes plus tard). +1 –

1

Lorsque l'utilisateur sélectionne cette action et va à ce point de vue, je veux souligner cet élément dans le menu de navigation pour indiquer à l'utilisateur ce qu'ils sont actuellement visualisation.

Vous pouvez générer votre menu avec une méthode d'aide html et lorsque vous le générez, vous pouvez ajouter une classe à l'élément de menu relatif à l'action en cours.

Cela peut être fait avec un paramètre ou en utilisant certaines des méthodes décrites here.

Mais Je pense que la façon la plus efficace de le faire est avec javascript, et la deuxième meilleure option que vous avez est écrite par markt.

+0

Que pensent les gens d'avoir défini le menu de navigation dans la vue plutôt que dans la page maître? Je pense que ce serait OK mais semble violer le principe DRY - quelque chose de commun à toutes les pages devrait aller dans masterpage non? Sinon masterpage devient "anémique" – Schneider

+0

C'est vrai! Peut-être que DRY est inconnu pour beaucoup? – eKek0

+0

Vous pouvez créer un contrôle utilisateur et utiliser RenderPartial dans votre vue .. Au moins alors votre code de menu serait dans un endroit et pourrait rendre différemment selon la vue. Mais, je suis plus en faveur de le garder dans la page maître sauf si vous avez vraiment besoin de générer dynamiquement .. – markt

1

Je vous suggère d'aller chercher le modèle "Orange tabs" de mvc design gallery et de le découvrir.

+1

Pour sauver le monde du temps Orange Tabs -> http://www.asp.net/mvc/gallery/view.aspx?itemid=77 – Schneider

4

Ce que je ne faisais que ceci: j'ai créé mon propre aide appelé RenderMenuLink, donc au lieu d'invoquer

<li><%= Html.ActionLink("Home", "index", "home")%></li> 

J'invoque

<%= Html.RenderMenuLink("Home", "index", "home")%> 

qui à son tour ajoute un lien, et en cas l'utilisateur visite ce lien [1] la classe "selected" est ajoutée à un attribut "class" de l'élément de liste.

[1]: j'accomplis cette fonctionnalité en vérifiant si l'URL de l'utilisateur correspond à l'URL produite par ce lien. Le code est collé ci-dessous:


public static class HtmlMenu 
    { 
     public static string RenderMenuLink(this HtmlHelper html, string title, string action, string controller) 
     { 
      UrlHelper url = new UrlHelper(html.ViewContext.RequestContext); 
      string link = url.Action(action, controller); 
      if(String.IsNullOrEmpty(link)) 
      { 
       throw new ArgumentException("No appropriate route found!"); 
      } 

      var cssClass = String.Empty; 
      var uriPath = html.ViewContext.RequestContext.HttpContext.Request.Url.AbsolutePath; 
      if((link != "/" && uriPath.StartsWith(link)) || (uriPath == link)) 
      { 
       cssClass = "selected"; 
      } 
      return String.Format("<li class=\"{0}\"><a href=\"{1}\">{2}</a></li>", cssClass, link, title); 
     } 
    } 
Questions connexes