Условное добавление CSS классов в Razor MVC 4: подробно

Быстрый ответ

Если вы предпочитаете эффективность, вот корректный синтаксис Razor MVC 4 для добавления условного второго CSS-класса к HTML-элементу:

<div class="@("base-class" + (IsConditionMet ? " additional-class" : ""))">...</div>

При этом IsConditionMet — это ваше условие, а base-class символизирует основной класс. Класс additional-class будет добавлен только в случае выполнения условия, что способствует подводящему оформлению и читаемости вашей разметки.

Понимаем синтаксис

Давайте более детально рассмотрим описанный выше синтаксис и возможные варианты замены. Для более ясного представления условных операций можно применять конструкцию if-else:

<div class="base-class @if(IsConditionMet) { <text>additional-class</text> }">...</div>

Такой подход отделяет логические блоки от имен классов, что улучшает читаемость и сокращает время на поддержку кода, особенно при работе со сложными условиями или классами с продолжительными именами.

Используем ли мы модель?

Для более явного управления и грамотного распределения обязанностей на предполагаемые методы можно инкапсулировать логику в методе модели или определить вспомогательную функцию:

public string GetCssClass()
{
    return $"base-class {(Details.Count > 0 ? "additional-class" : string.Empty)}";
}

<div class="@Model.GetCssClass()">...</div>

Такой подход улучшает читаемость кода, но важно воздерживаться от чрезмерного использования дополнительных функций модели.

Подробнее об этом расскажет наш спикер на видео

Форматирование строк для постижения элегантности

При работе с большим количеством классов и условий удобно применять метод String.Format:

<div class="@String.Format("base-class{0}", IsConditionMet ? " additional-class" : "")">...</div>

Контроль конечного результата

Обязательно проверьте получаемый HTML-код для избегания ошибок при присвоении атрибутов классов.

Визуализация

HTML-элементы также могут меняться "в своем стиле":

Основной CSS-класс: .hero
Условный класс: .rainy-day-gear (Добавляется при внушительной вероятности дождя)

<div class="hero @(Model.IsRaining ? "rainy-day-gear" : "")"></div>

При ненастной погоде элемент окажется таким:

Элемент примет класс .rainy-day-gear 💧

При благоприятных условиях погоды:

Элемент сохранит свой основной класс .hero ✨

Универсальные методы для повторного использования

Если вы замечаете, что часто повторяете одинаковый код, создайте универсальные методы для динамической генерации классов, которые можно поместить во вспомогательный класс или в представления Razor.

Значимость эффективного кода

Баланс между читаемостью и лаконичностью в MVC подобен выбору одежды — важно ощущать комфорт при использовании. Код Razor должен наиболее лёгко и ясно передавать суть модели.

Точное отражение реальности

Выводимый HTML должен точно отображать состояние модели:

<div class="details @(Model.Details.Count > 0 ? "show" : "hide")">...</div>

Элемент будет отображен как <div class="details show">...</div> или <div class="details hide">...</div>, адаптируясь к текущей ситуации.

Учёт ваших потребностей

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

Полезные материалы

1. Официальное руководство по Razor для ASP.NET Core
2. Примеры условных атрибутов в Razor на Stack Overflow
3. Статья про понимание движка представлений Razor в MVC
4. Блог Скотта Хансельмана
5. Официальный сайт ASP.NET MVC
6. Обсуждения по теме Razor и CSS на Stack Overflow