Introdução
Muitas vezes nos é solicitado uma interface com N visualizações diferentes para N entidades diferentes.
Uma das técnicas para resolver este tipo problema é a configuração de visualização de vários controles diferentes e alterar sua visibilidade de acordo com a solicitação do usuário.
Esta solução causa alguns problemas: como degradação do código e desempenho, difícil manutenção, entre outros.
Por esse motivo estou adotando o uso de uma engine de template client-side chamada JTemplate
JTemplate
JTemplate é uma engine de templates client-side, construía em JavaScript, tendo como base a biblioteca jQuery.
Como ela é possível trabalhar com Ajax e JSON, utilizar códigos JavaScript no seu template, atualização de conteúdo , utilização de comandos condicionais, entre outras features.
Para saber mais, entre em http://jtemplates.tpython.com/.
O problema
Imagine uma interface onde você deva consultar, a partir de um combo, clientes e produtos. E que essa requisição tenha que ser assíncrona.
HTML da página:
O Template
O template não é nada mais que um “pedaço” de HTML com alguns operadores de repetição e condição, que será injetado em nosso container.
Este é o template para clientes:
Com JTemplate é possível utilizar seus comandos dentro de chaves (“{ }”), ou seja, na linha 9, ele repete aquele bloco de HTML, que vai até a linha 24, enquanto houver objetos que tenham sido passados para o template. Ainda nessa linha, colocamos um alias (“data”) para o objeto que está sendo “lido” no momento.
(Nota: com JTemplate, para acessar a data que foi passada como parâmetro, usamos o prefixo “$T”, e lidamos como se essa data fosse um objeto)
Já nas linhas dentro do bloco, utilizamos o “$T” para adcionar nosso datasource dentro do HTML, como no caso da linha 12, onde estamos adcionando dentro da célula o nome de nosso cliente.
Agora vamos ao HTML para produtos:
E pelo lado do servidor, nosso código fica assim:
Conclusão
Neste artigo vimos que é possivel utilizar "pedaços" de html como templates que recebem dados, e que esses dados podem vir por requisições assincronas, o que proporciona uma experiência mais rica ao usuário.Também vimos como utilizar templates para alternar visões dentro de um formulário sem que o código fica confuso.
Referências
http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/
http://encosia.com/2008/06/26/use-jquery-and-aspnet-ajax-to-build-a-client-side-repeater/