web-dev-qa-db-fra.com

Comment ajouter une deuxième classe CSS avec une valeur conditionnelle dans rasoir MVC 4

Bien que Microsoft ait créé rendu automatique des attributs html dans le rasoir MVC4, il m'a fallu un certain temps pour savoir comment rendre une seconde classe css sur un élément, basée sur une expression rasoir conditionnelle. J'aimerais le partager avec toi.

En fonction d'une propriété de modèle @ Model.Details, je souhaite afficher ou masquer un élément de la liste. S'il y a des détails, une div devrait être montrée, sinon, elle devrait être cachée. Avec jQuery, tout ce que j'ai à faire est d’ajouter une classe à afficher ou à masquer, respectivement. Pour d'autres raisons, je souhaite également 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 infructueuses (le résultat obtenu en supposant qu’il n’ya pas de détails).

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

rendra ceci: <div class="details" hide="">.

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

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

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

rendra ceci: <div class="'details" hide&#39;="">.

Aucun de ceux-ci ne sont corrects.

razorasp.net-mvc-4html
131
R. Schreurs

Je crois qu'il peut toujours y avoir une logique valable sur les vues. Mais pour ce genre de choses, je suis d’accord avec @BigMike, c’est mieux placé sur le modèle. Cela dit, le problème peut être résolu de trois manières:

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

<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"))">
255
von v.

Cette:

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

rendra ceci:

    <div class="details hide">

et est la marge que je veux.

61
R. Schreurs

Vous pouvez ajouter des propriétés à 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:

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

Cela fonctionnera même avec beaucoup de classes et ne rendra pas la classe si elle est nulle:

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

avec 2 propriétés non nulles rendra:

    <div class="class1 class2"/>

si class1 est null

    <div class=" class2"/>
23
syned

Vous pouvez utiliser la fonction String.Format pour ajouter une deuxième classe en fonction de la condition:

<div class="@String.Format("details {0}", Details.Count > 0 ? "show" : "hide")">
1
Chetan Gaonkar