Skip to content

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

5.1. Introducción

La tecnología AJAX (Asynchronous Javascript And Xml) reúne un conjunto de tecnologías:

  • Javascript: una página HTML mostrada en un navegador puede incorporar código Javascript. Este código es ejecutado por el navegador si el usuario no ha desactivado la ejecución de código Javascript en su navegador. Esta tecnología apareció en los inicios de la web y, desde 2005, está suscitando un renovado interés gracias a AJAX.
  • DOM: Modelo de objetos de documento. El código Javascript incrustado en una página HTML tiene acceso al documento en forma de á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 mostrado cambiando el DOM. Por ejemplo, puede cambiar el texto mostrado en un campo de entrada a través del nodo del DOM que representa dicho campo.

AJAX utiliza Javascript para realizar intercambios entre el navegador y el servidor en segundo plano. Para responder a un evento como el clic en un botón, el navegador ejecutará código Javascript para enviar una solicitud HTTP al servidor. Esta solicitud contendrá parámetros que indican al servidor lo que debe hacer. Este ejecutará la acción solicitada. Enviará al navegador, como respuesta, un flujo HTTP que contiene datos que permiten una actualización parcial de la página que se muestra actualmente. Esta se llevará a cabo a través del DOM del documento y la ejecución del código Javascript incrustado 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 reside en esta actualización parcial del documento mostrado. 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 la página de forma inmediata y parcial para reflejar dicho cambio. El hecho de que la página no se recargue por completo 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. No es, por ejemplo, un lenguaje tipado. En él no se declara el tipo de los datos manipulados. 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», 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 del Javascript hicieron que se utilizara poco antes de la llegada del AJAX. Una vez comprendido el interés de ejecutar código Javascript en segundo plano, para realizar solicitudes HTTP al servidor web y utilizar la respuesta de este para realizar, gracias a DOM, una actualización parcial del documento mostrado, los equipos de desarrollo se pusieron manos a la obra y propusieron marcos que permiten realizar AJAX sin que el desarrollador tenga que escribir código Javascript. Para ello, se han escrito bibliotecas Javascript que se adaptan al navegador del cliente. La inserción de código Javascript en la página HTML enviada al navegador se realiza en el lado del servidor, según técnicas que varían en función del marco de trabajo AJAX utilizado. Existen frameworks Ajax tanto para Java, .NET, PHP, Ruby, ... AJAX está integrado en Visual Web Developer 2008.

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

La nueva version se obtiene duplicando la anterior version. 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 da el nombre [pam-v2-adonet-ajax]. A continuación, con Visual Web Developer, abrimos el proyecto (Archivo / Abrir proyecto) de esta nueva carpeta [2]
  • en [3], 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 sustituye el espacio de nombres [pam_v1] por el espacio de nombres [pam_v2] para que sea coherente 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 añaden 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 la recarga total de la página.
    • 2C: el componente <asp:UpdateProgress> sirve para mostrar un texto o una imagen durante la actualización con el fin de avisar al usuario, tal y como se muestra a continuación:
  • (continuación)
    • 2D: un tipo Label denominado LabelHeureLoad que mostrará la hora a la que se ejecuta el controlador del evento Load de la página.
    • 2E: un tipo Label denominado LabelHeureSalaire que mostrará la hora en la que se ejecuta el controlador del evento Click del botón [Salaire]. Queremos mostrar 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 las dos etiquetas Label.

La anterior «ajaxificación» del formulario se puede realizar directamente en el código fuente de [Default.aspx] añadiendo etiquetas de extensiones 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 «ajaxificado» debe incluir la etiqueta <asp:ScriptManager>. Es esta etiqueta la que permite el uso de los nuevos componentes Ajax:
  • la etiqueta <asp:ScriptManager> se puede obtener haciendo doble clic en el componente [ScriptManager] anterior. Hay que asegurarse de que esta etiqueta se encuentra dentro de la etiqueta <form> del código fuente. El atributo [EnablePartialRendering= "true "] de la línea 8 está ausente por defecto. Dado que el valor «true» es su valor por defecto, no es imprescindible.
  • Línea 9: la etiqueta <asp:UpdatePanel> permite delimitar las zonas de la página que deben actualizarse durante una actualización parcial de la página. El atributo [UpdateMode="Conditional"] indica que la zona solo debe actualizarse ante un evento AJAX de un componente de la zona. El otro valor es [UpdateMode="Always"] y es el valor por defecto. Con este atributo, el área UpdatePanel se actualiza sistemáticamente, incluso si el evento Ajax que se ha producido proviene de un componente de otra área UpdatePanel. En general, este comportamiento no es deseable.

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

  • Las etiquetas <asp:ContentTemplate>, en las líneas 10 y 53, delimitan el área de la página que se va a actualizar parcialmente.
  • Líneas 27-33: un componente Ajax <asp:UpdateProgress> que permite mostrar un texto durante todo el tiempo que dura la actualización de la página. Por ejemplo, al hacer clic en el botón [Salaire] se ejecutará un POST en segundo plano. El navegador no muestra entonces el reloj de arena, por lo que el usuario puede verse tentado a seguir utilizando el formulario. La etiqueta <asp:UpdateProgress> permite mostrar un texto que avisa de 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) y un texto (líneas 30-31):
 
  • líneas 28-32: la etiqueta <ProgressTemplate> delimita el contenido que se mostrará durante toda la 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 de la zona UpdatePanel.
  • línea 5: la etiqueta LabelHeureLoad se coloca fuera del área ajaxificada
  • línea 34: la etiqueta LabelHeureSalaire se coloca dentro del área ajaxificada

El código de la página [Default.aspx.cs] evoluciona 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 comprueban 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, añadimos 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 compruebe que el botón [Salaire] no provoca la recarga completa de la página. Puede comprobarlo con la hora mostrada 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 estableciendo la propiedad EnablePartialRendering del componente ScriptManager1 en False:

  

Observe que entonces 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 multibrowser tiene como objetivo demostrar que el javascript generado por los componentes de servidor ASP / AJAX es interpretado correctamente por los diferentes navegadores.

Para terminar, destacaremos la función de la etiqueta <asp:UpdateProgress>. En el código del procedimiento [ButtonSalaire_Click] de [Default.aspx.cs], añadiremos una instrucción que detiene 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 comprueban 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 (tras 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:

5.4. Conclusión

El estudio anterior nos ha mostrado que es posible aplicar AJAX a 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 curso-tutorial escrito por Serge Tahé se pone a disposición del público según los términos de la Licencia Creative Commons Reconocimiento – Sin uso comercial – Compartir en las mismas condiciones 3.0 no adaptada.