Comment ajouter une deuxième classe css avec une valeur conditionnelle dans razor MVC 4

alors que Microsoft a créé quelques rendu automatique des attributs html dans razor MVC4, il m'a fallu un certain temps pour trouver comment rendre une deuxième classe css sur un élément, basé sur une expression de razor conditionnelle. Je tiens à partager avec vous.

, Basé sur le modèle de la propriété @Modèle.Les détails, je veux afficher ou masquer un élément de la liste. S'il y a des détails, un div doit être affiché, sinon, il doit être caché. En utilisant jQuery, tout I devez faire est d'ajouter une classe d'afficher ou de masquer, respectivement. À d'autres fins, Je veux aussi ajouter une autre classe, "détails". Donc, ma marge devrait être:

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

ci-dessous, je montre quelques tentatives ratées (résultat de majoration en supposant qu'il n'y a pas de détails).

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

va rendre ceci: <div class="details" hide=""> .

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

va rendre ceci: <div class=""details" hide&quot;=""> .

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

va rendre ceci: <div class="'details" hide'=""> .

aucun de ces éléments ne constitue une majoration correcte.

112
demandé sur Community 2013-03-29 13:40:29

3 réponses

je crois qu'il peut encore y avoir et la logique valide sur les vues. Mais pour ce genre de choses je suis d'accord avec @BigMike, il est mieux placé sur le modèle. Cela dit, le problème peut être résolu de trois façons:

Votre réponse (en supposant que cela fonctionne, je n'ai pas essayé): 

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

deuxième option: 

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

troisième option: 

<div class="@("details " + (Model.Details.Count>0 ? "show" : "hide"))">
209
répondu von v. 2013-03-29 10:01:53

: 

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

va rendre ceci: 

    <div class="details hide">

et c'est la majoration que je veux.

54
répondu R. Schreurs 2018-01-22 18:01:49

vous pouvez ajouter une propriété à votre modèle comme suit: 

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

et alors votre vue sera plus simple et ne contiendra aucune logique du tout: 

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

cela fonctionnera même avec de nombreuses classes et ne rendra pas Classe si elle est nulle: 

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

avec 2 propriétés non null rendra: 

    <div class="class1 class2"/>

si la catégorie 1 est nulle 

    <div class=" class2"/>
23
répondu syned 2013-07-23 19:36:57