Attributi HTML condizionali che utilizzano Razor MVC3

La variabile strCSSClass ha spesso un valore ma a volte è vuota.

Non voglio includere una classe vuota = "" nell'HTML di questo elemento di input, il che significa che se strCSSClass è vuoto, non voglio affatto l'attributo class =.

Il seguente è un modo per eseguire un attributo HTML condizionale:

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

C'è un modo più elegante per farlo? In particolare uno in cui potrei seguire la stessa sintassi utilizzata nelle altre parti dell'elemento: class = "@ strCSSClass"?

Non l'hai sentito da me, il PM per Razor, ma in Razor 2 (pagine Web 2 e MVC 4) avremo attributi condizionali incorporati in Razor (a partire da MVC 4 RC testato con successo), quindi puoi semplicemente dire cose come questa ...

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

Se strCSSClass è null, l'attributo class non verrà visualizzato affatto.

SSSHHH ... non dirlo. :)

Nota che puoi fare qualcosa del genere (almeno in MVC3):

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

Quello che credevo fosse un rasoio che aggiungeva virgolette era in realtà il browser. Come ha sottolineato Rism durante il test con MVC 4 (non ho testato con MVC 3 ma presumo che il comportamento non sia cambiato), questo in realtà produce class=TopBorderma i browser sono in grado di analizzarlo bene. I parser HTML sono in qualche modo indulgenti sulle virgolette degli attributi mancanti, ma questo può rompersi se hai spazi o determinati caratteri .

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

O

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

Cosa non va nel fornire le proprie citazioni

Se provi a utilizzare alcune delle solite convenzioni C # per le virgolette annidate, ti ritroverai con più virgolette di quante ti aspettassi perché Razor sta cercando di sfuggirle in modo sicuro. Per esempio:

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

Questo dovrebbe restituire <button type="button" style="border:0px">ma Razor sfugge ad ogni uscita da C # e produce in tal modo:

style="border:0px"

Lo vedrai solo se visualizzi la risposta sulla rete. Se usi un ispettore HTML, spesso stai effettivamente vedendo il DOM, non l'HTML grezzo. I browser analizzano l'HTML nel DOM e la rappresentazione DOM dopo l'analisi ha già alcune sottigliezze applicate. In questo caso il browser vede che non ci sono virgolette attorno al valore dell'attributo, le aggiunge:

style=""border:0px""

Ma nell'ispettore DOM i codici dei caratteri HTML vengono visualizzati correttamente in modo da vedere effettivamente:

style=""border:0px""

In Chrome, se fai clic con il pulsante destro del mouse e selezioni Modifica HTML, torna indietro in modo da poter vedere quei cattivi codici di caratteri HTML, chiarendo che hai virgolette esterne reali e virgolette interne codificate HTML.

Quindi il problema con il tentativo di fare la citazione da solo è che Razor sfugge a questi.

Se vuoi il controllo completo dei preventivi

Usa Html.Raw per impedire l'escape delle virgolette:

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

Rende come:

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

Quanto sopra è perfettamente sicuro perché non sto emettendo alcun HTML da una variabile. L'unica variabile coinvolta è la condizione ternaria. Tuttavia, fai attenzione che quest'ultima tecnica potrebbe esporti a determinati problemi di sicurezza se si creano stringhe dai dati forniti dall'utente. Ad esempio, se hai creato un attributo dai campi di dati che hanno avuto origine dai dati forniti dall'utente, l'uso di Html.Raw significa che la stringa potrebbe contenere una fine prematura dell'attributo e del tag, quindi inizia un tag script che fa qualcosa per conto del attualmente connesso utente (possibilmente diverso dall'utente loggato). Forse hai una pagina con un elenco di tutte le immagini degli utenti e stai impostando un suggerimento come nome utente di ogni persona e un utente si chiama se stesso'/><script>$.post('changepassword.php?password=123')</script> e ora qualsiasi altro utente che visualizza questa pagina ha la propria password immediatamente modificata in una password conosciuta dall'utente malintenzionato.

Immagino che un modo un po 'più comodo e strutturato sia usare l'helper Html. Dal tuo punto di vista può essere simile a:

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

@* ... *@

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

Se questo modo ti sarà utile ti consiglio di definire il dizionario htmlAttrnel tuo modello in modo che la tua vista non abbia bisogno di @{ }blocchi logici (sii più chiaro).