terça-feira, 17 de setembro de 2013

Implementando Callbacks

O que é Callback?
É uma das formas de enviar uma informação ao servidor sem atualizar ou submeter a página atual.

Esse exemplo que eu vou dar a seguir é o básico do básico, como um campo de busca com sugestões, que  ao digitar uma informação o sistema automaticamente irá buscar no servidor atualizando um painel com os possíveis resultados.

o arquivo ASPX ficará assim:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="callback._default" %>

<!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>teste autocomplete</title>
  <script type="text/ecmascript">
      function Buscar() {
          var lb = document.getElementById("busca").value;

          CallServer(lb, "");         
      }
      function Retorno(rValue)
      {         
          document.getElementById("resultado").innerHTML = rValue;         
      }
  
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
  

     
      <input type="text"  ID="busca" onkeyup="Buscar()" />
      <br />
      <span id="resultado" runat="server"></span>
    </div>
  </form>
</body>
</html>




No código acima, adicionei dois controles, um textbox(busca) e um span(resultado).

No controle textbox eu coloquei o evento onkeyup para acionar a função Buscar() que é um Script. Essa função Buscar irá capturar o texto digitado no textbox e chamar o método CallServer passando essa informação.

abaixo o código C#:


using System;
using System.Configuration;
using System.Web;
using System.Linq;
using System.Collections.Generic;

namespace callback
{
    public partial class _default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
    {

        protected String returnValue;
        protected void Page_Load(object sender, EventArgs e)
        { 
            Page.ClientScript.RegisterClientScriptBlock(this.GetType()
                , "CallServer",
                "function CallServer(arg, context) { " + Page.ClientScript.GetCallbackEventReference(this, "arg", "Retorno", "context") + ";}"
                , true);

        }
        public void RaiseCallbackEvent(String eventArgument)
        {
            if (eventArgument != "")
            {
                List<string> usuarios = new List<string>();

                usuarios.Add("Bruce Lee");
                usuarios.Add("Carmem Miranda");
                usuarios.Add("Castro Alves");
                usuarios.Add("Cecília Meireles");
                usuarios.Add("Clarice Lispector");
                usuarios.Add("Elvis Presley");
                usuarios.Add("Greta Garbo");
                usuarios.Add("Jorge Amado");
                usuarios.Add("Machado de Assis");
                usuarios.Add("Monteiro Lobato");
                usuarios.Add("Neil Armstrong");
                usuarios.Add("Thomas Edson");
                usuarios.Add("Tom Jobim");

                var resultados = from r in usuarios where r.Contains(eventArgument) select r;
               
                foreach (var item in resultados)
                {
                    returnValue += item+ "<br>";
                }
              
                if (returnValue == "" || returnValue == null)
                    returnValue = "Não localizamos o usuário informado";
               
            }

        }
        public String GetCallbackResult()
        {
            return returnValue;
        }
    }

}



Eu criei um List de string com o nome de usuários e adicionei alguns nomes.

Quando pressionamos uma tecla no banco "Busca" o evento Buscar() é invocado chamando acionando a função RaiseCallbackEvent  essa função irá buscar no List usuarios e retornar o valor para o navegador.



Ao executar temos o seguinte resultado:
Digitando um carácter:



o retorno é de todos os usuários que possua a letra C e seu nome. 


o legal de utilizar o Callback é não ter que recarregar a página só por conta de uma informação.



:)