Oi pessoal.
Estou inaugurando agora, uma série de posts sobre novas features do ASP.NET 4, então vamos lá!
Nas versões anteriores do ASP.NET a questão de geração de IDs era um pouco complicada e porque não dizer tosca. Onde era muito comum códigos lindos como esse:
Se tornar uma aberração quando renderizado para HTML assim:

O fato é que isso era horrível quando se precisava manipular o componente do client usando, por exemplo, Java Script ou CSS. Além do que aumenta em muito o tamanho da página, pois o programador não tem controle algum sobre o que vai para o browser do usuário.
Mas para a alegria de todos isso mudou com o advento do ASP.NET 4 \o/
Na novíssima versão do ASP.NET existe uma nova propriedade chamada ClientIDMode que foi adicionada a classe Control do namespace System.Web.UI o que significa que qualquer controle agora possui esta nova propriedade.
O ClientIDMode possui 4 valores possíveis, são eles:
- AutoID – Que equivale a maneira como as versões anteriores já renderizavam o HTML.
- Static – Força o ASP.NET a manter o mesmo ID do controle server side. Não deve ser usado quando estiver dentro de um controle de repetição, por motivos óbvios de repetição de IDs na página.
- Predictable – Esta opção foi criada para ser usada com controles de repetição, pois gera um ID concatenando os IDs dos containers, melhorando assim a legibilidade e acesso ao elemento da página.
- Inherit – Esta já é conhecida. É usada para manter as mesmas configurações herdadas pelos elementos pai. Esta opção é a default.
Vamos então a alguns exemplos, digamos que eu tenha um GridView como este:
Observe que coloquei os itens como template para exemplificar como os IDs serão gerados.
Caso na linha 1 esteja setado ClientIDMode="AutoID" o HTML gerado fica bem parecido com o que havia nas versões anteriores, algo como isso:
Caso a propriedade esteja assim ClientIDMode="Static", todos os itens iguais dentro do GridView ficarão com o mesmo ID.
E por último temos a propriedade assim ClientIDMode="Predictable" onde os IDs gerados serão compostos pelos IDs do elemento pai, o ID do próprio elemento mais o número da linha começando por zero. Segue o exemplo:
Podemos ainda deixar o exemplo mais rico, utilizando uma outra propriedade nova chamada ClientIDRowSuffix que recebe o nome de um dos campos do DataSource. Neste caso vou colocar o ID como sufixo nas linhas geradas, assim ClientIDRowSuffix="ID":
Legal né? Ainda podemos ter um controle mais geral sobre como os controles irão renderizar seus ID colocando o ClientIDMode na diretiva @Page da página.
Ou ainda usar o famoso Web.config para setar a configuração pro site inteiro.
Era isso que eu tinha pra mostrar a vocês, espero que tenham gostado da iniciativa. Aguardem os próximos posts. Obrigado e até a próxima.
[]s