26
Asp.Net Ajax Library: Nova biblioteca do Asp.Net 4.0
Filed Under (.NET, .NET 4.0) by Vinicius Quaiato on 26-02-2010
Tagged Under : .NET 4.0, Ajax, Ajax Library, ASP.NET, Novidades
Asp.Net Ajax Library é uma nova biblioteca JavaScript que nos permite criar aplicações orientadas a dados de forma simples e prática.
Ela difere do Ajax Control Toolkit no sentido de que todos os seus controles e funcionalidades rodam inteiramente no client, ou seja, é possível utilizar o Ajax Library em páginas 100% html, nenhum code behind, nenhum arquivo .aspx e nenhum arquivo .cs (é possível trabalhar com .aspx e codebehind, só não é obrigatório).
Para realizarmos este exemplo vamos fazer o download da biblioteca no CodePlex neste link: http://ajax.codeplex.com/
Neste exemplo veremos como gerar uma tabela de dados contendo o nome de algumas bandas e suas respectivas fotos.
Não utilizaremos ainda acesso a webservices, trabalharemos com dados locais.
Para isso criaremos um projeto Asp.Net WebSite vazio, e adicionaremos um arquivo html, chamado Default.htm (Sim, nossa aplicação toda executará em um arquivo .htm). Adicionando arquivos js Asp.Net Ajax Library 4.0
Vamos adicionar ao projeto os arquivos .js que fazem parte da biblioteca, como mostra a imagem abaixo:

Feito isso adicionarei os trechos de código abaixo na página Default.html. Separei em dois blocos para mostrar primeiro o código JavaScript e depois o código HTML, no final colocarei o código completo da página.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script src="Scripts/Start.js" type="text/javascript"></script> <script type="text/javascript"> Sys.require([Sys.components.dataView], function () { var bandas = [ { Nome: 'Metallica', Foto: 'metallica.jpg' }, { Nome: 'The Smiths', Foto: 'smiths.jpg' }, { Nome: 'Depeche Mode', Foto: 'depeche.jpg' }, { Nome: 'Los hermanos', Foto: 'hermanos.jpg' } ]; Sys.create.dataView("#corpo",{data: bandas}); }); </script> |
Como pode ser visto na linha 1 estou adicionando uma referência para o arquivo Start.js, que faz parte do Asp.Net Ajax Library, e adicionamos no nosso projeto.
Na linha 3 começa a acontecer a “mágica”. Chamamos o método require que recebe neste caso dois parâmetros. O primeiro é uma biblioteca a ser carregada, neste caso o Sys.components.dataView. o segundo parâmetro é uma função a ser executada depois que a biblioteca foi carregada, ou seja, seus recursos já estão disponíveis.
Um dos principais recursos para a exibição de dados é o DataView. DataView é basicamente um template, criamos marcações HTML e então pedimos para o Ajax Library transformar em um dataview.
Da linha 5 até linha 10 eu crio um objeto utilizando notação JSON, contendo o nome de uma banda, e o nome de um arquivo com a imagem da banda, bastante simples. Este objeto será nossa fonte de dados.
Na linha 11 ocorre o bind dos dados. Utilizando o Sys.create.dataView passamos como primeiro parâmetro o id de um elemento HTML onde deve ser criado o dataview. E como segundo parâmetro dizemos que o objeto bandas deve ser usado como fonte de dados.
Bastante simples.
Abaixo está o código HTML, onde definimos o elemento que será o dataView:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <table> <thead> <tr> <th>Banda</th> <th>Foto</th> </tr> </thead> <tbody id="corpo" class="sys-template"> <tr> <td> <span>{{Nome}}</span> </td> <td> <img sys:src="{{Foto}}" width="100" height="100" /> </td> </tr> </tbody> </table> |
Apenas criamos uma table, simples. Na linha 8 está um detalhe importante pois utilizamos uma class chamada sys-template. Esta class é necessária para que o Ajax Library reconheça este elemento como um template com o qual ele poderá trabalhar.
Na linha 11 criamos um span e como valor do span utilizamos a marcação {{Nome}} que diz para o Ajax Library que ali deve ser colocado o campo Nome da fonte de dados que passamos para ele.
Na linha 14 fazemos quase a mesma coisa, a diferença é que ao invés de utilizarmos o atributo src do elemento img, utilizamos sys-src, pois o valor deste atributo {{Foto}} está entre as aspas, e é com o sys-src que o Ajax Library consegue fazer o bind corretamente.
Pronto! Agora temos nossa aplicação funcionando, realizando o bind da nossa fonte de dados, e exibindo tudo da maneira desejada. Como mostra a figura abaixo: Página usando Asp.Net Ajax Library

O código completo da página Default.html está aqui:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/Start.js" type="text/javascript"></script> <script type="text/javascript"> Sys.require([Sys.components.dataView], function () { var bandas = [ { Nome: 'Metallica', Foto: 'metallica.jpg' }, { Nome: 'The Smiths', Foto: 'smiths.jpg' }, { Nome: 'Depeche Mode', Foto: 'depeche.jpg' }, { Nome: 'Los hermanos', Foto: 'hermanos.jpg' } ]; Sys.create.dataView("#corpo", { data: bandas }); }); </script> </head> <body> <table> <thead> <tr> <th>Banda</th> <th>Foto</th> </tr> </thead> <tbody id="corpo" class="sys-template"> <tr> <td> <span>{{Nome}}</span> </td> <td> <img sys:src="{{Foto}}" width="100" height="100" /> </td> </tr> </tbody> </table> </body> </html> |
Bom pessoal, por hoje é isso. O Asp.Net Ajax Library possui uma série de recursos e controles incríveis. São 3 tipos diferentes de bindings, e os bindings podem ser feitos de maneiras variadas.
Pretendo ir dando mais detalhes e informações por aqui, na medida do possível.
Alguns How To podem ser vistos aqui.
Comentário, críticas e sugestões são bem vindos.
Att,
Vinicius Quaiato.


Fala galera!










