Diferentes técnicas de AJAX con ASP.NET

Vamos a dar un repaso a todas las posibilidades AJAX que podemos implementar en nuestras páginas Web con las herramientas que proporciona Microsoft para ASP.NET y repasaremos sus ventajas e inconvenientes.
Cualquiera de los métodos que utilizan AJAX en ASP.NET requieren el uso del control ScriptManager. Este control debe ser configurado de una forma determinada dependiendo de cómo implementemos AJAX.

UpdatePanel

Es la forma más sencilla de utilizar AJAX de forma casi transparente a esta tecnología. A través de controles UpdatePanel se maqueta la página creando regiones de actualización. Cada UpdatePanel define una región de actualización. Además, los UpdatePanel pueden colocarse jerárquicamente, unos dentro de otros, pudiendo provocar la actualización de lo paneles internos o una actualización en cascada desde el panel padre hasta el último de los hijos.
Tomemos el siguiente ejemplo: una página con dos botones, el primer botón no está asociado a ningún UpdatePanel y provoca un PostBack, es decir, una recarga completa de la página.
El segundo botón tiene asociado  un UpdatePanel que actualiza un Label con la fecha y hora actual.
En la primera carga de la página podemos observar el retraso en la carga. Si pulsamos el botón sin UpdatePanel observaremos que el navegador Web muestra la barra de progreso de carga.

Si pulsamos el botón asociado al UpdatePanel veremos que el navegador no muestra ninguna barra de progreso y la actualización de los datos es más rápida.

Analicemos de forma interna que ha ocurrido: Si medimos la carga de la página y la información enviada al servidor obtenemos lo siguiente:
En la primera carga, como es evidente se envía toda la información (16517 Bytes).
En la petición del PostBack se envían 14351 Bytes y se reciben 14332 Bytes:

Por otro lado, si nos fijamos en las variables locales instanciadas al recibir la petición de cliente en el servidor podemos ver que se levanta una instancia completa de la página actual:
 
y para realizar la petición se envía una petición Request normal:  En resumen, estamos enviando y recibiendo demasiada información. Esto es útil si necesitamos conocer toda la información de la página. En caso contrario, los UpdatePanel no reducen considerablemente el tamaño de las invocaciones al servidor, ya que no dejan de ser peticiones normales con su Request y el contexto de página.

ICallBackEventHandler

Mediante la implementación de la interfaz ICallbackEventHandler. Esta interfaz debe implementar 2 métodos: GetCallbackResult, que devolverá el resultado y RaiseCallbackEvent, método que recibirá la invocación.
Además es necesario crear una variable de tipo string a nivel global y accesible por ambos métodos.
public partial class Ajax : Page, ICallbackEventHandler

Los métodos de la interfaz:

string resultado = "";

public string GetCallbackResult()
{
    return resultado; 
}

public void RaiseCallbackEvent(string eventArgument)
{
   resultado = DateTime.Now.ToString();
}

Por último es necesario registrar el código javascript de invocación del método de servidor:

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

Este mecanismo, funciona igual que con los UpdatePanel. Requiere del contexto de página en servidor y de una petición Request normal para solicitar la nueva información del servidor:








En este caso, el tamaño de la petición ha sido de 14257 Bytes:

WebMethods

Es el mecanismo más rápido aunque no tiene el contexto de página. Consiste en crear un método de servidor etiquetado como método Web. Para usar esta técnica es necesario lo siguiente:

1. Nuestro ScriptManager debe tener incluida la propiedad EnablePageMethods="true". Esta propiedad habilita el uso de Webmethods desde el navegador de cliente, definiendo el objeto de javascript PageMethods en nuestra página.
   
   

   <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
   </asp:ScriptManager>

   
   



2. Marcar el método de servidor como público y estático.
   

   [WebMethod]
   [ScriptMethod(UseHttpGet = false)]
   public static string GetTime()
   {
       return DateTime.Now.ToString();
   }

   
   



3. invocar por javascript el método: 

<script language="javascript" type="text/javascript">
function GetTimeMethod() 
{
   PageMethods.GetTime(callBackMethod); 
}

function callBackMethod(result) 
{
   document.getElementById("ResultadoWM").innerHTML = result; 
}             
</script>

<p>WebMethod</p>
<button type="Button" onclick="GetTimeMethod()">Hora WebMethod </button>
<br />
<asp:Label ID="Label2" runat="server"    Text="Resultado:"> </asp:Label> 

<span id="ResultadoWM" runat="server"> - </span>

El resultado de invocar mediante WebMethod es sorprendentemente más reducido. La petición Post envía 556 Bytes y recibe 277 bytes frente a más de 14000 Bytes de los mecanismos anteriores.





En el servidor no se instancia el contexto de la página ni variables, sólo los parámetros recibidos por el propio método.