ASP.NET Tutorial 4

Olá a todos, hoje vamos falar de comunicação entre cliente e servidor numa aplicação ASP.NET. Comunicação essa que pode ser feita de duas maneiras, síncrona ou assincronamente, ou seja, vamos começar a entrar no mundo do Ajax.

Ajax?

O Ajax permite que a comunicação entre o cliente e o servidor seja feita sem interrupções no browser e sem o total PostBack da página ao servidor, o que melhora e muito a experiencia de utilização do nosso site.

A primeira aplicação no mundo a utilizar Ajax foi o Exchange Webmail da Microsoft, para tornar a aplicação Web o mais semelhante possível á aplicação Windows.

Depois veio a era Google e de todas as suas aplicações totalmente criadas com recurso ao Ajax, Gmail, Google Docs e até a simples sugestão na caixa de pesquisa da Google.

Neste momento podemos afirmar que a ideia de aplicações Web totalmente dependentes do servidor são coisa de 1995, neste momento está a ser cada vez mais usado o Ajax. Quem ganha com isso é a Web, aplicações mais interactivas e dando a sensação de ser uma aplicação Desktop.

Ajax ou AJAX?

Ao lerem livros ou pesquisas na Net vão encontrar muito estas duas nomenclaturas, porquê?

O nome original e globalmente utilizado desta tecnologia é Ajax.

A versão AJAX pertence á Microsoft, porque os rapazes de Redmond para ajudar os programadores de .NET criaram API’S para ser mais fácil utilizar Ajax em aplicações ASP.NET.

AJAX tem duas vertentes, servidor e cliente:

• A vertente servidor é para ser o mais simples possível de implementar utilizando controlos criados pela Microsoft (AJAX Control Toolkit) que permitem criar um site com suporte Ajax em poucos minutos.

Os principais controlos são o ScriptManager e o UpdatePanel que permite fazer partial postbacks do conteúdo que envolve.

• A vertente cliente é a que permite mais controlo e que mais se assemelha ao Ajax. (O futuro)

Comunicação cliente – servidor (vice-versa)

Para comunicar do cliente para o servidor existem duas maneiras:

Sem Ajax:

Qualquer controlo que faça PostBack para o servidor comunica do cliente para o servidor.

O ponto negativo é que a página tem de ir para o servidor e ser novamente renderizada, tudo isto causa impactos na performance, tráfego de rede e claro é uma má experiencia para o utilizador pois o browser faz refresh e fica todo branco.

Com Ajax:

Com Ajax o caso muda de figura, só enviamos para o servidor o que realmente precisa de ir e de forma assíncrona actualizamos o nosso browser sem que o cliente veja páginas a piscar.

Os métodos mais comuns:

• XMLHttpRequest: É um objecto da DOM que é invocado por Javascript ou outra linguagem de cliente (Jquery) e que envia um http request para o servidor e carrega a resposta directamente para a linguagem cliente. Como a resposta é enviada e recebida pelo cliente tudo isto é feito para que o cliente não faça nenhum PostBack. Essa resposta pode vir em texto ou XML. Foi graças a esta implementação que temos hoje o Ajax.

• PageMethods: Utilizados em conjunto com o ScriptManager, são uma maneira simples de implementar uma chamada ao Servidor de forma assíncrona criada pela Microsoft. Tem o mesmo funcionamento de um WebService.

• UpdatePanel: É um objecto criado pela Microsoft que permite simular chamadas assíncronas ao Servidor. É um PostBack camuflado, se forem programadores experientes aconselho a não o utilizarem.

• WebServices: Com as novas ferramentas (AJAX, Jquery) é muito simples chamar WebServices do lado do cliente.

ClientScript e ScriptManager:

Estes dois objectos disponibilizados pela Framework AJAX permitem chamar código de cliente do lado do Servidor, por exemplo:

ClientScript.RegisterClientScriptBlock(this.GetType(), "teste", "alert('Estou no servidor');", true);

Esta linha iria mostrar uma mensagem no nosso browser.

O ScriptManager tem as mesmas funções que o ClientScript mas é utilizado se o nosso controlo estiver dentro de um UpdatePanel.

Utilização

Vamos então fazer uns exemplos das tecnologias acima mencionadas (á excepção de Jquery, vamos ter um tutorial só sobre isso)

- XMLHttpRequest:

Adicionamos um botão

<input id="Button2" type="button" value="Teste XMLHttpRequest" onclick="TesteXmlHttpRequest();" />

Este botão vai chamar uma função JavaScript “TesteXmlHttpRequest();”

Esta função faz um pedido XMLHttpRequest a um Handler http que vai ao servidor e retorna uma mensagem com o numero de cliques que foram passados como querystring.

- PageMethods:

Adicionamos novamente um botão

<input id="Button3" type="button" value="Teste PageMethods" onclick="TestePageMethods();" />

Este botão chama uma função JavaScript "TestePageMethods();"

Esta função chama um método PageMethods.RetornaPageMethod.

Este método está definido no código c# (Code Behind)

Como vêem este método tem o atributo [WebMethod], o que lhe permite ser chamado através de código cliente (Javascript), quem faz com que tudo isto aconteça é o objecto ScriptManager no qual indicamos EnablePageMethods="true".

O método é simples

PageMethods.RetornaPageMethod(cliquesPM, oncompletePM);

Recebe um inteiro que são os cliques e como é assincrono tem de ter uma função de retorno que se chama “oncompletePM”.

- UpdatePanel:

Este é o caso mais simples de todos, a Microsoft realmente fez um excelente trabalho neste objecto, mas, se forem experientes aconselho não o utilizarem.

O que fazemos é adicionar um UpdatePanel e dentro dele abrir uma tag ContentTemplate onde vamos colocar o nosso botão e uma TextBox.

Ao clicar no botão vamos ao servidor e actualizamos a TextBox com a hora do servidor, tudo isto sem fazer refresh á página.

- WebServices:

Criamos um WebService (.asmx) por defeito vêm com o método HelloWorld, o qual vamos aproveitar.

Uma nota importante para o WebService funcionar tem de ter o atributo [System.Web.Script.Services.ScriptService]

Na nossa página temos de adicionar ao ScriptManager a tag “Services” e ServiceReference dando ao valor do “Path” o local do nosso WebService.

Adicionamos um botão, que irá chamar a função

“esteWebService();”.

Para chamar o WebService temo de fazê-lo desta maneira “Namespace.Nome Webservice.Método” fica assim:

WebApplication1.WebService1.HelloWorld(cliquesWS,completoWebservice);

Novamente passamos a variável de cliques e a função de retorno.

O resultado final da nossa aplicação

Download: ASP.NET - Tutorial 04 [24.24KB]