Vinicius Quaiato

Asp.Net Ajax Library: Nova biblioteca do Asp.Net 4.0

26/02/2010

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](http://viniciusquaiato.com/images_posts/Adicionando-arquivos-js1-300x229.jpg "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.

    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",{
ata: 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:

        <tr>            <td>                <span>{
Nome}
}
</span>            </td>            <td>                ![]()            </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](http://viniciusquaiato.com/images_posts/Pagina-usando-Asp.Net-Ajax-Library-247x300.jpg "Página usando Asp.Net Ajax Library")

O código completo da página Default.html está aqui:

            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>                        ![]()                    </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.

Asp.Net Ajax Library: Nova biblioteca do Asp.Net 4.0

Voltar