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).
Vamos adicionar ao projeto os arquivos .js que fazem parte da biblioteca, como mostra a imagem abaixo:

Adicionando arquivos js Asp.Net Ajax Library 4.0
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.