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:

 
Note que há apenas um combo com as opções de cliente e produtos e uma div com id “box” que irá ser o container de nossos templates.

 

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:

 
Note que o template nada mais é que uma simples table, a mágica acontece no body dela, quando colocamos um comando de repetição, o foreach.

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:

 
Basicamente igual ao template de clientes.
 
Bom, com os templates prontos, só o que nos falta é a sua chamada.

 
A função acima faz uma chamada assincrona para o servidor, informando o tipo de dado desejado e a repassa para o template. Para processar esse template, tudo o que precisamos é simplesmente chamar a função processTemplate, passando o resultado como parametro, e teremos a reposta.

E pelo lado do servidor, nosso código fica assim:

 
E com nosso client e server side programados só falta adicionar uma função ao evento change do select:
 
 
O que esse trecho de código faz é a chamada da função de requisão de dados passando o valor do select no evento change dele.
 

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.

Com certeza JTemplate (Existem outras bibliotecas, inclusive na propria biblioteca de Ajax da Microsoft)  é uma grande biblioteca e pode ser explorada para varias situações diferentes.
 
 

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/
http://www.west-wind.com/Weblog/posts/509108.aspx