Bedingte HTML-Attribute mit Razor MVC3

Die Variable strCSSClass hat oft einen Wert, ist aber manchmal leer.

Ich möchte kein leeres class = "" in den HTML-Code dieses Eingabeelements aufnehmen. Wenn also strCSSClass leer ist, möchte ich das Attribut class = überhaupt nicht.

Das Folgende ist eine Möglichkeit, ein bedingtes HTML-Attribut zu erstellen:

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

Gibt es eine elegantere Möglichkeit, dies zu tun? Insbesondere eine, bei der ich der gleichen Syntax folgen könnte, die in den anderen Teilen des Elements verwendet wird: class = "@ strCSSClass"?

Sie haben es nicht von mir gehört, dem PM für Razor, aber in Razor 2 (Webseiten 2 und MVC 4) sind bedingte Attribute in Razor integriert (ab MVC 4 RC erfolgreich getestet), also können Sie einfach sagen Dinge wie dieses...

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

Wenn strCSSClass null ist, wird das Klassenattribut überhaupt nicht gerendert.

SSSHHH ... erzähl es nicht. :) :)

Beachten Sie, dass Sie so etwas tun können (zumindest in MVC3):

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

Was ich für rasiermesserscharf hielt, war eigentlich der Browser. Wie Rism beim Testen mit MVC 4 hervorhob (ich habe nicht mit MVC 3 getestet, aber ich gehe davon aus, dass sich das Verhalten nicht geändert hat), führt dies tatsächlich dazu, class=TopBorderaber Browser können dies in Ordnung analysieren. Die HTML-Parser verzeihen etwas fehlende Attribut-Anführungszeichen, aber dies kann brechen, wenn Sie Leerzeichen oder bestimmte Zeichen haben .

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

ODER

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

Was geht schief, wenn Sie Ihre eigenen Angebote machen?

Wenn Sie versuchen, einige der üblichen C # -Konventionen für verschachtelte Anführungszeichen zu verwenden, erhalten Sie mehr Anführungszeichen als erwartet, da Razor versucht, ihnen sicher zu entkommen. Beispielsweise:

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

Dies sollte ausgewertet werden, <button type="button" style="border:0px">aber Razor entgeht allen Ausgaben von C # und erzeugt somit:

style="border:0px"

Dies wird nur angezeigt, wenn Sie die Antwort über das Netzwerk anzeigen. Wenn Sie einen HTML-Inspektor verwenden, sehen Sie häufig tatsächlich das DOM und nicht das rohe HTML. Browser analysieren HTML in das DOM, und auf die DOM-Darstellung nach dem Parsen wurden bereits einige Feinheiten angewendet. In diesem Fall sieht der Browser, dass der Attributwert keine Anführungszeichen enthält, und fügt sie hinzu:

style=""border:0px""

Im DOM-Inspektor werden HTML-Zeichencodes jedoch ordnungsgemäß angezeigt, sodass Sie tatsächlich Folgendes sehen:

style=""border:0px""

Wenn Sie in Chrome mit der rechten Maustaste klicken und HTML bearbeiten auswählen, wird zurückgeschaltet, sodass Sie diese fiesen HTML-Zeichencodes sehen können. Dadurch wird deutlich, dass Sie echte äußere Anführungszeichen und HTML-codierte innere Anführungszeichen haben.

Das Problem beim Versuch, das Zitat selbst zu machen, ist, dass Razor diesen entgeht.

Wenn Sie die vollständige Kontrolle über Anführungszeichen wünschen

Verwenden Sie Html.Raw, um das Entweichen von Zitaten zu verhindern:

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

Rendert als:

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

Das Obige ist absolut sicher, da ich kein HTML von einer Variablen ausgebe. Die einzige Variable ist der ternäre Zustand. Beachten Sie jedoch, dass diese letzte Technik Sie bestimmten Sicherheitsproblemen aussetzen kann, wenn Sie Zeichenfolgen aus vom Benutzer bereitgestellten Daten erstellen. Wenn Sie beispielsweise ein Attribut aus Datenfeldern erstellt haben, die aus vom Benutzer bereitgestellten Daten stammen, bedeutet die Verwendung von Html.Raw, dass die Zeichenfolge ein vorzeitiges Ende des Attributs und des Tags enthalten kann. Beginnen Sie dann ein Skript-Tag, das im Namen des aktuell angemeldeten Benutzers etwas unternimmt Benutzer (möglicherweise anders als der angemeldete Benutzer). Möglicherweise haben Sie eine Seite mit einer Liste aller Benutzerbilder und legen einen Tooltip als Benutzernamen für jede Person fest, und ein Benutzer hat sich selbst benannt'/><script>$.post('changepassword.php?password=123')</script> und jetzt hat jeder andere Benutzer, der diese Seite anzeigt, sein Passwort sofort in ein Passwort geändert, das der böswillige Benutzer kennt.

Ich denke, ein wenig bequemer und strukturierter ist die Verwendung des HTML-Helfers. Aus Ihrer Sicht kann es so aussehen:

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

@* ... *@

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

Wenn dieser Weg für Sie nützlich ist, empfehle ich, das Wörterbuch htmlAttrin Ihrem Modell zu definieren, damit Ihre Ansicht keine @{ }Logikblöcke benötigt (klarer sein).