Cómo agregar una segunda clase de CSS con un valor condicional en razor MVC 4


Answers

Esta:

    <div class="details @(@Model.Details.Count > 0 ? "show" : "hide")">

rendirá esto:

    <div class="details hide">

y es el margen de ganancia que quiero.

Question

Mientras que Microsoft ha creado una representación automática de los atributos html en razor MVC4, me tomó bastante tiempo descubrir cómo renderizar una segunda clase css en un elemento, en base a una expresión de afeitado condicional. Me gustaría compartirlo contigo.

Basado en una propiedad modelo @ Model.Details, quiero mostrar u ocultar un elemento de la lista. Si hay detalles, se debe mostrar un div, de lo contrario, debe ocultarse. Usando jQuery, todo lo que necesito hacer es agregar una clase show u ocultar, respectivamente. Para otros fines, también quiero agregar otra clase, "detalles". Entonces, mi margen de ganancia debería ser:

<div class="details show">[Details]</div> o <div class="details hide">[Details]</div>

A continuación, muestro algunos intentos fallidos (el marcado resultante suponiendo que no hay detalles).

Esto: <div @(@Model.Details.Count > 0 ? "class=details show" : "class=details hide")> ,

lo renderizará: <div class="details" hide=""> .

Esto: <div @(@Model.Details.Count > 0 ? "class=\"details show\"" : "class=\"details hide\"")> .

lo renderizará: <div class=""details" hide&quot;=""> .

Esto: <div @(@Model.Details.Count > 0 ? "class='details show'" : "class='details hide'")>

renderizará esto: <div class="'details" hide&#39;=""> .

Ninguno de estos son los márgenes correctos.




Related