Executar metodo do servidor via javascript e ajax

[btol...@gmail.com]

Pessoal, boa tarde. Gostaria de compartilhar com vcs um projeto que estou desenvolvendo, cujo objetivo eh simplificar o trabalho com ajax, e distribuir a carga do processamento de forma mais eficaz. Basicamente, com meu projeto, podemos chamar um metodo .cs pelo javascript, da mesma forma que fariamos no proprio servidor. Olhem com atencao o codigo que tenho certeza q vcs perceberao o potencial dessa forma de desenvolvimento. Feedback é bem-vindo. Obrigado.

============
Bruno de Toledo

[Bruno de Toledo]

Quando registramos uma classe, chamando o método AjaxDotNet.Loader.RegisterPage(Page page), habilitamos aquela classe para fazer chamadas Ajax.

Para deixar um método dessa classe visível, colocamos o atributo AjaxDotNet.Attributes.OpenMethod nos métodos.

Com isso, dinamicamente, no lado do cliente, temos um objeto javascript representando a classe do servidor, com os métodos que escolhemos colocando o atributo.

Assim, podemos chamar esses métodos direto do javascript.

Por exemplo:

No servidor, temos uma página chamada Default.aspx. A classe dessa página chama-se _Default. No PageLoad, eu registrei essa classe, e, dentro dela, coloquei um atributo

AjaxDotNet.Attributes.OpenMethod em um método chamado LinqToMyClass. Esse método faz parte do code-behinde da página Default.aspx, ou seja, método da classe _Default.

LinqToMyClass recebe por parâmetro um inteiro, representando o código do ítem da lista que devo retornar. Esse método faz um LINQ em uma lista genérica do tipo MyClass, ou seja, lista genérica de um tipo nosso. Após fazer o filtro por LINQ, retorno um IEnumerable<MyClass> para o JAVASCRIPT! Isso mesmo! Eu estou retornando um LINQ para o JAVASCRIPT! Isso é incrivelmente simples de se fazer...

Toda resposta do servidor via AjaxDotNet retorna um objeto com duas propriedades, value e error. Caso no servidor aconteca alguma exception, a propriedade value é setada como nula e a propriedade error é preenchida com duas outras propriedades, message e source.

Caso não acontece nenhuma exception, o objeto error é setado como nulo, e o objeto value é preenchido conforme o tipo de retorno do método no servidor.

No nosso exemplo, estamos retornando um IEnumerable<MyClass>. MyClass tem duas propriedades, Cod e Description. No meu Javascript, faria algo assim:

function BuscarLista(cod) {

    var lista = _Default.LinqToMyClass(cod).value;

    for (var i = 0; i < list.length; i++) {

        alert(lista[i].Cod);

        alert(lista[i].Description);

    }

}

Onde:

_Default = classe do servidor;

LinqToMyClass = método dessa classe;

cod = parâmetro que esse método espera (como no Javascript nada é tipado, a conversão ocorre automaticamente);

value = retorno da chamada desse método. Essa é a forma da chamada síncrona!

Caso queira chamada assíncrono:

function BuscarLista(cod) {

    var lista = _Default.LinqToMyClass(cod, function(res) {

        if (res.error) return alert(res.error.message);

        for (var i = 0; i < list.length; i++) {

            alert(lista[i].Cod);

            alert(lista[i].Description);

        }

    });

}

Ou seja, o último parâmetro é uma function, que recebe por parametro um objeto, aqui no caso, chamado de res.

Dentro da pasta JS do site em anexo, tem uma série de chamadas, com diversos tipos de parâmetros e retornos.

A vantagem desse framework é que, na hora que registramos a página no PageLoad, podemos incluir outras bibliotecas Javascript. No caso, só coloquei o jQuery o e Prototype, mas é só questão de tempo e paciência para colocar outras mais.

Caso não queria colocar nenhuma, o próprio AjaxDotNet têm algumas funções úteis, como 

$(id): return document.getElementById(id);

$get(id): return $(id).value;

$set(id, value): $(id).value = value;

$html(id, value): $(id).innerHTML = value;

StringBuilder (com método append, appendFormat e toString);

$text(id, value): $(id).innerText = value;

e, finalmente, a $template(file)

A funçao $template merece uma atenção especial.

No nosso servidor, temos uma pasta chamada Templates. Dentro dela, temos dois arquivos, um Table.htm e um Row.htm. Deem uma olhada neles.

Table.htm tem dentro dele um tal de [Row], e no Row.htm tem um tal de [Cod] e [Description].

Bom, mais fácil mostrar como funciona do que explicar. Esse método monta uma tabela conforme os arquivos Table.htm e Row.htm do servidor.

function montarTabela() {

    var table = $template('Table'); //cria um objeto, via ajax, representando o arquivo Table na pasta Template do servidor.

    var row = $template('Row'); //cria um objeto, via ajax, representando o arquivo Row na pasta Template do servidor.

        

    var myClassList = _Default.GetMyClassList().value; // executa o método no servidor que retorna uma lista genérica

       

    var sb = new StringBuilder(); // instancia um StringBuilder

    for (var i = 0; i < myClassList.length; i++) {

        row.Cod = myClassList[i].Cod;

        row.Description = myClassList[i].Description;

        sb.append(row.getHTML());

    }

    table.Rows = sb.toString();

        

    $html('divTable', table.getHTML());

}

Quando o projeto estiver mais maduro, mando o fonte para todo mundo. Por enquanto, estou mandando o fonte do WebSite.

Nao esquecam de configurar o web.config conforme seu ambiente de programação. Tem algumas chaves lá que acessam o caminho físico no HD.

Abs

============
Bruno de Toledo

2009/8/9 Diogo Menezes <diogol...@gmail.com>

Ficou legal :) Depois manda o código fonte para poder dar uma entendida em tudo.

Abraçõs !

2009/8/8 Bruno de Toledo <btol...@gmail.com>

Pessoal, boa tarde. Gostaria de compartilhar com vcs um projeto que estou desenvolvendo, cujo objetivo eh simplificar o trabalho com ajax, e distribuir a carga do processamento de forma mais eficaz. Basicamente, com meu projeto, podemos chamar um metodo .cs pelo javascript, da mesma forma que fariamos no proprio servidor. Olhem com atencao o codigo que tenho certeza q vcs perceberao o potencial dessa forma de desenvolvimento. Feedback é bem-vindo. Obrigado.

============
Bruno de Toledo

--
Diogo Menezes