Условные атрибуты HTML с использованием Razor MVC3

Question

Переменная strCSSClass часто имеет значение, но иногда пуста.

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

Ниже приведен один из способов создания условного атрибута HTML:

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

Есть ли более элегантный способ сделать это? В частности, тот, где я мог бы использовать тот же синтаксис, который используется в других частях элемента: class = "@ strCSSClass"?

Answer 1

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

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

Если strCSSClass равен нулю, атрибут класса вообще не будет отображаться.

SSSHHH ... не говорите.:)

Answer 2

Обратите внимание, что вы можете сделать что-то вроде этого (по крайней мере, в 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""

Но в DOM-инспекторе коды символов HTML отображаются правильно, поэтому вы действительно видите:

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>, и теперь любой другой пользователь, просматривающий эту страницу, мгновенно сменил свой пароль напароль, который знает злоумышленник.

Answer 3

Я думаю, что более удобный и структурированный способ - использовать Html helper. На ваш взгляд это может выглядеть так:

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

@* ... *@

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

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