ScottGu's Blog em Português

O post de hoje é o primeiro de alguns posts que vou escrever, os quais falam sobre algumas mudanças importantes que tivemos que fazer nos formulários web (Web Forms) na ASP.NET 4 para gerar marcação HTML limpa, compatível com padrões e amigável com CSS. Hoje eu vou escrever sobre o trabalho que estamos fazendo para prover melhor controle sobre os atributos "ID" renderizados no lado do cliente através de controles do servidor.

[Além do blog, eu também estou agora utilizando o Twitter para atualizações rápidas e para compartilhar links.Siga-me em: twitter.com/scottgu]

Marcação HTML Limpa, Baseada em Padrões, Amiga da CSS

Uma das reclamações mais comuns que os desenvolvedores têm frequentemente no que diz respeito aos Formulários Web da ASP.NET é que quando eles usam controles do servidor, eles não têm a capacidade de gerar marcação HTML limpa e amigável. Algumas das queixas específicas com referência às versões anteriores da ASP.NET incluem:

• Atributos ID gerados automaticamente dentro da marcação HTML tornam difícil escrever JavaScript e estilos CSS.
• O uso de tabelas em vez de uma marcação semântica para determinados controles (em especial o controle asp:menu) torna feio os estilos aplicados.
• Alguns controles renderizam propriedades de estilo inline (juntamente com o HTML do controle), mesmo que nenhuma propriedade de estilo do controle tenha sido definida.
• O objeto ViewState muitas vezes pode ser maior do que o ideal.

A ASP.NET 4 oferece melhor suporte nativo para a construção de páginas compatíveis com os padrões do mercado. Os controles do servidor <asp:> nativos com a ASP.NET 4 agora geram marcação HTML mais limpa e suportam a aplicação de estilos CSS - e ajudam a resolver todos os problemas listados acima. 

Compatibilidade da Marcação HTML Quando Atualizando Aplicações que usam Formulários Web

Uma pergunta comum que as pessoas muitas vezes fazem ao ouvir sobre a marcação HTML mais limpa que está chegando com a ASP.NET 4 é "Ótimo - mas e minhas aplicações existentes?" Estas mudanças/melhorias quebrarão o código quando eu atualizar?

Para ajudar a assegurar que nós não quebraremos suposições em torno da marcação HTML e estilos nas aplicações que usam Formulários Web, nós permitimos a configuração de um flag (sinalizador) - controlRenderingCompatbilityVersion - dentro do arquivo Web.config que permite que você decida se você quer usar a nova abordagem de marcação HTML mais limpa que é padrão com aplicações da ASP.NET 4, ou se por motivos de compatibilidade você quer renderizar a mesma marcação HTML que versões anteriores da ASP.NET usavam:

Quando o sinalizador controlRenderingCompatbilityVersion é definido como "3.5" a sua aplicação e controles do servidor renderizarão código de saída usando a mesma marcação HTML usada com o VS 2008 e .NET 3.5. Quando o sinalizador controlRenderingCompatbilityVersion é definido como "4.0" sua aplicação e controles do servidor irão aderir à especificação XHTML 1.1, terão IDs no lado do cliente mais limpos, serão renderizados com correção semântica em mente e não terão os estilos CSS inline estranhos.

O sinalizador terá como padrão o valor 4.0 para todas as novas aplicações de Formulários Web da ASP.NET que sejam criadas usando a ASP.NET 4. Qualquer aplicação anterior que for atualizada usando o VS 2010 terá o sinalizador controlRenderingCompatbilityVersion automaticamente ajustado para 3.5 através do assistente de atualização para garantir compatibilidade com versões anteriores. Você pode, opcionalmente, alterar o valor do sinalizador (no nível da aplicação ou definindo escopos dentro do arquivo Web.config para que o sinalizador seja empregado por página ou nível de diretório) para o caso de você modificar as suas páginas para usar CSS, permitindo que você tire proveito da nova renderização de HTML.

O Tópico de Hoje sobre Marcação HTML mais Limpa: Client IDs - IDs no lado do Cliente

A capacidade de ter atributos ID em elementos HTML mais limpos, previsíveis é algo que os desenvolvedores pedem já há muito tempo para os Formulários Web (valores de ID como "ctl00_ContentPlaceholder1_ListView1_ctrl0_Label1" não são muito populares e amigáveis). Ter controle sobre os valores de ID renderizados ajuda a tornar muito mais fácil a escrita de código JavaScript que referencia a marcação HTML gerada, torna fácil aplicar estilos CSS nos elementos e em páginas grandes pode ajudar a reduzir o tamanho da Marcação HTML gerada.

Nova Propriedade ClientIDMode em Controles

A ASP.NET 4 suporta uma propriedade nova chamada ClientIDMode na classe base Control. A propriedade ClientIDMode indica como os controles devem gerar valores de ID no lado do cliente quando estes forem renderizados. A propriedade ClientIDMode suporta quatro valores possíveis:

• AutoID—Renderiza a saída como no .NET 3.5 (IDs gerados automaticamente, os quais ainda renderizarão prefixos iguais ctrl00 por motivos de compatibilidade)
• Predictable/Previsível (Padrão)—Remove qualquer string de ID "ctl00" , e se for um controle de lista/contêiner, concatena IDs filhos (por exemplo: id = "ParentControl_ChildControl")
• Static/Estático—Passa para a mão do desenvolvedor o controle completo sobre o nome dado ao atributo ID - o que o desenvolvedor definir como o ID do controle é o que será processado (por exemplo: id = "JustMyId")
• Inherit/Herdar—Sinaliza ao controle para que este use o modo de nomeação de controles proveniente do controle pai

A propriedade ClientIDMode pode ser definida diretamente em controles individuais (ou dentro de controles do contêiner - neste caso, os controles dentro do contêiner herdarão a configuração do contêiner):

A propriedade ClienteIDMode também pode ser especificada no nível da página ou de um UserControl - controle definido/criado pelo usuário (usando diretivas <@% Page %> ou <%@ Control %>) - neste caso os controles que ficam dentro das páginas/usercontrols herdam a configuração (e podem, opcionalmente, substituí-la):

A propriedade ClienteIDMode também pode ser definida no arquivo Web.config de uma aplicação - neste caso as páginas que ficam dentro da aplicação herdam a configuração (e, opcionalmente, podem substituí-la):

Isso lhe dá a flexibilidade para personalizar/substituir o comportamento de nomeação como quiser.

Exemplo: Usando a propriedade ClientIDMode para controlar os IDs dos Controles que Não São Listas

Vamos dar uma olhada em como podemos usar a nova propriedade ClientIDMode para controlar a renderização de elementos "ID" dentro de uma página. Para ajudar a ilustrar isso, podemos criar uma página simples chamada "SingleControlExample.aspx" que é baseada em uma master-page chamada "Site.Master ", e que tem um único controle <asp:label> com um ID igual a "Message" que está contido dentro de um controle contêiner <asp:content> chamado "MainContent":

Dentro do nosso arquivo de code-behind, vamos então adicionar um código simples, como o mostrado a seguir para preencher dinamicamente a propriedade Text do label no tempo de execução:

Se estivéssemos executando esta aplicação com a ASP.NET 3.5 (ou se tivéssemos configurado nossa aplicação ASP.NET 4 para ser executada usando a renderização da ASP.NET 3.5 ou ClientIDMode = AutoID), então a marcação HTML gerada e enviada para o cliente ficaria como a mostrada a seguir:

Essa identificação é única (o que é bom) - mas um pouco feia em virtude do prefixo "ct100" (o que é ruim).

Renderização de Marcação HTML quando ASP.NET 4 é utilizada e ClientIDMode é configurada com "Predictable"

Com a ASP.NET 4, controles do servidor por padrão agora renderizam seus IDs usando ClientIDMode="Predictable". Isso ajuda a garantir que os valores de ID sejam únicos e que os mesmos não estejam em conflito em uma página, e ao mesmo tempo faz com que os IDs sejam menos verbosos e mais previsíveis. Isto significa que a marcação HTML gerada para nosso controle <asp:label> acima será por padrão com a ASP.NET 4 igual ao código mostrado a seguir:

Observe que o prefixo "ct100" não aparece mais. Em virtude do controle "Message" estar dentro de um controle contêiner chamado "MainContent", por padrão seu ID será prefixado com "MainContent_Message" para evitar possíveis colisões/conflitos com outros controles em algum outro lugar dentro da página.

Renderização de Marcação HTML quando ASP.NET 4 é utilizada e ClientIDMode é configurada com "Static"

Às vezes você não deseja que seus valores de ID sejam aninhados hierarquicamente, e ao invés disso, você somente quer que o ID renderizado tenha o valor definido por você. Para permitir isso, você pode agora usar ClientIDMode="Static". Neste caso, o ID renderizado será exatamente o mesmo que você definiu no lado do servidor que está sob seu controle. Isso fará com que a marcação HTML mostrada a seguir seja renderizada com a ASP.NET 4:

Esta opção te dá agora a capacidade de controlar completamente no lado do cliente os valores de ID enviados pelos controles.

Exemplo: Usando a propriedade ClientIDMode para controlar a lista de IDs dos controles ligados/vinculados a dados

Controles de lista/grid ligados a dados têm sido historicamente os mais difíceis para usar e aplicar estilos CSS quando trabalhamos com IDs gerados automaticamente nos Formulários Web. Vamos agora dar uma olhada em um cenário onde nós vamos personalizar o ID renderizado usando um controle ListView com a ASP.NET 4.

O trecho de código a seguir é um exemplo de um controle ListView que exibe o conteúdo de uma coleção de dados vinculados - neste caso, aeroportos:

Podemos então escrever o código mostrado a seguir dentro do nosso arquivo code-behind para dinamicamente vincularmos uma lista de aeroportos na ListView declarada acima:

Em tempo de execução, será gerada então por padrão uma lista <ul> de aeroportos como mostrado a seguir. Note que, devido os elementos <ul> e <li> no template da ListView não serem controles do servidor, nenhum ID é gerado em nossa marcação HTML:

Adicionando IDs no Lado do Cliente para Cada Item/Linha

Agora, vamos dizer que queremos adicionar um ID no lado do cliente na saída HTML, para que possamos acessar programaticamente cada elemento <li> via JavaScript. Queremos que estes ID's sejam únicos, previsíveis e identificáveis.

Uma primeira abordagem seria marcar cada elemento <li> dentro do template/modelo como sendo um controle do servidor (dando-lhe um atributo runat=server) e dando a cada um uma ID de "aeroporto":

Por padrão, a ASP.NET 4 vai agora renderizar IDs limpos, como mostrado a seguir (ids com ctl001 não serão renderizados):

Usando a Propriedade ClientIDRowSuffix

Nosso modelo acima agora gera um ID único para cada elemento <li> - mas se nós iremos acessá-los programaticamente no cliente usando JavaScript, podemos querer que os IDs contenham o código do aeroporto dentro dos elementos <li> para que seja fácil referenciá-los. A boa notícia é que nós podemos fazer isso facilmente, aproveitando a nova propriedade ClientIDRowSuffix em controles de dados vinculados da ASP.NET 4 para controlar de maneira melhor os ID's dos nossos elementos de linha.

Para fazer isso, vamos definir a propriedade ClientIDRowSuffix com "Code" no nosso controle ListView. Isso informa a ListView para que esta use a propriedade "Code" da nossa classe Airport ao gerar o ID:

Agora, ao invés de termos sufixos de linha como "1", "2" e "3", teremos o valor do código do aeroporto (Airport.Code) inserido dentro dos IDs (por exemplo: _CLE, _CAK, _PDX, etc):

Você pode usar essa abordagem ClientIDRowSuffix com outros controles de dados vinculados, como o GridView também. Esta abordagem é útil quando você quiser programar elementos de linha no lado cliente - e usar IDs limpos/identificáveis para facilmente referenciá-los a partir do código JavaScript.

Resumo

A ASP.NET 4 permite a você gerar marcação HTML muito mais limpa a partir de controles do servidor e a partir de suas aplicações Web Forms/Formulários Web. 

No post de hoje eu cobri como você pode agora facilmente controlar os valores de ID do cliente que são renderizados pelos controles do servidor. Nos próximos posts eu vou cobrir algumas das outras melhorias de marcação HTML que também estão chegando com o lançamento da ASP.NET 4.

Espero que ajude,

Scott

Texto traduzido do post original por Leniel Macaferi.