Atributos HTML condicionales usando Razor

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

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

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

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

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

No lo escuchó de mí, el PM para Razor, pero en Razor 2 (Páginas web 2 y MVC 4) tendremos atributos condicionales integrados en Razor (a partir de MVC 4 RC probado con éxito), para que pueda escribir cosas como esto:

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

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

Otras lecturas

• Jon Galloway – ¡Lanzamiento de ASP.NET MVC 4 Beta!
• Atributos condicionales en Razor View Engine y ASP.NET MVC 4

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

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

Lo que creía que era una navaja que agregaba comillas era en realidad el navegador. Como señaló Rism al probar con MVC 4 (no he probado con MVC 3 pero supongo que el comportamiento no ha cambiado), esto en realidad produce class=TopBorder pero los navegadores pueden analizar esto bien. Los analizadores HTML son algo indulgentes con las comillas de atributos que faltan, pero esto puede fallar si tiene espacios o ciertos caracteres.

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

O

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

Qué sale mal al proporcionar sus propias cotizaciones

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

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

Este debería evaluar a <button type="button" style="border:0px"> pero Razor escapa a todos los resultados de C# y, por lo tanto, produce:

style="border:0px"

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

style=""border:0px""

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

style=""border:0px""

En Chrome, si hace clic con el botón derecho y selecciona Editar HTML, vuelve a cambiar para que pueda ver esos desagradables códigos de caracteres HTML, lo que deja en claro que tiene comillas externas reales y comillas internas codificadas en HTML.

Entonces, el problema de tratar de hacer la cita usted mismo es que Razor se escapa de esto.

Si desea un control completo de las cotizaciones

Use Html.Raw para evitar que se escapen las cotizaciones:

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

Representa como:

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

Lo anterior es perfectamente seguro porque no estoy generando ningún HTML de una variable. La única variable involucrada es la condición ternaria. Sin embargo, tener cuidado que esta última técnica podría exponerlo a ciertos problemas de seguridad si crea cadenas a partir de datos proporcionados por el usuario. Por ejemplo, si creó 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 un final prematuro del atributo y la etiqueta, luego comenzar una etiqueta de secuencia de comandos que hace algo en nombre de la persona que inició sesión actualmente. usuario (posiblemente diferente al usuario que inició sesión). 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 nombró a sí mismo. '/><script>$.post('changepassword.php?password=123')</script> y ahora cualquier otro usuario que vea esta página tiene su contraseña instantáneamente cambiada a una contraseña que el usuario malintencionado conoce.

Supongo que una forma un poco más conveniente y estructurada es usar el asistente Html. En su opinión, puede verse como:

@{
 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 te será útil, te recomiendo que definas el diccionario. htmlAttr en su modelo para que su vista no necesite ninguna @{ } bloques lógicos (sea más claro).