Introducción a Ajax con Asp.Net (3): Mostrar el progreso

Bueno, tras una gran pausa, sigamos con este pequeño tutorial acerca de cómo usar las extensiones Ajax en .Net.

Partimos de una versión modificada de la demo del artículo anterior. Recordemos que en el artículo anterior vimos como realizar actualizaciones parciales de la página mediante el control UpdatePanel, evitando realizar postbacks completos del cliente al servidor, evitando el redibujado completo del navegador en cada cambio de la página.

En esta demo, en lugar de realizar la carga de un DropDownList desde otro, lo que hacemos es realizar la carga de un GridView dependiendo de la selección desde un DropDownList:

Lo que ocurrirá es que el usuario no sabrá si debe esperar para trabajar con la página, si la carga del grid inferior tarda más de lo normal (por ejemplo, si la base de datos está sobrecargada, o la consulta es compleja o trae muchos datos). Para ello, emplearemos el control UpdateProgress que nos facilita las extensiones Ajax. Para ello, en la página maestra, introduciremos el siguiente código:

<asp:UpdateProgress ID="UpdateProgress1" runat="server" > 
   <ProgressTemplate> 
      <div class="progress"> 
         <asp:Image ID="Image1" runat="server" 
             ImageUrl="~/images/indicator_mozilla_blu.gif"/>
            Actualizando página 
      </div> 
   </ProgressTemplate> 
</asp:UpdateProgress>

Mediante este control, conseguimos que el HTML que está dentro del ProgressTemplate se muestre cuando las extensiones Ajax detecten que hay una llamada asíncrona al servidor. Dentro del template se puede poner cualquier código HTML ya que en cliente se renderiza con un DIV oculto. En este caso, estoy mostrando un DIV con una imagen animada y un texto indicando al usuario que la página se está actualizando. Este DIV tira de una clase llamada progress, que contiene cualquier decoración CSS que se nos ocurra. En nuestro caso, quería que se mostrara sobre los controles que están siendo actualizados, por lo que la clase progress queda en el ejemplo asi:

.progress 
{ 
   border-right: #ff6633 thin solid; 
   border-top: #ff6633 thin solid; 
   vertical-align: middle; 
   border-left: #ff6633 thin solid; 
   border-bottom: #ff6633 thin solid; 
   position: absolute; 
   background-color: #ffcc66; 
   text-align: center; 
   padding: 10px; 
   left: 100px; top: 100px; 
} 

Tras aplicar esto, y cambiar de selección en el DropDownList, podremos ver el siguiente efecto:

Esto es todo, hasta la siguiente entrega del tutorial.

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

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 |

Introducción a Asp.Net Ajax (1)

En el proyecto en que estoy trabajando actualmente, he tenido la oportunidad de empezar a trabajar en un proyecto de manera seria con Ajax, y en concreto con las extensiones Ajax de Microsoft. Ciertamente me ha parecido muy instructivo y a partir de mi experiencia, quiero compartir una serie de artículos que ayuden a los que estén iniciándose en esta tecnología a empezar lo más rápido posible.

 ¿Que es Ajax?

Ajax es el acrónimo de Asynchronous Javascript And XML. Esta tecnología de desarrollo web, se basa en dos puntos fundamentales:

• Realizar comunicaciones asíncronas entre el navegador del cliente y el servidor. Se realizan mediante javascript y llamadas asíncronas en segundo plano, realizando intercambios de datos en formato XML entre el cliente y servidor.
• Evitar el refresco completo de la página, recargando únicamente las partes modificadas de la aplicación, consiguiendo así aplicaciones más rápidas y más cercanas a las aplicaciones de escritorio.

Mediante esta técnica podremos, por ejemplo, cargar los elementos de un desplegable desde base de datos, sin necesidad de recargar la pantalla completa, sino recargando únicamente la parte de la página afectada por el cambio (en el ejemplo, recargando los elementos del desplegable), sin necesidad de recargar la página completa.

 ¿Que proporcionan las extensiones Asp.Net Ajax?

Estas extensiones (actualmente en versión 1.0), desarrolladas por Microsoft, permiten integrar los desarrollos realizados en ASP.NET 2.0 con ésta tecnología de desarrollo de una manera fácil e intuitiva. Es necesario remarcar que esta tecnología, aún estando desarrollada por Microsoft explícitamente para ASP.NET, debería ser compatible con diferentes navegadores de otros fabricantes, como por ejemplo, Mozilla, o Opera. No obstante, como la aplicación en la que estoy trabajando, no es multinavegador, no he tenido la oportunidad de comprobarlo por mi mismo :-)

Además, este framework abstrae al desarrollador el desarrollo necesario para implementar las llamadas asíncronas de Javascript al servidor, de manera que el desarrollador puede centrarse en cómo debe funcionar su aplicación, y no perder tiempo en escribir (una y otra vez) rutinas Javascript para llamar al servidor y redibujar el contenido de la página.

Internamente el framework emplea el objeto XMLHttpRequest, disponible en casi todos los navegadores modernos, para realizar la comunicación entre cliente y servidor. De esta manera, aprovechando que en ASP.NET 2.0 se introduce el concepto de Callback, el navegador llama al servidor para obtener la versión actualizada de la página mediante javascript, y posteriormente, mediante DHTML, se muestra la nueva versión de la página al cliente.

El framework de ASP.NET Ajax se basa en cuatro partes bien diferenciadas:

• ASP.NET AJAX Extensions: El núcleo de la implementación de AJAX. Proporciona un pequeño núcleo de controles de servidor que permiten realizar la mayor parte de las operaciones cliente / servidor. http://www.microsoft.com/downloads/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&displaylang=en
• ASP.NET AJAX Library: Es un conjunto de librerías y de clases Javascript que facilitan el trabajo del desarrollador en el navegador cliente. Además, facilitan una serie de métodos y patrones para realizar llamadas a servidor directamente desde Javascript. Estas librerías se distribuyen dentro de ASP.NET AJAX Extensions.
• ASP.NET AJAX Control Toolkit: Una serie de controles que, basandose en las extensiones AJAX, expanden la funcionalidad de los controles y proveen al desarrollador de controles ricos que pueden usar en la aplicación (por ejemplo, un control de selección de fecha, un control que permite tener múltiples pestañas en la aplicación, etc). Este toolkit se ha creado y se mantiene entre Microsoft y la comunidad de codeplex, y por tanto, es de código abierto y cualquiera que quiera contribuir con el desarrollo puede hacerlo. http://www.codeplex.com/AtlasControlToolkit
• ASP.NET AJAX Futures: Nuevas funcionalidades que se incluirán en subsiguientes implementaciones del framework. Actualmente se encuantra en versión CTP, y la última versión es de Enero de 2007. http://www.microsoft.com/downloads/details.aspx?FamilyID=4cb52ea3-9548-4064-8137-09b96af97617&displaylang=en

Las extensiones Ajax facilitan básicamente cuatro controles:

• ScriptManager: Uno de los dos controles principales del framework. Es el control que provee a la página de la funcionalidad de cliente, como por ejemplo, realizar las llamadas asíncronas al servidor, realizar el redibujado parcial de páginas, etc... Este control es necesario para realizar cualquier operación con el framework.
• UpdatePanel: El otro control principal del framework. Es un control que hereda del control Panel de Asp.Net. Además de las funcionalidades propias de un Panel, todos los controles que se encuentren dentro de él podrán ser modificados sin necesidad de realizar un postback, sino que se modificarán en cliente mediante llamadas Callback.
• UpdateProgress: Este control permite presentar a un cliente un aviso informándole de que el navegador está ocupado realizando una modificación asíncronamente.
• ScriptManagerProxy: Este control se emplea en caso de que el ScriptManager se encuentre en otra página, por ejemplo, en una página maestra, y se necesite acceder a las propiedades del mismo ScriptManager. Por ejemplo, incluir un javascript en una página y que el ScriptManager de la página maestra lo cargue en el cliente.

En el siguiente artículo veremos como implementar un pequeño ejemplo, empleando únicamente las extensiones de ajax.

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