Как установить активный класс меню Bootstrap с помощью ASP.NET Core?
Вступление
Последние пару лет я использую Bootstrap для определения макета своих веб-сайтов. Это значительно упрощает вашу жизнь при создании адаптивных веб-сайтов, что в настоящее время является обязательным. Одна из функций, предлагаемых бутстрапом, - это возможность настраивать внешний вид ссылки, когда вы присваиваете ей класс active.
Многие интерфейсные фреймворки - подумайте о VueJS, React и Angular - могут добавлять этот класс автоматически. Проблема в том, что шаблон MVC не добавляет активный класс в тег li или a в меню по умолчанию. Поэтому нам нужно найти способ самим добавить class="active" к тегу, чтобы указать активный пункт меню.
Добавление активного класса
Добавление активного класса в приложение ASP.NET Core может показаться проще, чем вы думаете. Для этого нам понадобится метод расширения @HtmlHelper:
Этот метод позволяет нам определять несколько действий и контроллеров - в любой другой комбинации - которые добавляют определенный класс к нашему выбранному элементу. Теперь нам просто нужно использовать его в наших представлениях.
Если вы хотите добавить активный класс в элемент li, когда вы находитесь в контроллере «Home» в действии «Index», вам потребуется следующий код:
<li class="nav-item @Html.ActiveClass("Home", "Index")">
<a class="nav-link" href="/Home/Index">Home</a>
</li>
Но предположим, что вы хотите вызвать класс selected, когда вы находитесь в действии «Индекс» контроллера «Домой» или «Контакт». Мы можем сделать это с помощью следующего фрагмента кода:
<li class="nav-item @Html.ActiveClass("Home,Contact", "Index", "selected")">
<a class="nav-link" href="/Home/Index">Home</a>
</li>
ПРИМЕЧАНИЕ. Я настоятельно рекомендую добавить @using Your.Extension.NameSpace в ваш _ViewImports.cshtml файл, чтобы вам не приходилось добавлять его в любое другое представление.
Заключение
Применение активного класса на панели навигации может оказаться не таким сложным, как кажется. Используя метод расширения, мы можем добиться этого с помощью нескольких простых строк. Надеюсь, это поможет вам реализовать более интерактивную панель навигации!
Удачного кодирования 😊
Если вы также хотите, чтобы вам было проще создавать ссылки, взгляните на эту историю.
