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




2 Answers

Creo que todavía puede haber una lógica válida en las vistas. Pero para este tipo de cosas estoy de acuerdo con @BigMike, está mejor ubicado en el modelo. Dicho esto, el problema se puede resolver de tres maneras:

Tu respuesta (suponiendo que esto funcione, no lo he intentado):

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

Segunda opción:

@if (Model.Details.Count > 0) {
    <div class="details show">
}
else {
    <div class="details hide">
}

Tercera opción:

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

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.




Puede agregar propiedades a su modelo de la siguiente manera:

    public string DetailsClass { get { return Details.Count > 0 ? "show" : "hide" } }

y luego su vista será más simple y no contendrá ninguna lógica:

    <div class="details @Model.DetailsClass"/>

Esto funcionará incluso con muchas clases y no representará la clase si es nula:

    <div class="@Model.Class1 @Model.Class2"/>

con 2 propiedades no nulos se renderizará:

    <div class="class1 class2"/>

si class1 es nulo

    <div class=" class2"/>



Related