Невозможно изменить класс css текущего <nav>

Question

У меня есть следующее <nav> внутри моего asp. net MVC основного веб-приложения: -

<nav>
      <ul id="navigation">
                          <li class="@Html.IsSelected(actions: "Home", controllers: "Default")"><a href="/">home</a></li>
                          <li class="@Html.IsSelected(actions: "FAQ", controllers: "Default")"><a href="/home/FAQ">FAQ</a></li>
                          <li class="@Html.IsSelected(actions: "Contact", controllers: "Default")"><a href="/home/contact/">Contact</a></li>
      </ul>
</nav>

и я хочу изменить класс для текущей ссылки, я определил следующий метод расширения html: -

public static class HtmlHelperExtensions
    {
        public static string IsSelected(this IHtmlHelper htmlHelper, string controllers, string actions, string cssClass = "selected")
        {
            string currentAction = htmlHelper.ViewContext.RouteData.Values["action"] as string;
            string currentController = htmlHelper.ViewContext.RouteData.Values["controller"] as string;

            IEnumerable<string> acceptedActions = (actions ?? currentAction).Split(',');
            IEnumerable<string> acceptedControllers = (controllers ?? currentController).Split(',');

            return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
                cssClass : String.Empty;
        }
    }

, но когда я нажимаю на любую из ссылок <nav>, они не получают никаких специальных эффектов! любой совет?

Спасибо

Answer 1

Отладка, чтобы проверить, вернул ли метод IsSelected cssClass. Из ваших кодов он просто вернет cssClass, если текущий URL-адрес является одним из следующих:

• / Default / Home
• / Default / FAQ
• / Default / Contact

Кроме того, похоже, что тег <li> не имеет встроенного selected cssClass, вам нужно где-то его определить.

Я провел тест на основе ваших кодов и просто измените цвет:

<nav> в _Layout.cs html

<nav>
<ul id="navigation">
    <li style="@Html.IsSelected(actions: "Index", controllers: "Home")"><a href="/">Home</a></li>
    <li style="@Html.IsSelected(actions: "FAQ", controllers: "Home")"><a href="/home/FAQ">FAQ</a></li>
    <li style="@Html.IsSelected(actions: "Contact", controllers: "Home")"><a href="/home/contact/">Contact</a></li>
</ul>
</nav>

Html расширение:

public static class HtmlHelperExtensions
{
    public static string IsSelected(this IHtmlHelper htmlHelper, string controllers, string actions, string cssClass = "color:red")
    {
        string currentAction = htmlHelper.ViewContext.RouteData.Values["action"] as string;
        string currentController = htmlHelper.ViewContext.RouteData.Values["controller"] as string;

        IEnumerable<string> acceptedActions = (actions ?? currentAction).Split(',');
        IEnumerable<string> acceptedControllers = (controllers ?? currentController).Split(',');

        return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
            cssClass : String.Empty;
    }
}

Результат: