Изменение класса выбранного элемента меню на разных страницах

Question

Для своего веб-сайта я использую ASP.NET MVC "Razor".Учиться по ходу дела.

У меня есть 5 или 6 страниц на моем сайте и одна страница на другом сайте.Я хочу, чтобы пользователи чувствовали, что они используют один и тот же сайт для всех.

Существует типичное HTML-меню для страниц, которое следует стандартному шаблону использования неупорядоченного списка XHTML и CSS для макета:

<ul id="menu">
    <li class="selected"><a href="@Href("~/")">Home</a></li>
    <li><a href="http://ceklog.kindel.com">cek.log</a></li>
    <li><a href="@Href("~/Services")">Services</a></li>
    <li><a href="@Href("~/Charlie")">Charlie's Stuff</a></li>
    <li><a href="@Href("~/Contact.cshtml")">Contact</a></li>
</ul>

В других местах SO я нашел вопросы, похожие на моигде люди хотели отслеживать выбранный пункт меню, но на динамической странице.Например:

Javascript Изменение класса выбранных элементов меню

Но этот подход не будет работать в моем случае, потому что в моем случае пользователь не меняет выбор наодну страницу, но полностью переходя на другую страницу.

Как это можно сделать?

Answer 1

... и я понял это.

Я использовал Razor для реализации этого на стороне сервера.

Сначала я реализовал функцию на своей _SiteLayout.cshtml странице (шаблон, который используют все страницы):

@functions {
    public string Selected(string PageTitle) {
       if (Page.Title == PageTitle)
          return "selected";
        else
          return "";
    }
}

Затем я использовал эту функцию в своем списке:

<ul id="menu">
    <li class="@Selected("Home")"><a href="@Href("~/")">Home</a></li>
    <li class="@Selected("cek.log")"><a href="http://ceklog.kindel.com">cek.log</a></li>
    <li class="@Selected("Services")"><a href="@Href("~/Services")">Services</a></li>
    <li class="@Selected("Charlie's Stuff")"><a href="@Href("~/Charlie")">Charlie's Stuff</a></li>
    <li class="@Selected("Contact")"><a href="@Href("~/Contact.cshtml")">Contact</a></li>
</ul>

Работает отлично.На своей внешней странице я просто написал ее вручную, поскольку она основана на Wordpress, а не Razor.