que - Atributos de HTML condicionales usando Razor MVC3

razor if

Question

La variable strCSSClass a menudo tiene un valor, pero a veces está vacía.

No quiero incluir una clase vacía = "" en el HTML de este elemento de entrada, lo que significa que si strCSSClass está vacío, no quiero el atributo class =.

La siguiente es una forma de hacer un atributo HTML condicional:

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

¿Hay una manera más elegante de hacer esto? Específicamente uno donde podría seguir la misma sintaxis que se usa en las otras partes del elemento: class = "@ strCSSClass"?

Answer 1

No lo escuchó de mí, el PM de Razor, pero en Razor 2 (páginas web 2 y MVC 4) tendremos atributos condicionales incorporados en Razor (a partir de MVC 4 RC probado con éxito), por lo que puede simplemente decir cosas como esta ...

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

Si strCSSClass es nulo, el atributo de clase no se representará en absoluto.

SSSHHH ... no lo digas. :)

Answer 2

Supongo que una forma un poco más conveniente y estructurada es usar Html helper. En su opinión, se puede ver así:

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

@* ... *@

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

Si de esta manera será útil para usted, le recomiendo que defina el diccionario htmlAttr en su modelo para que su vista no necesite ningún bloque lógico @{ } (sea más claro).

Answer 3

Tenga en cuenta que puede hacer algo como esto (al menos en MVC3):

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

Lo que yo creía que era utilizar navajas para agregar presupuestos, en realidad era el navegador. Como señaló Rism cuando probaba con MVC 4 (no lo he probado con MVC 3, pero supongo que el comportamiento no ha cambiado), esto realmente produce class=TopBorder pero los navegadores son capaces de analizar esto bien. Los analizadores de HTML son algo indulgentes con las comillas de atributo que faltan, pero esto puede romperse si tiene espacios o ciertos caracteres .

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

O

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

Qué sale mal al proporcionar tus propias citas

Si intenta utilizar algunas de las convenciones habituales de C # para las comillas anidadas, obtendrá más comillas de las que esperaba porque Razor está intentando escapar de ellas de forma segura. Por ejemplo:

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

Esto debería evaluar a <button type="button" style="border:0px"> pero Razor escapa a todos los resultados de C # y así produce:

style="border:0px"

Solo verá esto si visualiza la respuesta en la red. Si usa un inspector de HTML, a menudo está viendo el DOM, no el HTML sin procesar. Los navegadores analizan el HTML en el DOM, y la representación del DOM posterior al análisis ya tiene algunas sutilezas aplicadas. En este caso, el navegador ve que no hay comillas alrededor del valor del atributo, los agrega:

style=""border:0px""

Pero en el inspector de DOM, los códigos de caracteres HTML se muestran correctamente, de modo que realmente ve:

style=""border:0px""

En Chrome, si hace clic derecho y selecciona Editar HTML, retrocede para que pueda ver esos desagradables códigos de caracteres HTML, dejando en claro que tiene comillas externas reales y comillas internas codificadas en HTML.

Entonces, el problema de tratar de hacer las citas usted mismo es que Razor escapa de estos.

Si quieres un control completo de las cotizaciones

Use Html.Raw para evitar el escape de cotizaciones:

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

Renders como:

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

Lo anterior es perfectamente seguro porque no estoy sacando ningún HTML de una variable. La única variable involucrada es la condición ternaria. Sin embargo, tenga en cuenta que esta última técnica podría exponerlo a ciertos problemas de seguridad si crea cadenas de datos proporcionados por el usuario. Por ejemplo, si construyó un atributo a partir de campos de datos que se originaron a partir de datos proporcionados por el usuario, el uso de Html.Raw significa que la cadena podría contener una terminación prematura del atributo y la etiqueta, y luego comenzar una etiqueta de script que haga algo en nombre de la persona actualmente registrada usuario (posiblemente diferente del usuario conectado). Tal vez tenga una página con una lista de todas las imágenes de los usuarios y está configurando una información sobre herramientas para que sea el nombre de usuario de cada persona, y un usuario se llamó a sí mismo ''/><script>$.post(''changepassword.php?password=123'')</script> y ahora cualquier otro usuario que vea esta página tiene su contraseña cambiada instantáneamente a una contraseña que el usuario malicioso conoce.