ASP.NET 2.0 - Client Callback dando mais inteligência no cliente
Ramon Durães
Artigo recomendado para Visual Studio Beta 2
Tenho acompanhado a evolução da web a um certo tempo e diversas discussões já surgiram em torno da possibilidade de oferecer mais inteligência do lado cliente e principalmente para evitar os eventos de PostBack, que é ficar indo e voltando no servidor. O que resulta em um post de toda a pagina e um novo carregamento.
Com objetivo de evitar as idas e vindas ao servidor nessa nova versão do ASP.NET 2.O ele já traz maior suporte a integração de código no servidor com código JavaScript do lado cliente. Permitindo por exemplo digitar um valor numa caixa de texto e efetuar consulta no banco de dados sem ter que enviar a pagina pro servidor.
Portanto o propósito desse artigo é demonstrar essa fácil integração oferecida nessa nova versão do ASP.NET 2.0.
Nosso exemplo conforme figura 01 e figura 02 vai simular uma consulta numa pagina web em que ao clicar no botão é enviada uma solicitação para o servidor sem necessidade de PostBack.
.gif "Cc517996.ClientCallback01(pt-br,MSDN.10).gif")
Figura 01 - Consulta no cliente.
.gif "Cc517996.ClientCallback02(pt-br,MSDN.10).gif")
Figura 02 - Retorno sem PostBack da pagina.
O ponto inicial para esse projeto é adicionar uma pagina em branco e os controles conforme figura 1. Lembro que para esse exemplo não estamos utilizando um Button (WebControl) e sim um HtmlButton, pois se usarmos o button ele vai provocar Postback que estamos tentando evitar conforme listagem 01.
<div style="font-size: 8pt; color: blue; font-family: Verdana">
Consulta de Clientes<br />
<br />
Codigo:<br />
<asp:TextBox ID="txtCodigo" runat="server" Width="104px"></asp:TextBox>
<br />
<input id="btConsulta" onclick="ConsultaCliente()" type="button" value="Consulta" />
<br />
Nome:<br />
<asp:TextBox ID="txtNome" runat="server" Width="291px"></asp:TextBox>
<br />
Email:<br />
<asp:TextBox ID="txtEmail" runat="server" Width="292px"></asp:TextBox>
</div>
Listagem 01 - Código html para implementação dos controles.
Feito isso adicione o código JavaScript no html do aspx conforme listagem 02 logo após a tag <Body> do html. Esse código é composto de 03 métodos:
- CallBackHandler ( Obrigatório, retorno da chamada de CallBack)
- onError (É chamado em caso de erro)
- DisplayRetorno (Não faz parte do CallBack, é utilizado pelo código exemplo)
<script >
function CallBackHandler(result, context) {
if (context.CommandName == "ConsultaCliente" )
{
var indexofComma = result.indexOf(",");
var Nome = result.substring(0,indexofComma);
var Email = result.substring(indexofComma+1,result.length);
if (DisplayRetorno(Nome) == true )
{
document.forms[0].elements['txtNome'].value = Nome;
document.forms[0].elements['txtEmail'].value = Email;
}
}
}
function onError(message, context) {
alert("Exception :\n" + message);
}
function DisplayRetorno(m)
{
if (m == "ERRO")
{
alert("Não retornou dados" );
return false;
}
else
{
return true;
}
}
</script>
Listagem 02 - Código JavaScript para tratar retorno do CallBack.
Agora devemos implementar na classe de nossa pagina a interface ICallbackEventHandler que vai tornar obrigatório no servidor o Método RaiseCallbackEvent que vai ser disparado no servidor toda vez que ocorrer uma solicitação do lado cliente.
Toda essa implementação para tornar funcional nosso exemplo é realizada na listagem 03.
Partial Class artigos_aspx
Inherits System.Web.UI.Page
Implements ICallbackEventHandler
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Request.Browser.SupportsCallback Then
Throw New ApplicationException("Esse browser não suporta Callback")
Else
' Prepara Codigo JavaScript para CallBack
Dim strJavaScript As New System.Text.StringBuilder
strJavaScript.Append("<Script> function ConsultaCliente() {")
strJavaScript.Append(" var Command =""1:""" + " + document.forms[0].elements['txtCodigo'].value;")
strJavaScript.Append(" var context = new Object(); ")
strJavaScript.Append(" context.CommandName = ""ConsultaCliente""; ")
strJavaScript.Append(Page.ClientScript.GetCallbackEventReference(Me, "Command", "CallBackHandler", "context", "onError", True) + " ;")
strJavaScript.Append("}</script>")
Page.ClientScript.RegisterClientScriptBlock(Me.GetType, "ConsultaCliente", strJavaScript.ToString)
End If
End Sub
Public Function RaiseCallbackEvent(ByVal eventArgument As String) As String Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent
If eventArgument.StartsWith("1:") Then
eventArgument = eventArgument.Substring(2)
'Neste ponto você adiciona uma chamada ao seu banco de dados
Select Case eventArgument ' Codigo do Cliente
Case "123456" : Return "Ramon Duraes,ramonduraes@mutex.com.br"
Case "654321" : Return "Fulano de Tal,fulano@fulano.com"
Case Else
Return "ERRO,0"
End Select
Else
Return "ERRO,1,Falha geral"
End If
End Function
End Class
Listagem 02 - Código do lado do servidor para tratar CallBack.
Avaliando a listagem 03 no método Page_Load criamos dinamicamente o método Javascript chamado de ConsultaCliente() que juntamente com a assinatura do GetCallbackEventReference irar fazer com esse método tenha suporte ao XMLhttp para gerar Callback no servidor.
Já o método RaiseCallbackEvent trata no servidor o evento RaiseCallbackEvent que é acionado pelo clique do cliente no botão do browser.
Com isso fechamos nossa implementação de exemplo dessa nova facilidade oferecida pelo ASP.NET 2.0.
Portanto quando o usuário cliente clica no botão consulta conforme figura 01, o mesmo vai disparar no cliente o evento OnClick que chama do método ConsultaCliente(). Esse método enviar uma consulta para o servidor que aciona o evento RaiseCallBackEvent.
Referências
Finalizando
Agora realmente ficou fácil implementar código no cliente utilizando XMLhttp para efetuar consulta no servidor sem necessidade de enviar pagina que ocasionaria na necessidade de ter que carregar novamente por completa.
O que você gostaria saber?
Aguardo seu comentário! Ele é muito importante. Participe!!! Até próximo artigo!
Você é de Salvador Bahia, então participe do grupo de usuários .NET
http://www.mutex.com.br