22 de octubre de 2009

UpdatePanel vs WebMethod

Analicemos un ejemplo de cada una de estas 2 técnicas usadas al programar aplicaciones ASP.NET AJAX, veamos las ventajas y desventajas y de paso servirá a principiantes para introducirlos en estas interesantísimas y funcionales herramientas con que contamos en ASP.NET AJAX.

UpdatePanel

Con la introducción de ASP.NET AJAX y los controles de servidor (ScriptManager - UpdatePanel), realizar aplicaciones AJAX con ASP.NET es una tarea muy simple, y apenas hay que tener conocimientos sobre AJAX, pues estos controles se encargan de encapsular toda la funcionalidad y las respuestas de nuestras aplicaciones mejoran sustancialmente con los repintados parciales de los UpdatePanel.

PageMethod o WebMethod

Esta otra técnica (WebMethod) es muy usada, y nos permite llamar desde javascript a un método codebihind o método de servidor implementado en c#, vb o cualquier otro lenguaje .NET.

Pero analicemos estas técnicas de implementación de ASP.NET AJAX a través de un ejemplo y comparemos el rendimiento. Para este análisis escojamos un ejemplo sencillo. Imaginemos que queremos desarrollar una página web que contenga una etiqueta y un botón, al  pulsar el botón, iremos al servidor y devolveremos la hora del servidor y la pintaremos en la etiqueta de nuestras página.

UpdatePanel Ejemplo

Para lograr esto el código ASPX sería el siguiente:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ejemplo UpdatePanel</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                Hora en Servidor: <asp:Label ID="lblHoraServidor" runat="server">
                    </asp:Label> <br />
                <asp:Button ID="btnActualizarHora" Text="Actualizar Hora"
                    OnClick="btnActualizarHora_Click" runat="server" />           
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Y el código C# sería:

protected void btnActualizarHora_Click(object sender, EventArgs e)
{
    lblHoraServidor.Text = DateTime.Now.ToString("HH:mm:ss");
}

Hasta aquí ya tenemos implementado ASP.NET AJAX, y solo hemos empaquetado dentro del UpdatePanel aquello que queremos repintar parcialmente, sin necesidad de recargar nuevamente toda la página. Pero veamos que sucede internamente al aplicar esta técnica.

En este punto ejecutemos la página y veamos lo que sucede al hacer clic en el botón Actualizar Hora; notaras que no se recarga la página y que la respuesta es inmediata. Pero indaguemos más, profundicemos que pasa por debajo, para ello yo usaré Firebug (Un complemento de FireFox indispensable para el desarrollador web), también podíamos haber usado Fiddler.

UpdatePanel FireBug RED Según vemos en la imagen para obtener la hora del servidor, algo tan simple como eso, fue necesario enviar una solicitud al servidor de 276 bytes y recibimos una respuesta de 706 bytes, 982 bytes en total y todo para una cadena de 8 caracteres que ocupa únicamente 8 bytes; mas adelante comentaremos el porque de esa otra información, de momento adjuntamos el texto que recibimos de respuesta, donde puedes observar que lo que hemos resaltado en rojo (solo esos 8 caracteres) son los que contienen la hora que es lo que nos interesa:

241|updatePanel|UpdatePanel1|
Hora en Servidor: <span id="lblHoraServidor">05:53:21</span>
<br />
<input type="submit" name="btnActualizarHora" value="Actualizar Hora" id="btnActualizarHora" />
|112|hiddenField|__VIEWSTATE|/wEPDwUKMTUwODA0NjYzNw9kFgICAw9kFgICAw9kFgJmD2QWAgIBDw8WAh4EVGV4dAUIMDU6NTM6MjFkZGRdbsBGIEQXlrh8e+D4C2ihKzfygw==|48|hiddenField|__EVENTVALIDATION|/wEWAgLL69fFDQLe07zXBamVPacICIU/TMqTbWKbtkji21kg|0|asyncPostBackControlIDs|||0|postBackControlIDs|||14|updatePanelIDs||tUpdatePanel1,|0|childUpdatePanelIDs|||13|panelsToRefreshIDs||UpdatePanel1,|2|asyncPostBackTimeout||90|23|formAction||UpdatePanelEjemplo.aspx|

PageMethod o WebMethod Ejemplo

Implementemos ahora el mismo ejemplo pero esta vez usando ASP.NET AJAX WebMethod o PageMethod, como prefieras llamarlo. Además iremos señalando algunos aspectos donde debemos ser especialmente cuidadosos.

ASPX del Ejemplo WebMethod:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"> 
    <title>Ejemplo WebMethod</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager EnablePageMethods="true" ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        Hora en Servidor: <span id="lblHoraServidor"></span><br />
        <input id="btnActualizarHora" value="Actualizar Hora"
            type="button" onclick="ActualizarHora();" />
    </div>
    </form>
    <script type="text/javascript"> 
        function ActualizarHora() { 
            PageMethods.ActualizarHoraServer(fnLlamadaOK, fnLlamadaError); 
       
        function fnLlamadaOK(resultado) { 
            $get('lblHoraServidor').innerHTML = resultado;
        }

        function fnLlamadaError(excepcion) { 
            $get('lblHoraServidor').innerHTML = 'Ha ocurrido un error interno: '
                                                 excepcion.get_message(); 
       
    </script>
</body>
</html>

Como veras en este nuevo WebForm ya hemos tenido que escribir código javascript, y además solo tenemos al ScriptManager como control de servidor, el resto son controles HTML estándares. Veamos ahora el código C#:

[WebMethod]
public static string ActualizarHoraServer()
{
    return DateTime.Now.ToString("HH:mm:ss");
}

Hasta aquí ya tenemos implementado el ejemplo ASP.NET AJAX usando WebMethod. Pero veamos que sucede internamente al aplicar esta técnica, volvamos a usar el Firebug.

WebMethod FireBug RED

Al observar la imagen podemos ver 2 cosas, una es que soy un desastre pintando y la segunda y verdaderamente importante en este artículo es que a diferencia de la técnica del UpdatePanel, es esta solicitud se enviaron 0 bytes y la respuesta ocupó 16 bytes, 8 de los cuales son de la cadena con la hora y 8 mas son necesarios y siempre solo 8 correspondientes a la definición del objeto JSON que trae el resultado. Además si observamos la cadena obtenida en la respuesta, vemos que es mucho mas simple, legible y en formato JSON: {"d":"06:19:32"}

UpdatePanel vs WebMethod Conclusiones

Como hemos visto la técnica WebMethod (PageMethod) es mucho más eficiente en cuanto a trafico por la RED se refiere, esto viene dado fundamentalmente porque la técnica del UpdatePanel:

  • En la petición se envía al servidor el ViewState de la página.
  • En la respuesta viene el nuevo ViewState y otra información básica para poder realizar el repintado parcial.
  • Pero además del tráfico por la RED, cuando el postback causado por la petición AJAX llega al servidor, con la información del ViewState se recrea la clase Page, se ejecutan los eventos de página, los eventos de cada uno de los controles, generando una sobrecarga para el servidor.

Pero no todo es malo, hemos visto que la productividad del desarrollador al usar el UpdatePanel, es mucho mayor, apenas tenemos que adicionar un par de controles AJAX y además hay ocasiones en que se justifica su uso, en fin como dice un colega de trabajo, “lo importante es conocer las distintas técnicas y utilizar cada una según se requiera en cada caso concreto”. De echo, me atrevería a decir que la técnica del UpdatePanel es usada por muchas más personas; aunque si tuviera que aconsejarte, te diría que no abusaras de ella, y que siempre que te sea posible optes por los WebMethods, Web Services o WCF.

Notas Importantes: Al usar la técnica del WebMethod es imprescindible que en el objeto ScriptManager definamos la propiedad  EnablePageMethods="true". Además, el código que definimos en C# para el WebMethod que invocaremos desde javascript, debe ser publico y estático (public static).

y aquí dejo este articulo, me extendí un poco más de lo que pensé en un inicio, pero es que hay cosas que creí importante destacar, espero te sirva como base para introducirte en estas técnicas que ya deben ser incluidas en cualquier sitio web que se precie…