Conditionnel Attributs HTML à l'aide de Rasoir MVC3

La variable strCSSClass a souvent une valeur, mais il est parfois vide.

Je ne veux pas d'inclure une classe vide="" dans cette entrée de l'élément HTML, ce qui signifie que si strCSSClass est vide, je ne veux pas l'attribut class= à tous.

Ce qui suit est une façon de le faire conditionnelle d'un attribut HTML:

<input type="text" id="@strElementID" @(CSSClass.IsEmpty() ? "" : "class=" + strCSSClass) />

Est-il une façon plus élégante de le faire? Plus précisément celui où j'ai pu suivre la même syntaxe que celle utilisée dans les autres parties de l'element: class="@strCSSClass" ?

InformationsquelleAutor tony722 | 2011-11-09
  1. 154

    Vous n'avez pas l'entendre de moi, l'après-midi pour un Rasoir, mais en Rasoir 2 (Pages Web 2 et MVC 4) nous aurons conditionnelle attributs construit dans de Rasoir(comme de la MVC 4 RC testé avec succès), de sorte que vous pouvez dire des choses comme ça...

    <input type="text" id="@strElementID" class="@strCSSClass" />

    Si strCSSClass est null, alors l'attribut de classe ne sont pas rendues à tous.

    SSSHHH...ne le dites pas. 🙂

    • Yup, vous ne devriez pas accepter la mienne comme la réponse. Cela dit, aujourd'hui, il n'est pas le moyen le plus propre à le faire (d'où nous sommes en train de créer une façon plus propre de le faire). Probablement la façon la plus propre de le faire est d'utiliser le langage Html.Zone de texte, mais qui a un ensemble différent de moins souhaitable de choses pour elle. 🙁 Heureux que vous aimez ce que nous sommes en ajoutant cependant. 🙂
    • Mais comment puis-je combiner Rasoir attributs avec d'autres textes? J'ai besoin de faire ce qui suit: ... id="[email protected]". Je l'ai attendu quelque chose comme ...id="track_2", mais il produit la sortie suivante: ...id="[email protected]"...
    • Vous pouvez forcer Rasoir pour évaluer code en mettant des parenthèses autour d'elle. id="track_@(piste.ID)"
    • Vous voulez dire que l'ensemble de la " classe=""' attribut disparaît? Difficile à croire. Rasoir de l'analyseur ne beaucoup plus que je ne le croyais.
    • Seulement si vous rendre quelque chose à l'intérieur de l'attribut de classe et si ce quelque chose est une valeur null. Sinon, il va encore rendre.
    • Ajout d'une note indiquant que cela fonctionne correctement avec MVC 4. Si vous êtes sur MVC 3 voir ma réponse ci-dessous.
    • J'aime la façon dont elle supprime l'espacement entourant l'affectation d'attribut si elle n'est pas utilisée.
    • S'IL VOUS PLAÎT NE PLAISANTE PAS AVEC MON CODE HTML!! voir aussi stackoverflow.com/questions/9234467/... ce aussi bien pour d'autres mauvais comportement
    • Ont à un accord avec vous, à mon humble avis il y a trop de magie qui se passe ici. Il y a une solution pour certains de ces cas <td @Html.Raw( someBoolean ? "rel='tooltip' title='Drilldown' data-container='.drillDown a'" : "" )> permettra d'éviter le rasoir d'essayer d'ajouter ses propres citations(je pense que les Rasoirs "magie" est en partie une fonction de sécurité, donc vous devez utiliser Raw pour le contourner)
    • Yup. Le rasoir est destiné à être assez magique par défaut, mais il devrait toujours y avoir des moyens pour éviter la magie quand vous le voulez. Btw, je ne travaille pas chez Microsoft plus (comme d'il ya environ un an). 🙂
    • J'ai toujours aimé Rasoir c'est le manque de la magie de l'OMI qui le rend facile à écrire un tas de code et d'obtenir les résultats escomptés en un seul passage, plutôt que beaucoup de guess-de vérifier, c'est par rapport à d'autres anciens MS technologies. J'espère que vous appréciez votre de nouveaux efforts.
    • grand. Veuillez consulter la ceci la poste, en plus de l'opérateur ternaire qui est grand, il devrait y avoir un unaire de l'opérateur booléen qui rend seulement si la valeur est true. Par exemple <span class="@(if(flag, "active"))"/> ou quoi que ce soit avec de plus simple/fourchette/syntaxe plus courte que cela.
    • Cela ne fonctionne pas pour les attributs de données (et éventuellement un attribut qu'il ne reconnaît pas). Ce que vous finissez avec est un attribut avec une valeur nulle. E. g. <input type="text" data-x /> , de sorte que vous finissez par avoir à faire est une instruction conditionnelle avec 2 blocs de presque la même balise.

    InformationsquelleAutor Erik Porter
  2. 117

    Remarque vous pouvez faire quelque chose comme ceci(au moins dans MVC3):

    <td align="left" @(isOddRow ? "class=TopBorder" : "style=border:0px") >

    Ce que j'ai cru a été remporté par l'ajout de citations, était en fait le navigateur. Comme Rism a souligné lors de l'essai avec MVC 4(je n'ai pas testé avec MVC 3, mais je suppose que le comportement n'a pas changé), ce produit class=TopBorder mais les navigateurs sont en mesure d'analyser cette amende. Le HTML analyseurs sont quelque peu indulgent sur les disparues de l'attribut cite, mais cela peut se briser si vous avez des espaces ou des caractères.

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

    OU

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

    Ce qui va mal avec vos propres citations

    Si vous essayez d'utiliser certains d'habitude C# conventions pour les citations imbriquées, vous vous retrouverez avec plus de citations que vous négocié parce que le Rasoir est en essayant de sortir en toute sécurité entre eux. Par exemple:

    <button type="button" @(true ? "style=\"border:0px\"" : string.Empty)>

    Ce devrait évaluer à <button type="button" style="border:0px"> mais de Rasoir échappe à toute sortie de C# et produit ainsi:

    style=&quot;border:0px&quot;

    Vous ne verrez que si vous affichez la réponse sur le réseau. Si vous utilisez un HTML inspecteur, souvent, vous êtes en train de voir le DOM, pas le HTML brut. Les navigateurs analyser HTML dans le DOM, et l'après analyse de DOM représentation a déjà quelques subtilités appliquée. Dans ce cas, le Navigateur voit il n'y a pas de guillemets autour de la valeur de l'attribut, ajoute:

    style="&quot;border:0px&quot;"

    Mais dans l'inspecteur DOM HTML codes de caractères s'afficher correctement si vous en fait voir:

    style=""border:0px""

    En Chrome, si vous faites un clic droit et sélectionnez " Modifier le code HTML, il passer de retour de sorte que vous pouvez voir ces vilaines HTML codes de caractères, ce qui montre clairement que vous avez réel extérieur des guillemets, et HTML codé intérieur des guillemets.

    Donc, le problème avec le fait d'essayer de faire la citation est de vous Rasoir échappe à ces.

    Si vous voulez un contrôle total de citations

    Utiliser Le Langage Html.Premières pour les empêcher de citer échapper:

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

    Rend comme:

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

    Ci-dessus est tout à fait sûr parce que je ne suis pas sortie de code HTML à partir d'une variable. La seule variable est la condition ternaire. Cependant, méfiez-vous que cette dernière technique peut vous exposer à certains problèmes de sécurité si le bâtiment de chaînes à partir de données fournies par les utilisateurs. E. g. si vous avez construit un attribut à partir de champs de données qui proviennent de données fournies par les utilisateurs, l'utilisation de Html.Raw signifie que la chaîne peut contenir une fin prématurée de l'attribut et de la balise, puis commencer une balise de script qui fait quelque chose au nom de l'utilisateur actuellement connecté(éventuellement différent de l'utilisateur connecté). Peut-être que vous avez une page avec une liste de tous les utilisateurs des photos et que vous définissez une info-bulle le nom de chaque personne, et l'un des utilisateurs est nommé lui-même '/><script>$.post('changepassword.php?password=123')</script> et maintenant, de tout autre utilisateur qui consulte cette page a leur mot de passe instantanément changé un mot de passe que l'utilisateur malveillant sait.

    • C'est un très bon point! Et effectivement, il rend lisible et utilisable dans la plupart des situations.
    • C'est ce que je faisais dans l'exemple dans ma question. Merci pour une version plus élaborée explication et exemple. 🙂
    • Méfiez-vous des espaces de bien. "style= display : none;" rend none;="" :="" style="display"
    • Je pense que c'est la solution exacte de ce problème +1
    • Cela rend les choses bien lisible! Je suis d'accord que c'est la solution exacte de ce problème!
    • Cela fonctionne très bien pour MVC 3... ne peut pas attendre pour la mise à niveau vers mvc 4.
    • Alors pourquoi n'est-ce pas le travail re: la magie des guillemets doubles <span @(vrai ? "class=logo-propriétaire" : string.Vide) /> Il ne produit que <span class=logo-propriétaire />
    • Fonctionne très bien dans ce violon: dotnetfiddle.net/sGBuXi
    • Hmm pas pour moi quand je le lance j'obtiens <button type="button" class=btn>Ternaire Sans trait d'union</button> pas d'auto fournis par des guillemets doubles.
    • Lors de l'exécution du violon en cliquant sur votre lien et faire un affichage de la source. Je reçois des <button type="button" class=btn>Ternaire Sans trait d'union</button> <button type="button" class=btn-success>Ternaire Sans trait d'union</button> via view-source:dotnetfiddle.net/MvcPage/9bd10c2dc2a347be85057732abfb2237
    • Un bouton est gris avec des bordures arrondies, et l'autre vert à coins carrés. Je soupçonne votre navigateur HTML inspecteur ou une extension, est de jouer avec l'affichage du HTML.
    • Oui, c'est exactement la façon dont ils sont. Cant comprendre comment le navigateur (Chrome 40/FF33.1/IE 10) aurait une incidence sur quoi que ce soit depuis ce serveur est générée balisage et si oui, comment se fait uniquement ces deux attributs de classe, mais pas pour la classe de l'attribut de demander le bouton ou encore le type="button" attributs de tous les trois boutons. Certainement un serveur de chose à mon humble avis car je ne peux également RDP dans un couple de Azure virtual machines disséminés dans le monde entier pour le même résultat IE/Firefox/Chrome.
    • Je suis passé à l'onglet réseau pour voir exactement ce qui a été renvoyé sur le fil, et en effet je peux voir ce que vous avez décrit, l'absence de guillemets. Afin de chrome doit être de réparer le manque des guillemets lors de l'analyse du code HTML dans le DOM.
    • Grâce rism, après avoir découvert cela, je me suis souvenu de quelques nuances de la façon Chrome poignées de l'affichage des codes de caractères dans le code HTML de l'inspecteur, ce qui a révélé le mystère de pourquoi en essayant de fournir vos propres citations résultats de guillemets doubles. J'ai mis à jour la question avec les nouveaux résultats, qui a invalidé certaines de mes précédemment sur des hypothèses erronées sur le lieu où la double citant la provenance.

    InformationsquelleAutor AaronLS
  3. 11

    Je suppose un peu plus pratique et structurée de la façon est d'utiliser helper Html. À votre avis, il peut ressembler à:

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

@* ... *@

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

    Si de cette façon sera utile pour vous je vous recommande de définir dictionnaire htmlAttr dans votre modèle, de sorte que votre vue n'a pas besoin de tout @{ } des blocs logiques (plus clair).

    • -1, jamais de recommander à quelqu'un de mettre de la logique dans les vues. Ce point de vue devrait seulement être responsable pour le rendu. Ajouter un HtmlHelper exemple à la place et je vais vous donner +1.
    • De tester des choses que je peux utiliser le bloc de code en vue - c'est plus rapide. Et ma recommandation est de déplacer ce bloc dans le modèle.
    • oui, mais les réponses devraient montrer le meilleur de la pratique et de ne pas le quick and dirty version qui rend la maintenance du code d'un cauchemar.
    • Je pense que helper Html ici est inutile. voir ma réponse.
    • +1 @Yaschur Votre réponse est source d'inspiration. Maintenir le bon travail. c'est à dire. avec C# explicite de la fonction de conversion, nous pouvons améliorer cette réponse encore plus. Pas tout le code doit être en forme, d'une certaine façon. Il y a toujours une meilleure façon, nous ne sommes pas conscients. Et certains des projets sont en faveur de l'organisation du code. Code de l'organisation sont en pratique pas les concepts!
    InformationsquelleAutor Yaschur