Comment créer une classe dans un bloc html pour la vue sur laquelle je suis dans MVC 3 ?

Question

J'ai ce code qui constitue ma barre de navigation sur mon site, il se trouve dans ma page _layout.cshtml en haut...

<div  id="nav">
            <ul>
                <li id="current"><a href="stackoverflow.com/home/index">Home</a></li>
                <li><a href="stackoverflow.com/code/index">Code Stuff</a></li>
                <li><a href="stackoverflow.com/music/index">Music Stuff</a></li>
                <li><a href="stackoverflow.com/blog/index">Blog</a></li>
                <li><a href="stackoverflow.com/links/index">Links</a></li>   
                <li><a href="stackoverflow.com/contact/index">Contact</a></li>   
            </ul>       
        </div>  

J'utilise une page de vue razor et j'ai besoin de pouvoir injecter id="current" dans le bloc de la page sur laquelle je suis. Ma solution était de faire quelque chose comme

<div  id="nav">
            <ul>
                <li id="@Model.PageName"><a href="stackoverflow.com/home/index">Home</a></li>
                <li id="@Model.PageName"><a href="stackoverflow.com/code/index">Code Stuff</a></li>
                <li id="@Model.PageName"><a href="stackoverflow.com/music/index">Music Stuff</a></li>
                <li id="@Model.PageName"><a href="stackoverflow.com/blog/index">Blog</a></li>
                <li id="@Model.PageName"><a href="stackoverflow.com/links/index">Links</a></li>  
                <li id="@Model.PageName"><a href="stackoverflow.com/contact/index">Contact</a></li>  
            </ul>       
        </div>  

Mais bien sûr, cela ne fonctionnera pas parce que tous les éléments li contiendront le nom de la page. Donc, sans utiliser de lourdes instructions if, comment puis-je faire cela dynamiquement ?

Answer 1

Premièrement, vous devriez vraiment utiliser class (comme indiqué dans votre titre) plutôt que id (comme indiqué dans le texte de votre question). Deuxièmement, je définirais une fonction qui prend un argument différencié de votre lien et sort soit la chaîne vide, soit current selon qu'il correspond ou non au nom de la page.

 @functions
 {
     public string MenuClass( string menuItem )
     {
         return string.Equals( Model.PageName, menuItem, StringComparison.OrdinalIgnoreCase )
                     ? "current"
                     : "";
     }
 }

 <div  id="nav">
        <ul>
            <li class="@MenuClass("Home")"><a href="http://stackoverflow.com/home/index">Home</a></li>
            <li class="@MenuClass("Code")"><a href="http://stackoverflow.com/code/index">Code Stuff</a></li>
            ...  
        </ul>       
  </div>