Как создать класс в html-блоке для представления, в котором я работаю в MVC 3?

Question

У меня есть этот код, который является моей панелью навигации на моем сайте, он находится на моей странице _layout.cshtml вверху ...

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

Я использую страницу просмотра бритвы, и мне нужно иметь возможность вставить id = "current" в блок для страницы, которая включена. Моим решением было сделать что-то вроде

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

Но, конечно, это не сработает, потому что все элементы li будут иметь имя страницы. Так что без использования операторов if, как я могу сделать это динамически?

Answer 1

Во-первых, вы действительно должны использовать класс (как указано в заголовке), а не id (как указано в тексте вашего вопроса). Во-вторых, я бы определил функцию, которая принимает аргумент, дифференцирующий вашу ссылку, и выводит либо пустую строку, либо current в зависимости от того, соответствует ли она имени страницы.

 @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="/home/index">Home</a></li>
            <li class="@MenuClass("Code")"><a href="/code/index">Code Stuff</a></li>
            ...  
        </ul>       
  </div>