Atributos HTML condicionales usando Razor MVC3

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

No quiero incluir un class = "" vacío en el HTML de este elemento de entrada, lo que significa que si strCSSClass está vacío, 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) />

¿Existe 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 de Razor, pero en Razor 2 (Web Pages 2 y MVC 4) tendremos atributos condicionales integrados en Razor (a partir de MVC 4 RC probado con éxito), por lo que solo puede 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. :)

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 una navaja para agregar 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=TopBorderpero los navegadores pueden analizar esto bien. Los analizadores de HTML son algo indulgentes con las comillas de atributos faltantes, pero esto puede romperse si tiene espacios o ciertos caracteres .

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

O

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

¿Qué falla al proporcionar sus propias cotizaciones?

Si intenta utilizar algunas de las convenciones habituales de C # para las citas anidadas, terminará con más citas de las que esperaba porque Razor está tratando de 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 de todos los resultados de C # y, por lo tanto, produce:

style="border:0px"

Solo verá esto si ve la respuesta en la red. Si usa un inspector de HTML, a menudo verá el DOM, no el HTML sin formato. Los navegadores analizan HTML en el DOM, y la representación 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, las agrega:

style=""border:0px""

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

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 exteriores reales y comillas interiores codificadas en HTML.

Entonces, el problema de intentar hacer las citas usted mismo es que Razor se les escapa.

Si quieres un control total de las cotizaciones

Utilice Html.Raw para evitar que las comillas escapen:

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

Se renderiza como:

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

Lo anterior es perfectamente seguro porque no estoy generando ningún HTML desde 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 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 una terminación prematura del atributo y la etiqueta, luego comience una etiqueta de secuencia de comandos que haga algo en nombre del usuario actualmente conectado 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 cambia instantáneamente su contraseña a una contraseña que el usuario malintencionado conoce.

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

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

@* ... *@

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

Si esta forma le resulta útil, le recomiendo definir el diccionario htmlAttren su modelo para que su vista no necesite ningún @{ }bloque lógico (sea más claro).