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

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

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

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

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

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

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

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

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

СШШШ ... не говори. :)

Обратите внимание, что вы можете сделать что-то вроде этого (по крайней мере, в MVC3):

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

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

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

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

@* ... *@

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

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