Atlas, AJAX para ASP.NET: el UpdatePanel

El UpdatePanel es, sin duda, uno de los controles estrella que nos trae Atlas. Es el que más directamente nos proporciona la posibilidad de tener una página 100% AJAX sin tener ni la más remota idea de lo que es AJAX.

La idea no es nueva, ya que por ejemplo, los chicos de MagicAjax vienen llevándola a cabo desde hace mucho tiempo. Todo está basado en "Lo que esté dentro de este UpdatePanel tendrá un comportamiento AJAX"... sin más.

Pongamos un ejemplo específico, el típico con un Button y una Label, y cuando aprietas el Button, la Label se actualiza con la fecha y hora actuales.

Hecho del modo tradicional sería:

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToString();
    }  
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Página de ejemplo</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </div>
    </form>
</body>
</html>


Y para conseguir un efecto AJAX, no hay más que arrastrar un par de controles y tenemos lo siguiente:

    <form id="form1" runat="server">
    <div>
        <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
        </atlas:ScriptManager>

        <atlas:UpdatePanel ID="UpdatePanel1" runat="server" Mode="Conditional">
            <ContentTemplate>

                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                <asp:Label ID="Label1" runat="server" Text=""></asp:Label>           
            </ContentTemplate>
        </atlas:UpdatePanel>

    </div>
    </form>

Como veis no hay que cambiar nada del código, simplemente hay que cambiar (con simples movimientos de ratón) nuestro <form />... sencillísimo, ¿no?

Yendo parte por parte, lo primero que tenemos es el control "ScriptManager", que es el encargado de manejar todos los controles Atlas que añadamos en nuestra página. En este caso particular, sólo tenemos el control UpdatePanel, pero podría haber otros.

Fijaos en el importante atributo "EnablePartialRendering", que por defecto no está y se supone false. Para habilitar funcionalidades AJAX hay que ponerlo a true.

Por otra parte tenemos a nuestra estrella: el UpdatePanel. Lo hemos puesto con Mode="Conditional". Por defecto no está así, y está en mode "Always":
- Si está en Always, nuestro UpdatePanel se actualizará siempre que haga un PageLoad, por ejemplo a consecuencia de una actualización de otro UpdatePanel.
- Si está en Conditional, nuestro UpdatePanel sólo se actualizará cuando los elementos de dentro de nuestro UpdatePanel lo requieran.

Dentro del UpdatePanel está el <ContentTemplate /> que es donde irá nuestro contenido, en este caso el Button y la Label. Como os digo, la filosofía es muy sencilla, todo lo que haya dentro del UpdatePanel producirá comportamiento AJAX, y eso significa "cazar" los elementos que produzcan eventos (El Button produce el evento Click) y los elementos que de algún modo son cambiados (El texto de nuestra Label es modificado).

Y esto es muy importante, pues a los programadores nos interesa que un elemento sea modificado bien porque se ha lanzado un evento, bien porque otro elemento ha sido modificado. Y digo esto porque dentro del UpdatePanel, a parte del <ContentTemplate /> tenemos el apartado de <Triggers />.

Los Triggers nos sirven para definir qué eventos o modificaciones debe cazar el UpdatePanel para modificarse... veamos otro ejemplo:

        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
       
        <atlas:UpdatePanel ID="UpdatePanel1" runat="server" Mode="Conditional">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text=""></asp:Label>           
            </ContentTemplate>
            <Triggers>
                <atlas:ControlEventTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
        </atlas:UpdatePanel>


En esta ocasión, el Button ya no está dentro del ContentTemplate del UpdatePanel, por lo que en teoría apretar sobre el Button supondría que la página se recargara totalmente. Sin embargo, en el apartado de Triggers del UpdatePanel, indicamos que deseamos cazar el evento Click del control Button1.

Tened en cuenta que en principio puede parecer una tontería: ¿Para qué quiero un apartado Triggers si me vale con poner el botón dentro del ContentTemplate? Pero no lo es, porque nuestro ejemplo es trivial, pero en una página más elaborada, el elemento que produce el evento no tiene porque estar cerca del elemento que es modificado. Entre medias de ambos pueden haber muchísimas cosas, y el UpdatePanel cuanto más pequeño, mejor que mejor: menos gasto de ancho de banda y por tanto mayor rapidez.

Sabiendo esto, aunque del UpdatePanel hay muchos más aspectos que averiguar, ya se pueden conseguir complejos y eficientes comportamientos AJAX con un simple entramado de cuatro o cinco UpdatePanel's con varios Triggers definidos y reducidos ContentTemplate's.

Durante sucesivos artículos, iré poniendo ejemplos prácticos de Webs en las que estoy trabajando