Умовні атрибути HTML за допомогою Razor MVC3

Змінна strCSSClass часто має значення, але іноді порожня.

Я не хочу включати порожній клас = "" в HTML цього вхідного елемента, це означає, що якщо strCSSClass порожній, я взагалі не хочу атрибут class =.

Ось один із способів зробити умовний атрибут HTML:

<input type="text" id="@strElementID" @(CSSClass.IsEmpty() ? "" : "class=" + strCSSClass) />

Чи є більш елегантний спосіб зробити це? Зокрема, там, де я міг би дотримуватися того самого синтаксису, який використовується в інших частинах елемента: class = "@ strCSSClass"?

Ви цього не чули від мене, прем’єр-міністра для Razor, але в Razor 2 (Веб-сторінки 2 та MVC 4) у нас будуть вбудовані умовні атрибути (на MVC 4 RC успішно перевірено), тож ви можете просто сказати такі речі ...

<input type="text" id="@strElementID" class="@strCSSClass" />

Якщо strCSSClass недійсний, то атрибут класу взагалі не відображатиметься.

SSSHHH ... не кажи. :)

Зауважте, що ви можете зробити щось подібне (принаймні в MVC3):

<td align="left" @(isOddRow ? "class=TopBorder" : "style=border:0px") >

Те, що я вважав, що бритви додають котирування, - це насправді браузер. Як вказував Rism під час тестування на MVC 4 (я не тестував MVC 3, але я припускаю, що поведінка не змінилася), це фактично призводить до отримання, class=TopBorderале браузери можуть розбирати цей штраф. HTML-парсери дещо прощають пропущені цитати атрибутів, але це може зламатися, якщо у вас є пробіли чи певні символи .

<td align="left" class="TopBorder" >

АБО

<td align="left" style="border:0px" >

Що не так у наданні власних котирувань

Якщо ви спробуєте використати деякі звичні конвенції C # для вкладених цитат, у вас з’явиться більше цитат, ніж ви торгувались, тому що Razor намагається безпечно уникнути їх. Наприклад:

<button type="button" @(true ? "style=\"border:0px\"" : string.Empty)>

Це слід оцінювати, <button type="button" style="border:0px">але Razor уникає всього виходу з C # і, таким чином, виробляє:

style="border:0px"

Ви побачите це лише тоді, коли будете переглядати відповідь по мережі. Якщо ви використовуєте інспектор HTML, часто ви бачите DOM, а не сирий HTML. Браузери розбирають HTML у DOM, і представлення DOM після розбору вже застосовує деякі приналежності. У цьому випадку Браузер бачить, що навколо атрибута немає лапок, додає їх:

style=""border:0px""

Але в коді символів HTML інспектора DOM відображаються належним чином, так що ви дійсно бачите:

style=""border:0px""

У Chrome, якщо ви клацніть правою кнопкою миші та виберіть "Редагувати HTML", вона переключиться назад, щоб ви могли бачити ці неприємні коди символів HTML, що дає зрозуміти, що у вас є справжні зовнішні лапки та HTML, кодовані внутрішні цитати.

Тож проблема із спробою зробити цитування самостійно полягає в тому, що Razor уникає цих.

Якщо ви хочете повного контролю над цитатами

Використовуйте Html.Raw, щоб запобігти виходу цитати:

<td @Html.Raw( someBoolean ? "rel='tooltip' data-container='.drillDown a'" : "" )>

Відображається як:

<td rel='tooltip' title='Drilldown' data-container='.drillDown a'>

Вищезазначене є абсолютно безпечним, оскільки я не вивожу жодного HTML із змінної. Єдина змінна - це потрійний стан. Однак майте на увазі, що ця остання методика може піддавати вас певним проблемам із безпекою, якщо будувати рядки з даних, наданих користувачем. Наприклад, якщо ви створили атрибут з полів даних, що походять від даних, що надаються користувачем, використання Html.Raw означає, що рядок може містити передчасне закінчення атрибута та тегу, а потім розпочати тег сценарію, який робить щось від імені поточного входу користувач (можливо, відрізняється від зареєстрованого користувача). Можливо, у вас є сторінка зі списком усіх зображень користувачів, і ви встановлюєте підказку, щоб бути ім'ям користувача кожної людини, і один користувач назвав себе'/><script>$.post('changepassword.php?password=123')</script> і тепер будь-який інший користувач, який переглядає цю сторінку, свій пароль миттєво змінив на пароль, який знає шкідливий користувач.

Я думаю, трохи більш зручним і структурованим способом є використання помічника Html. На ваш погляд, це може виглядати так:

@{
 var htmlAttr = new Dictionary<string, object>();
 htmlAttr.Add("id", strElementId);
 if (!CSSClass.IsEmpty())
 {
   htmlAttr.Add("class", strCSSClass);
 }
}

@* ... *@

@Html.TextBox("somename", "", htmlAttr)

Якщо цей спосіб буде корисним для вас, я рекомендую визначити словник htmlAttrу вашій моделі, щоб ваш погляд не потребував @{ }логічних блоків (будьте більш чіткими).