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

149

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

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

<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&quot;="">.

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

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

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

razor asp.net-mvc-4 html Р. Шреурс
источник
Все ваши первые решения сработали бы, если бы вы поместили их в новый экземпляр MvcHtmlString или использовали Html.Raw
Кайл,

Ответы:

301

Я считаю, что все же может существовать и действительная логика взглядов. Но для такого рода вещей я согласен с @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"))">
фон v.
источник
2
Я принял это как ответ, так как он предлагает больше вариантов, чем мой.
Р. Шреурс
18
Второй вариант вызывает ошибкуThe "div" element was not closed
intrepidis
6
Конечно, поскольку то, что здесь написано, будет не полным кодом, а частью кода, о котором идет речь. Кто знает, сколько других элементов в div;)
von v.
Не работал для меня Я получил эту ошибку'ClubsModel' does not contain a definition for 'ClubsFilter' and no extension method 'ClubsFilter' accepting a first argument of type 'ClubsModel' could be found (are you missing a using directive or an assembly reference?)
Мартин Эрлик
Как ваша проблема связана с опубликованным вопросом?
фон против
69

Это:

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

окажет это:

    <div class="details hide">

и это наценка, которую я хочу.

Р. Шреурс
источник
1
Мне не нравится иметь логику в представлениях, даже если это тривиальная логика, я предпочитаю использовать объект ModelView с методом getDetailClass ().
BigMike
29
Лично я предпочитаю тривиальную логику, поскольку метод getDetailCssClass означает, что ваша Модель знает о вашем представлении, разрушая эту абстракцию. Я бы добавил метод HasDetails в модель, чтобы уменьшить логику, требуемую в представлении, а затем оставил бы логику класса css для представления, что означает, что вам не нужно засорять представление @Model.Details.Count > 0. например<div class="details @(@Model.HasDetails ? "show" : "hide")">
Chris Diver
26

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

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

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

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

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

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

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

    <div class="class1 class2"/>

если class1 равен нулю

    <div class=" class2"/>
syned
источник
11
Я думаю, что лучше позволить представлению определять такие вещи, как классы CSS. Помните, что представление должно быть легко изменено (или даже заменено), не влияя на модель представления
tobiak777
1
Хотя я согласен с Reddy в целом, могут быть случаи, когда это может быть оправдано так, как говорит Syned. Я сделал это именно так. В моем случае я полагаюсь на объект ViewModel, полный информации для визуализации представления, это не просто объект данных.
Гонсало Мендес
1
Я бы использовал это так, если бы было более 2 результатов. Например для 5 возможных классов. Чем было бы грязно держать это в поле зрения.
Матеуш Мигала
1
Вид это правильное место. Отформатируйте его как присваивание переменных в блоке кода, и он не будет беспорядочным.
Том Блоджет
3

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

<div class="@String.Format("details {0}", Details.Count > 0 ? "show" : "hide")">
Четан Гаонкар
источник