Vinicius Quaiato

Tecnologia e algo mais…

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.

Neste artigo mostrarei um pouco de como usar o ASP.NET MVC com o Jquery para criar páginas mais dinâmicas e funcionais.

Este não é um artigo introdutório ao ASP.NET MVC, posso escrever sobre isso depois, e você pode encontrar tudo sobre o MVC do asp.net aqui: http://www.asp.net/mvc/.

Neste exemplo estou utilizando o VS2010 beta 2, Asp.Net MVC 2 e Jquery 1.3.2. Também utilizarei o plugin DataTables para o Jquery, que você deve baixar aqui: http://datatables.net/

Primeiramente vamos criar um website do tipo Asp.Net MVC no VS2010. Feito isso eu vou excluir todas as Views e Controllers que são criados por padrão, mantendo apenas os configs e a pasta Scripts.

Agora vamos criar um Controller para retornar uma lista de objetos, para que possamos montar um grid e executar algumas ações. Vou criar um Controller chamado HomeController, e adicionar o código abaixo:

public ActionResult Index()
{
    var items = new List<ExpandoObject>();
    for (int i = 0; i < 10; i++)
    {
        dynamic item = new ExpandoObject();
        item.Id = i + 1;
        item.Nome = string.Format("Item {0}", i + 1);
        item.Valor = 10 + i;
        item.Descricao = string.Format("Descricao do Item {0}", i + 1);
 
        items.Add(item);
    }
 
    ViewData["items"] = items;
    return View();
}

O código é bastante simples, cria apenas uma lista de ExpandoObjects e manda esta lista para a View(leia mais sobre ExpandoObjects aqui).

Agora crie uma pasta chamada Home dentro da pasta Views e então crie uma View chamada Index dentro da pasta Home, a solution deve ficar assim:

Solution com View e Controller

Vamos para o código .aspx da nossa View que deve ficar assim:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
 
<!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 id="Head1" runat="server">
    <title>HomeView</title>
</head>
<body>
    <div>
        <table id="dataTable">
            <thead>
                <tr style="background-color:#aabbcc; color:#fff;">
                    <th style="width: 50px;">
                        Id
                    </th>
                    <th style="width: 100px;">
                        Nome
                    </th>
                    <th style="width: 70px;">
                        Preço
                    </th>
                    <th style="width: 200px;">
                        Descrição
                    </th>
                </tr>
            </thead>
            <tbody>
                <%
                    var items = ViewData["items"] as List<System.Dynamic.ExpandoObject>;
                    foreach (dynamic item in items)
                    {
                %>
                <tr id="<%=item.Id %>">
                    <td>
                        <%=item.Id %>
                    </td>
                    <td>
                        <%=item.Nome %>
                    </td>
                    <td>
                        R$
                        <%=item.Valor.ToString("N2") %>
                    </td>
                    <td>
                        <%=item.Descricao %>
                    </td>
                </tr>
                <%} %>
            </tbody>
        </table>
    </div>
</body>
</html>

Tudo que este código faz é obter nossa lista de items e então desenhá-los na tela em forma de uma tabela.
Agora vamos usar o Jquery para ir até o servidor, excluir um item da lista no servidor, e então removê-lo da lista no client utilizando Ajax.

Para isso incluiremos uma referência para o Jquery em nossa View. O Jquery já vem junto com os projetos MVC do asp.net em sua versão 2, basta arrastar o arquivo da pasta Scripts para dentro da View que a referência é adicionada:

<head id="Head1" runat="server">
    <title>HomeView</title>
    <script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
</head>

Agora vamos criar uma function javascript que fará a chamada via Ajax para o Controller:

1
2
3
4
5
6
7
8
9
10

function Remover(action, param) {
    $.post(action + "/" + param,
    function (data) {
        alert(data);
 
        $("#" + param).fadeOut("slow");
    });
 
    return false;
}

Esta function recebe 2 parâmetros, o primeiro é o nome da Action que executaremos no Controller, e o segundo é o parâmetro que passaremos, nesse caso o id do nosso item.
A linha 2 utiliza uma função do Jquery para fazer chamas Ajax usando post. O primeiro parâmetro é a url a ser chamada, no nosso exemplo será algo como “remover/5″. O segundo parâmetro é uma function de callback, que será executada depois que a resposta vier do servidor, e o que estamos fazendo é exibindo a resposta, e então removendo da nossa tabela a linha excluída, utilizando uma animação do Jquery chamada fadeOut.

No nosso Controller adicionaremos um método para simular a exclusão do item, como pode ser visto abaixo:

[AcceptVerbs(HttpVerbs.Post)]
public string Remover(int id)
{
    return string.Format("removeu item: {0}", id);
}

Tudo que esta Action faz é retornar uma string dizendo que o item foi removido.
Agora precisamos fazer com que exista um link na nossa tabela para executar esta ação, e para isso incluiremos mais uma coluna, a coluna Ação, e este código será necessário para renderizar os dados:

<td>
    <a href="remover/<%=item.Id %>" onclick="return Remover('remover','<%=item.Id %>')">
        Remover</a>
</td>

Pronto! Agora já temos uma tabela capaz de excluir itens usando Ajax e ainda ter a linha removida da tabela utilizando um efeito bem bacana.

E para deixar as coisas um pouco mais “profissionais” vamos deixar esta tabela com cara e comportamente de grid, usando o plugin DataTables.
Para isso inclua o arquivo jquery.dataTables.js que você baixou dentro da pasta Scripts, e então arraste o mesmo até a View, para incluir a referência.
Agora coloque o seguinte código javascript dentro do da sua view:

$(document).ready(function () {
    $("#dataTable").dataTable();
});

Este código irá aplicar o plugin na nossa tabela, e o resultado será como mostrado abaixo:

table usando plugin DataTables

Agora podemos filtrar, ordenar e paginar nossos dados, sem nenhum esforço adicional, veja um exemplo de filtro abaixo:

plugin DataTable filtrando dados

Bom galera, é isso!
O código fonte desta solução está disponível aqui.

Qualquer dúvida, email ou comentários.

Abraços,
Vinicius Quaiato.