Atributos HTML condicionais usando Razor MVC3

A variável strCSSClass geralmente tem um valor, mas às vezes está vazia.

Não quero incluir um class = "" vazio no HTML deste elemento de entrada, o que significa que se strCSSClass estiver vazio, não quero o atributo class = de forma alguma.

A seguir está uma maneira de fazer um atributo HTML condicional:

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

Existe uma maneira mais elegante de fazer isso? Especificamente um onde eu poderia seguir a mesma sintaxe usada nas outras partes do elemento: class = "@ strCSSClass"?

Você não ouviu isso de mim, o PM do Razor, mas no Razor 2 (Páginas da Web 2 e MVC 4) teremos atributos condicionais integrados ao Razor (a partir do MVC 4 RC testado com sucesso), então você pode apenas dizer coisas assim ...

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

Se strCSSClass for nulo, o atributo de classe não será renderizado.

SSSHHH ... não diga. :)

Observe que você pode fazer algo assim (pelo menos em MVC3):

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

O que eu acreditava que era uma navalha adicionando aspas era na verdade o navegador. Como Rism apontou ao testar com MVC 4 (não testei com MVC 3, mas presumo que o comportamento não mudou), isso realmente produz, class=TopBordermas os navegadores são capazes de analisar isso bem. Os analisadores HTML são um tanto tolerantes quanto à falta de aspas do atributo, mas isso pode falhar se você tiver espaços ou determinados caracteres .

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

OU

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

O que há de errado em fornecer suas próprias cotações

Se você tentar usar algumas das convenções C # usuais para aspas aninhadas, você acabará com mais citações do que esperava, porque o Razor está tentando escapar delas com segurança. Por exemplo:

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

Isso deve avaliar como, <button type="button" style="border:0px">mas o Razor escapa de toda a saída do C # e, portanto, produz:

style="border:0px"

Você só verá isso se visualizar a resposta na rede. Se você usar um inspetor de HTML, geralmente verá o DOM, não o HTML bruto. Os navegadores analisam o HTML no DOM, e a representação do DOM após a análise já tem algumas sutilezas aplicadas. Nesse caso, o navegador vê que não há aspas em torno do valor do atributo e os adiciona:

style=""border:0px""

Mas no inspetor DOM, os códigos de caracteres HTML são exibidos corretamente para que você realmente veja:

style=""border:0px""

No Chrome, se você clicar com o botão direito e selecionar Editar HTML, ele voltará para que você possa ver aqueles códigos de caracteres HTML desagradáveis, deixando claro que você tem aspas externas reais e aspas internas codificadas em HTML.

Portanto, o problema de tentar fazer as citações por conta própria é que Razor escapa disso.

Se você deseja controle total das cotações

Use Html.Raw para evitar o escape de citação:

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

Renderiza como:

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

O procedimento acima é perfeitamente seguro porque não estou gerando nenhum HTML de uma variável. A única variável envolvida é a condição ternária. No entanto, esteja ciente de que esta última técnica pode expô-lo a certos problemas de segurança se você estiver construindo strings a partir de dados fornecidos pelo usuário. Por exemplo, se você construiu um atributo a partir de campos de dados originados de dados fornecidos pelo usuário, o uso de Html.Raw significa que a string pode conter um final prematuro do atributo e da tag, então comece uma tag de script que faz algo em nome do usuário atualmente conectado usuário (possivelmente diferente do usuário conectado). Talvez você tenha uma página com uma lista de todas as fotos de usuários e esteja definindo uma dica de ferramenta para ser o nome de usuário de cada pessoa e um usuário se autodenomina'/><script>$.post('changepassword.php?password=123')</script> e agora qualquer outro usuário que visualizar esta página terá sua senha alterada instantaneamente para uma senha que o usuário malicioso conhece.

Eu acho que uma forma um pouco mais conveniente e estruturada é usar o helper Html. Em sua opinião, pode ser semelhante a:

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

@* ... *@

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

Se esta forma for útil para você, eu recomendo definir o dicionário htmlAttrem seu modelo para que sua visualização não precise de @{ }blocos lógicos (seja mais claro).