ASP.NET 2.0 - Client Callback dando mais inteligência no cliente

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.

Figura 1 - Consulta no cliente

Figura 2 - 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.

<divstyle="font-size:8pt;color:blue;font-family:Verdana">
ConsultadeClientes<br/>
<br/>
Codigo:<br/>
<asp:TextBoxID="txtCodigo"runat="server"Width="104px"></asp:TextBox>
<br/>

<inputid="btConsulta"onclick="ConsultaCliente()"
type="button"value="Consulta"/>
<br/>

Nome:<br/>
<asp:TextBoxID="txtNome"runat="server"Width="291px"></asp:TextBox>
<br/>
Email:<br/>
<asp:TextBoxID="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)

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.

PartialClassartigos_aspx
InheritsSystem.Web.UI.Page
ImplementsICallbackEventHandler

ProtectedSubPage_Load(ByValsenderAsObject,ByValeAsSystem.EventArgs)HandlesMe.Load
IfNotRequest.Browser.SupportsCallbackThen
ThrowNewApplicationException("EssebrowsernÃ£osuportaCallback")
Else
"PreparaCodigoJavaScriptparaCallBack
DimstrJavaScriptAsNewSystem.Text.StringBuilder
strJavaScript.Append("<Script>functionConsultaCliente(){")
strJavaScript.Append("varCommand=""1:"""+"+document.forms[0].elements["txtCodigo"].value;")
strJavaScript.Append("varcontext=newObject();")
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)

EndIf
EndSub

PublicFunctionRaiseCallbackEvent(ByValeventArgumentAsString)AsStringImplements
System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent
IfeventArgument.StartsWith("1:")Then
eventArgument=eventArgument.Substring(2)
"Nestepontovocêadicionaumachamadaaoseubancodedados
SelectCaseeventArgument"CodigodoCliente
Case"123456":Return"RamonDuraes,ramonduraes@mutex.com.br"
Case"654321":Return"FulanodeTal,fulano@fulano.com"
CaseElse
Return"ERRO,0"
EndSelect
Else
Return"ERRO,1,Falhageral"
EndIf
EndFunction
EndClass

Listagem 03 - 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

- http://msdn.microsoft.com

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

Desenvolvimento - ASP. NET

Leia também