Skip to content

5. La aplicación ción [SimuPaie] – versión 2 – AJAX / ASP.NET

5.1. Introduction

La tecnología AJAX (Asynchronous JavaScript and XML) reúne un conjunto de tecnologías:

  • JavaScript: una página HTML que se muestra en un navegador puede incluir código JavaScript. El navegador ejecuta este código si el usuario no ha desactivado la ejecución de código JavaScript en su navegador. Esta tecnología surgió en los inicios de la web y, desde 2005, ha despertado un renovado interés gracias a AJAX.
  • DOM: Modelo de Objetos de Documento (Document Object Model). El código JavaScript incrustado en una página HTML tiene acceso al documento en forma de un árbol de objetos, el DOM. Cada elemento del documento (un campo de entrada, una etiqueta <div> con nombre, una etiqueta <select>, etc.) está representado por un nodo del árbol. El código JavaScript puede modificar el documento que se muestra al cambiar el DOM. Por ejemplo, puede cambiar el texto que se muestra en un campo de entrada a través del nodo del DOM que representa ese campo.

AJAX utiliza JavaScript para realizar intercambios entre el navegador y el servidor en segundo plano. Para responder a un evento, como hacer clic en un botón, el navegador ejecutará código JavaScript para enviar una solicitud HTTP al servidor. Esta solicitud contendrá parámetros que le indican al servidor qué debe hacer. El servidor ejecutará la acción solicitada. En respuesta, enviará al navegador un flujo HTTP que contiene datos que permiten una actualización parcial de la página que se muestra actualmente. Esta actualización se llevará a cabo a través del DOM del documento y la ejecución del código JavaScript integrado en el documento. Los datos devueltos por el servidor pueden presentarse en diferentes formatos: XML, HTML, JSON, texto sin formato, etc.

El interés de esta tecnología radica en esta actualización parcial del documento que se muestra. Esto significa:

  • menos datos intercambiados entre el cliente y el servidor y, por lo tanto, una respuesta más rápida
  • una interfaz gráfica más fluida de usar, ya que las acciones del usuario no provocan la recarga completa de la página.

En una intranet donde los intercambios de red son rápidos, AJAX permite crear aplicaciones web con un comportamiento similar al de las interfaces clásicas de Windows. De hecho, se pueden gestionar eventos como el cambio de selección en una lista y actualizar de inmediato y parcialmente la página para reflejar ese cambio de selección. El hecho de que la página no se recargue por completo le da al usuario la sensación de fluidez que tiene con las aplicaciones de Windows. Para aplicaciones de Internet, donde los tiempos de respuesta pueden ser largos, la tecnología AJAX sigue siendo utilizable, pero la sensación de fluidez depende de la de la red.

La principal dificultad en AJAX es el lenguaje JavaScript. Creado en los inicios de la web,

  • resulta poco práctico para la programación orientada a objetos. Por ejemplo, no es un lenguaje tipado. No se declara el tipo de los datos que se manipulan. En este sentido, se asemeja a lenguajes como Perl o PHP.
  • No cuenta con un estándar aceptado por todos los navegadores. Cada uno de ellos tiene sus propias extensiones «JavaScript» propietarias, lo que hace que un código JavaScript escrito para IE pueda no funcionar en Mozilla Firefox y viceversa.
  • Es difícil de depurar, ya que los navegadores no ofrecen herramientas eficaces para depurar el código JavaScript que ejecutan.

Todos estos problemas de JavaScript hicieron que se utilizara muy poco antes de la llegada de AJAX. Una vez que se comprendió la ventaja de ejecutar código JavaScript en segundo plano, para realizar solicitudes HTTP al servidor web y utilizar su respuesta para, gracias al DOM, una actualización parcial del documento que se muestra, los equipos de desarrollo se pusieron a trabajar y propusieron marcos de trabajo que permiten realizar el AJAX sin que el desarrollador tenga que escribir código de JavaScript. Para ello, se han creado bibliotecas de JavaScript que se adaptan al navegador del usuario. La inserción de código JavaScript en la página HTML enviada al navegador se realiza del lado del servidor, mediante técnicas que varían según el marco de trabajo AJAX utilizado. Existen marcos de trabajo de Ajax tanto para Java, .NET, PHP, Ruby, ... como para AJAX, que está integrado en Visual Web Developer 2008.

5.2. El proyecto de Visual Web Developer de la capa [web-ui-ajax]

La nueva versión se obtiene duplicando la versión anterior. Solo se modificará la página [Default.aspx].

  • en [1]: con el Explorador de Windows, se duplica la carpeta del proyecto [pam-v1-adonet] y se le asigna el nombre [pam-v2-adonet-ajax]. Luego, con Visual Web Developer, abrimos el proyecto (Archivo / Abrir un proyecto) de esta nueva carpeta [2]
  • en [3], y le damos un nuevo nombre
  • en las propiedades del nuevo proyecto, cambiamos el nombre del ensamblado [4], así como el espacio de nombres predeterminado [5].

Una vez hecho esto, en los archivos [Default.aspx, Default.aspx.cs, Default.aspx.designer.cs, Global.asax, Global.asax.cs] se reemplaza el espacio de nombres [pam_v1] por el espacio de nombres [pam_v2] para que coincida con el espacio de nombres predeterminado. Por ejemplo, [Default.aspx] [6] se convierte en:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="pam_v2._Default" %>
...

La página [Default.aspx] se modificará de la siguiente manera:

  • se agregan componentes Ajax al formulario [Default.aspx] (véase [2] más arriba).
    • 2A: el componente <asp:ScriptManager> es necesario para cualquier proyecto AJAX
    • 2B: el componente <asp:UpdatePanel> sirve para delimitar el área que se debe actualizar cuando el usuario realiza un POST. Este componente evita que se recargue la página por completo.
    • 2C: el componente <asp:UpdateProgress> sirve para mostrar un texto o una imagen durante el proceso de actualización con el fin de avisar al usuario, como se muestra a continuación:
  • (continuación)
    • 2D: un tipo Label llamado LabelHeureLoad que mostrará la hora en la que se ejecuta el controlador del evento Load de la página.
    • 2E: un tipo Label llamado LabelHeureSalaire que mostrará la hora en que se ejecuta el manejador del evento Click en el botón [Salaire]. Queremos demostrar que Ajax no recarga toda la página al hacer clic en el botón [Salaire]. Esto es lo que muestra la captura de pantalla anterior, donde se pueden ver dos horas diferentes en los dos Labels.

La implementación de Ajax en el formulario se puede realizar directamente en el código fuente de [Default.aspx] agregando etiquetas de extensión de Ajax:


...
<body style="text-align: left" bgcolor="#ffccff">
  <h3>
    Feuille de salaire
    <asp:Label ID="LabelHeureLoad" runat="server" BackColor="#C0C000"></asp:Label></h3>
  <hr />
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
    <asp:UpdatePanel runat="server" ID="UpdatePanelPam" UpdateMode="Conditional">
      <ContentTemplate>
        <div>
          <table>
            <tr>
...
            <tr>
              <td>
                <asp:DropDownList ID="ComboBoxEmployes" runat="server">
                </asp:DropDownList></td>
              <td>
                <asp:TextBox ID="TextBoxHeures" runat="server" EnableViewState="False">
                </asp:TextBox></td>
              <td>
                <asp:TextBox ID="TextBoxJours" runat="server" EnableViewState="False">
                </asp:TextBox></td>
              <td>
                <asp:Button ID="ButtonSalaire" runat="server" Text="Salaire" CausesValidation="False" /></td>
                <td>   <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                  <ProgressTemplate>
                    <img src="images/indicator.gif" />
                    <asp:Label ID="Label5" runat="server" BackColor="#FF8000" EnableViewState="False"
                      Text="Calcul en cours. Patientez ...."></asp:Label>
                  </ProgressTemplate>
                </asp:UpdateProgress>
          <asp:Label ID="LabelHeureSalaire" runat="server" BackColor="#C0C000"></asp:Label></td>
            </tr>
            <tr>
...
            </tr>
          </table>
        </div>
        <br />
....
          <table>
            <tr>
              <td>
                Salaire net à payer :
              </td>
              <td align="center" bgcolor="#C0C000" height="20px">
                <asp:Label ID="LabelSN" runat="server" EnableViewState="False"></asp:Label></td>
            </tr>
          </table>
          &nbsp;</asp:Panel>
      </ContentTemplate>
    </asp:UpdatePanel>
  </form>
</body>
</html>
  • línea 8: todo formulario con Ajax debe incluir la etiqueta <asp:ScriptManager>. Es esta etiqueta la que permite el uso de los nuevos componentes de Ajax:
  • La etiqueta <asp:ScriptManager> se puede obtener haciendo doble clic en el componente [ScriptManager] mencionado anteriormente. Es importante verificar que esta etiqueta se encuentre dentro de la etiqueta <form> del código fuente. El atributo [EnablePartialRendering= "true "] de la línea 8 no está presente por defecto. Dado que su valor predeterminado es «true», no es imprescindible.
  • Línea 9: la etiqueta <asp:UpdatePanel> permite delimitar las áreas de la página que deben actualizarse durante una actualización parcial de la página. El atributo [UpdateMode="Conditional"] indica que el área solo debe actualizarse ante un evento AJAX de un componente del área. El otro valor es [UpdateMode="Always"] y es el valor predeterminado. Con este atributo, el área UpdatePanel se actualiza sistemáticamente, incluso si el evento Ajax que se produjo proviene de un componente de otra área UpdatePanel. Por lo general, este comportamiento no es deseable.

La etiqueta <asp:UpdatePanel> admite dos etiquetas hijas: <ContentTemplate> y <Triggers>.

  • Las etiquetas <asp:ContentTemplate>, en las líneas 10 y 53, delimitan el área de la página que se actualizará parcialmente.
  • Líneas 27-33: un componente Ajax <asp:UpdateProgress> que permite mostrar un texto durante todo el proceso de actualización de la página. Por ejemplo, al hacer clic en el botón [Salaire] se ejecutará un POST en segundo plano. De esta manera, el navegador no muestra el icono del reloj de arena y el usuario podría sentirse tentado a seguir utilizando el formulario. La etiqueta <asp:UpdateProgress> permite mostrar un texto que advierte que se está actualizando la página. También se puede mostrar una imagen. En este caso, se muestra una imagen animada (línea 29) junto con un texto (líneas 30-31):
 
  • líneas 28-32: la etiqueta <ProgressTemplate> delimita el contenido que se mostrará durante todo el proceso de actualización de la zona UpdatePanel, en la que se encuentra la etiqueta UpdateProgress.
  • líneas 29-31: la imagen animada y el texto que se mostrarán durante la actualización del área UpdatePanel.
  • línea 5: la etiqueta LabelHeureLoad se coloca fuera del área con Ajax
  • línea 34: la etiqueta LabelHeureSalaire se coloca dentro del área con Ajax

El código de la página [Default.aspx.cs] cambia de la siguiente manera:


    protected void Page_Load(object sender, System.EventArgs e)
    {
        // hora de cada carga de página
        LabelHeureLoad.Text = DateTime.Now.ToString("hh:mm:ss");
        // procesamiento de la solicitud inicial
        if (!IsPostBack)
        {
....
}
  • línea 4: actualización de la hora de carga de la página 

   protected void ButtonSalaire_Click(object sender, System.EventArgs e)
    {
        // hora del cálculo del salario
        LabelHeureSalaire.Text = DateTime.Now.ToString("hh:mm:ss");
        // se verifican los datos
....
}
  • línea 4: actualización de la hora de cálculo del salario

Para completar la página [Default.aspx], debemos incluir la imagen animada a la que hace referencia la línea 4 del siguiente código fuente de la página:


            <td>
              <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                <ProgressTemplate>
                  <img src="images/indicator.gif" />
                  <asp:Label ID="Label5" runat="server" BackColor="#FF8000" EnableViewState="False"
                    Text="Calcul en cours. Patientez ...."></asp:Label>
                </ProgressTemplate>
              </asp:UpdateProgress>
              <asp:Label ID="LabelHeureSalaire" runat="server" BackColor="#C0C000"></asp:Label>
</td>

Con el Explorador de Windows, agregamos el archivo [images/indicator.gif] a la carpeta del proyecto [1]:

  • En [2], mostramos todos los archivos del proyecto
  • en [3], la carpeta [images]
  • en [4], se incluye la carpeta [images] en el proyecto
  • en [5], la carpeta [images] se ha incluido en el proyecto
  • en [6], se ocultan los archivos que no forman parte del proyecto
  • en [7], el nuevo proyecto

5.3. Pruebas de la solución Ajax

Al solicitar la ejecución del proyecto (CTRL-F5), se obtiene la siguiente página:

  • en [1], el tiempo de carga de la página

Realice algunas pruebas y verifique que el botón [Salaire] no provoque la recarga completa de la página. Puede observarlo en la hora que se muestra para el procesamiento del clic en el botón [Salaire] [2], que no es la misma que la hora de la carga inicial de la página [3]:

Repita las pruebas cambiando la propiedad EnablePartialRendering del componente ScriptManager1 a False:

  

Obsérvese que, en ese caso, se recupera el comportamiento de una página sin AJAX. Se produce una recarga total de la página al hacer clic en el botón [Salaire]. Repita las pruebas con otro navegador. La prueba en múltiples navegadores tiene como objetivo demostrar que el JavaScript generado por los componentes de servidor ASP / AJAX es interpretado correctamente por los distintos navegadores.

Para terminar, destacaremos la función de la etiqueta <asp:UpdateProgress>. En el código del procedimiento [ButtonSalaire_Click] de [Default.aspx.cs], agreguemos una instrucción que detenga el procedimiento durante 3 segundos:


using System.Threading;
   ...
protected void ButtonSalaire_Click(object sender, System.EventArgs e)
    {
        // hora del cálculo del salario
        LabelHeureSalaire.Text = DateTime.Now.ToString("hh:mm:ss");
        // espera 
        Thread.Sleep(3000);
        // se verifican los datos
....
}

La línea 8 hace que el hilo que ejecuta el procedimiento [ButtonSalaire_Click] espere 5 segundos. Una vez hecho esto, volvamos a realizar las pruebas (después de volver a establecer el atributo EnablePartialRendering del componente ScriptManager1 en True). Esta vez, vemos el texto de [UpdateProgress], así como la imagen animada durante el cálculo del salario:

Image

5.4. Conclusion

El estudio anterior nos mostró que era posible implementar AJAX en aplicaciones ASP.NET existentes. Las extensiones AJAX de ASP.NET van más allá de lo que acabamos de ver. Se invita al lector a consultar el sitio [http://ajax.asp.net].

https://stahe.github.io
Este tutorial, escrito por Serge Tahé, se pone a disposición del público bajo los términos de la Creative Commons Reconocimiento – Sin uso comercial – Compartir igual 3.0 sin modificaciones.