Як додати другий клас css із умовним значенням у бритві MVC 4

149

У той час як 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'="">.

Жодне з них не є правильним розмітом.

razor asp.net-mvc-4 html

— Р. Шреурс
джерело

Усі ваші перші рішення спрацювали б, якби ви перетворили їх у новий екземпляр MvcHtmlString або використовували Html.Raw

— Kyle

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

Звичайно, це буде так, як написано тут не повний код, а скоріше частина коду, про яку йдеться. Хто знає, скільки інших елементів у діві;)

— 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")">

— Кріс Дівер

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"/>

— синхронізовано
джерело

11

Я думаю, що краще дозволити погляду визначати такі речі, як класи css. Пам'ятайте, що вигляд має бути спроможним змінити (або навіть замінити), не впливаючи на модель перегляду

— tobiak777

1

Хоча я погоджуюся з Reddy загалом, можуть бути випадки, коли це може бути виправдано робити так, як це сказано. Я це робив саме так. У моєму випадку я покладаюся на об’єкт ViewModel, повний інформації для надання представлення, це не лише об’єкт даних.

— Гонсало Мендес

1

Я використовував би це так, якби було більше двох результатів. Наприклад для 5 можливих занять. Тож було б безладно тримати це в зорі.

— Матеуш Мігала

1

Вид - правильне місце. Відформатуйте його красиво у вигляді змінних призначень у блоці коду, і він не буде безладним.

— Том Блоджет

3

Ви можете використовувати функцію String.Format, щоб додати другий клас на основі умови:

<div class="@String.Format("details {0}", Details.Count > 0 ? "show" : "hide")">

— Четан Гаонкар
джерело