Как добавить второй класс css с условным значением в бритве MVC 4

В то время как Microsoft создала автоматическую рендеринг html-атрибутов в бритве MVC4, мне потребовалось некоторое время, чтобы узнать, как сделать второй класс css на элементе, основанный на условном выражении бритвы. Я хотел бы поделиться им с вами.

На основе свойства модели @Model.Details я хочу показать или скрыть элемент списка. Если есть детали, необходимо показать div, иначе он должен быть скрыт. Используя jQuery, все, что мне нужно сделать, это добавить шоу класса или скрыть соответственно. Для других целей я также хочу добавить еще один класс, "подробности". Итак, моя надбавка должна быть:

<div class="details show">[Details]</div> или <div class="details hide">[Details]</div>

Ниже я показываю некоторые неудачные попытки (итоговая надбавка, предполагающая отсутствие деталей).

Это: <div @(@Model.Details.Count > 0 ? "class=details show" : "class=details hide")>,

сделает это: <div class="details" hide="">.

Это: <div @(@Model.Details.Count > 0 ? "class=\"details show\"" : "class=\"details hide\"")>.

сделает это: <div class=""details" hide"="">.

Это: <div @(@Model.Details.Count > 0 ? "class='details show'" : "class='details hide'")>

сделает это: <div class="'details" hide'="">.

Ни одна из них не является правильной надписью.

Ответ 1

Я считаю, что все еще может быть и действительная логика на представлениях. Но для такого рода вещей я согласен с @BigMike, он лучше размещается на модели. Сказав, что проблема может быть решена тремя способами:

Ваш ответ (если это работает, я не пробовал это):

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

Вторая опция:

@if (Model.Details.Count > 0) {
    <div class="details show">
}
else {
    <div class="details hide">
}

Третий вариант:

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

Ответ 2

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

отобразит это: <div class="details hide"> и это надпись, которую я хочу.

Ответ 3

Вы можете добавить свойство к своей модели следующим образом:

    public string DetailsClass { get { return Details.Count > 0 ? "show" : "hide" } }

и тогда ваше представление будет проще и не будет содержать никакой логики:

    <div class="details @Model.DetailsClass"/>

Это будет работать даже со многими классами и не будет отображать класс, если он равен null:

    <div class="@Model.Class1 @Model.Class2"/>

с 2 не нулевыми свойствами отобразит:

    <div class="class1 class2"/>

если class1 имеет значение null

    <div class=" class2"/>