Trabalhando com Componentes ASP.NET em Client-Side

Boas pessoal, finalmente algum tempo livre para dedicar ao blog, hoje inauguro uma nova seção aqui que chamei de ‘Tricks’ que traduzindo significa Truque/Artifício/Artimanha, enfim acho que já deu para entender, será uma sessão dedicada a posts rápidos abordando temas simples e úteis.

Para nosso primeiro post da seção Tricks, vamos discutir um ponto que quando tocado muitos devs tendem a travar na hora de desenvolver, todos já passaram por alguma situação onde temos nossos lindos componentes TextBox / Label / Panel entre outros e queremos recuperar ou alterar seus valores ou propriedades visuais via Client-Side (lado cliente da aplicação) via JavaScript. Eu mesmo já presenciei diversos pogs artificios técnicos para realizar tais ações, vamos ao nosso cenário:

HTML Gerado

Supondo que nosso site é composto de uma MasterPage e uma página ASPX que utiliza tal Master com nossos componentes, confome código ASP.NET acima, o HTML gerado para o browser será o da listagem acima também, podemos ver que a parte que mais nos importa para acharmos tal controle via Client-Side que é o ID (identificador do elemento) é gerado automaticamente pelo Framework com base na hierarquia de componentes, e a situação fica ainda pior caso utilizemos GridViews / DataLists entre outros. A seguir algumas formas comumente utilizadas por desenvolvedores para recuperar tais componentes via Client-Side e suas desvantagens:

Maneira 1:

Desvantagem:
Não preciso nem citar que esta é uma das piores maneiras possíveis, pois caso seja alterado o nome de algum componente pai, contido na MasterPage ou na Página teremos que realizar um baita Refactor em nosso código JavaScript corrigindo os IDs fixos ali contidos.

Maneira 2:

Desvantagem:
Esta maneira já é em muito melhor que a primeira citada, onde em tempo de render da página os valores gerados pelo framework serão incluidos em nosso JavaScript, o problema aqui é que nosso código JavaScript necessita obrigatóriamente estar contido dentro do fonte da página ASPX não podendo ser separado em um arquivo .JS a parte.

Estas maneiras acima eu já cancei de ver em Projetos em que faço parte, inclusive alguns bem críticos e causando bastante dores de cabeça. Agora vamos a solução? Apenas uma paravra para vocês: JQuery!!! Não é atoa que a Microsoft está apoiando fortemente o projeto e inclusive incluiu o mesmo no Framework 4.0 / Visual Studio 2010.

Solução:

Vejam que solução elegante, basta adicionar a referência a api do jquery (download em www.jquery.com) e fazer uso da mesma. Vamos a explicação, o simbolo de $ significa uma chamada a implementação do jquery equivalente ao getElement do javascript tradicional, entre parenteses está o que chamamos de Selectors, podem ser expressões bem complexas, buscar diversos elementos de uma só vez, buscar elementos pelo seu estilo CSS, pelo seu tipo, pelo seu estado, enfim, é o coração da api. Em nosso exemplo estou buscando elementos onde o ID termina ($= – Expressão Regular) em… e a seguir utilizamos métodos fornecidos pela API para alterar CSS, mudar o conteudo html e o valor, além de diversos outros.

Está foi uma abordagem simplista de como utilizar o JQuery para simplificar tarefas em nosso dia-a-dia como desenvolvedores ASP.NET. Espero que tenham gostado, e sigam o lema do JQuery que considero demais “Write Less Do More”, traduzindo: Escreva Menos e Faça Mais, porque é o que sempre digo: se seu código está grande e complicado é porque você está fazendo errado!

Um abraço a todos e até a próxima.