Introducción a Asp.Net Ajax (2)

A continuación veremos un primer ejemplo de implementación mediante el framework de Microsoft de AJAX. Para verlo, crearemos un "ASP.NET AJAX-Enabled website" en Visual Studio 2005, y lo denominaremos Ejemplo. Esta plantilla de Visual Studio nos generará un sitio Web, con un archivo Web.config con las modificaciones necesarias para que Ajax.Net funcione correctamente, así como una página default.aspx, la cual incluirá una referencia al control ScriptManager. Recordemos que en el artículo anterior vimos que el ScriptManager es el control necesario para que Ajax.pueda funcionar.

Incluimos el control ScriptManager

Es necesario incluir un control ScriptManager en cada página que vaya a emplear AJAX. En caso de una aplicación que emplee páginas maestras, lo ideal es incluirlo en la página maestra, evitando de esta manera tener que incluirlo en todas las páginas.

Eliminaremos la página default.aspx de la solución, y crearemos una página maestra denominada "master.master". Dentro de esta página, justo encima del control ContentPlaceHolder, incluiremos la siguiente línea:

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

Es importante especificar el atributo EnablePartialRendering, ya que es el que nos permitirá realizar modificaciones parciales de las páginas.

Empleamos el control UpdatePanel

Crearemos una página que emplee la página maestra que acabamos de crear, añadimos una "Web Content Form" llamada "default.aspx". Dentro de ésta página, vamos a crear dos controles DropDownList encadenados, de manera que cuando seleccionemos un valor del primero, cargue los valores del segundo. Para ello, empleamos el siguiente código, dentro de la página:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:DropDownList ID="ddl" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddl_SelectedIndexChange"> 
        <asp:ListItem Text="Email" Value="1" /> 
        <asp:ListItem Text="Telefono" Value="2" /> 
    </asp:DropDownList> 
    <asp:UpdatePanel ID="updatePanel" runat="server"> 
        <ContentTemplate> 
            <asp:DropDownList ID="ddl2" runat="server" /> 
       </ContentTemplate> 
    </asp:UpdatePanel> 
</asp:Content>

Adicionalmente, en el archivo default.aspx.cs incluiremos el siguiente código:

protected void ddl_SelectedIndexChange(object sender, EventArgs e) 
{ 
    ddl2.Items.Clear(); 
    if (ddl.SelectedValue == "1") 
    { 
        ddl2.Items.Add(new ListItem("Valor 1", "1"));  
        ddl2.Items.Add(new ListItem("Valor 2", "2")); 
    } 
    else 
    { 
        ddl2.Items.Add(new ListItem("Valor 3", "3")); 
        ddl2.Items.Add(new ListItem("Valor 4", "4")); 
    } 
}

De esta manera podremos ver cómo, al seleccionar un valor en el desplegable, el segundo desplegable cambia de valor. Pero en este caso, la actualización se está haciendo mediante un postback completo, en lugar de emplear Ajax para redibujar el segundo desplegable. Esto es así, porque el UpdatePanel no sabe que tiene que redibujarse al cambiar el primer desplegable (el primer desplegable está fuera del UpdatePanel). Para modificar la página y conseguir que se emplee Ajax, existen dos posibilidades:

• Introducir el primer desplegable dentro del UpdatePanel. De esta manera el UpdatePanel realizará las llamadas por Ajax a todos los eventos de servidor que se produzcan en su interior.
• Modificar el UpdatePanel, introduciendo un trigger configuranod el UpdatePanel para que "escuche" los eventos realizados por el desplegable. Ésta es la mejor manera desde mi punto de vista, puesto que para que las recargas sean óptimas, los UpdatePanel deberían ser lo más pequeños posibles.

Por tanto, la solución sería la siguiente, modificar el UpdatePanel introduciendo este código (antes o después del tag ContentTemplate):

<Triggers>
   <asp:AsyncPostBackTrigger ControlID="ddl" EventName="SelectedIndexChanged" /> 
</Triggers>

curso ajax, asp.net, asp.net 2.0
Ajax | Desarrollo .Net
0 Comentarios
Acciones: E-mail | | | Compartir |