AJAX en ASP.NET 2.0 con AJAX Extensions

14. November 2009 13:03 by Oscar.SS in Desarrollo Web  //  Tags:   //   Comments (0)

Quizás aquí algunos esperaban erroneamente que el título hablara de ASP.NET 3.5 pero como ya he comentado alguna vez (creo!!), las versiones de ASP.NET saltan de la 2.0 a la 4.0. No así las versiones de la plataforma .NET que si han seguido un camino más continuado 2.0, 3.0, 3.5, y 4.0.

Por lo tanto, este árticulos y los siguientes tratarán de lo que se puede hacer con AJAX en ASP.NET 2.0 con el framework 3.0 o 3.5. Por otra parte, igualmente válido son para aquellos que trabajan con ASP.NET 2.0 sobre .NET 2.0 y tienes instaladas las plantillas AJAX Extensions. (Ver gráfico evolución plataforma)

 

 

Código Cliente

En este caso el código cliente se redece a incluir un control ScriptManager y un control UdatePanel dentro del cuerpo de la página.

    <form id="form1" runat="server">
    
<asp:ScriptManager ID="ScriptManager1" runat="server">
    
</asp:ScriptManager>
    
<div>
        
<p style="text-align:center; font-size:xx-large; color:Blue; text-decoration:underline">AJAX con AJAX Extensions</p>
        
<span>Seleccionar un nombre:</span>
        
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 
            onselectedindexchanged
="DropDownList1_SelectedIndexChanged">
            
<asp:ListItem Selected="True">Oscar</asp:ListItem>
            
<asp:ListItem>David</asp:ListItem>
            
<asp:ListItem>Diego</asp:ListItem>
            
<asp:ListItem>Sergio</asp:ListItem>
            
<asp:ListItem>Luis</asp:ListItem>
        
</asp:DropDownList>
        
<br />
        <
br />
        <
asp:UpdatePanel ID="UpdatePanel1" runat="server">
            
<ContentTemplate>
                Categoria profesional:  
<asp:Label ID="Label1" runat="server" ForeColor="Red"></asp:Label>
            
</ContentTemplate>
            
<Triggers><asp:AsyncPostBackTrigger ControlID="DropDownList1" 
                    EventName
="SelectedIndexChanged" /></Triggers>
        
</asp:UpdatePanel>
        
<br />
        <
br />
        <
span>Mientras se ejecuata la petición de datos escribir aquí para comprobar el AJAX.</span>
        
<input id="Text1" type="text" />
    </
div>
    
</form>


El control ScriptManager es el encargado de registrar en el cliente todo el código script necesario para soportar AJAX.  Debe aparecer antes que ningún otro control en la página.

En el control UpdatePanel, dentro de <ContentTamplate>, incluiremos únicamente el contenido HTML que deba ser actualizado cuando el servidor devuelva los datos. Este control se encarga de enviar desde el servior solo la porción de HTML que contiene, realizando lo que se denomina un repintado parcial de la página. Dentro de <Triggers> se declaran los controles y eventos que disparan este repintado parcial.

¡Y ya esta!. No hay que hacer nada más. No hay que escribir ni una linea de código cliente, entre el control ScriptManager y el UpdatePanel, se encargar de envíar los datos al servidor y de recibirlos mostrandolos al usuario.

 

Código Servidor

Y en el servidor no tenemos que hacer nada especial para manipular la funcionalidad AJAX. Simplemente incluiremos el código necesario dentro del evento del control que hemos declarado anteriormente dentro de <Triggers> en el UpdatePanel.

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        
string rutaDatos Server.MapPath("~/App_Data/datos.xml");

        string 
nombreSelec DropDownList1.SelectedValue;

        
//Antes de enviar la petición simulamos una tarea larga.
        
System.Threading.Thread.Sleep(5000);

        
Label1.Text ManejarDatos.ObtenerCategoria(nombreSelec, rutaDatos);
    
} 


Código de descarga 

El código completo mencionado en este artículo se encuentra en la carpeta AJAX_NET_3.5/AJAX_Extensions del siquiente enlace. Para probar la aplicación ejecutar la página AJAX_Extensions.aspx de la carpeta mencionada.

AJAX_ASP.NET.rar (15,45 kb)

Recent Comments

Comment RSS

Month List