Tutorial: Crear un sitio web habilitado para AJAX

Artículo
10/07/2008

Actualización: noviembre 2007

Este tutorial crea un sitio web ASP.NET básico con una página web que muestra algunas características de la biblioteca AJAX de ASP.NET incluida con Visual Studio. Generará una aplicación que muestra páginas de datos de empleado de la base de datos de ejemplo de AdventureWorks. La aplicación usa el control UpdatePanel para actualizar sólo la parte de la página que ha cambiado, sin el parpadeo de la página que se produce con una devolución de datos. Esto se conoce como una actualización parcial de la página. La aplicación de ejemplo también usa el control UpdateProgress para mostrar un mensaje de estado mientras se procesa la actualización parcial de la página.

Requisitos previos

Para implementar los procedimientos en su propio entorno de desarrollo, necesitará:

Microsoft Visual Studio 2005 o Microsoft Visual Web Developer Express.
La base de datos de ejemplo de AdventureWorks. Puede descargar e instalar la base de datos de AdventureWorks desde el Centro de descarga de Microsoft. (Busque "SQL Server 2005 Samples and Sample Databases (December 2006)").

Crear un sitio Web

Si ya ha creado un sitio web en Visual Web Developer (por ejemplo, según los pasos indicados en Tutorial: Crear una página Web básica en Visual Web Developer), puede usar dicho sitio web y pasar a la siguiente sección, Crear la página principal. De lo contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.

Para crear un sitio Web del sistema de archivos

Abra Visual Web Developer.
En el menú Archivo, haga clic en NuevoSitio Web.

Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET.
En el cuadro Ubicación, escriba el nombre de la carpeta en la que desea conservar las páginas de su sitio Web.

Por ejemplo, escriba el nombre de carpeta C:\WebSites.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Haga clic en Aceptar.

Visual Web Developer crea la carpeta y una página nueva denominada Default.aspx.

Agregar un control UpdatePanel a una página web ASP.NET

Después de crear un sitio web, debe crear una página web ASP.NET que incluya un control UpdatePanel. Antes de agregar un control UpdatePanel a la página, debe agregar un control ScriptManager. El control UpdatePanell se basa en el control ScriptManager para administrar las actualizaciones parciales de la página.

Para crear una nueva página web ASP.NET

En el Explorador de soluciones, haga clic con el botón secundario en el nombre del sitio y haga clic en Agregar nuevo elemento.

Se abrirá el cuadro de diálogo Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, seleccione Web Forms.
Asigne a la nueva página el nombre Employees.aspx y desactive la casilla Colocar el código en un archivo independiente.
Seleccione el idioma que desea usar.
Haga clic en Agregar.
Cambie a la vista Diseño.
En la ficha Extensiones AJAX del cuadro de herramientas, haga doble clic en el control ScriptManager para agregarlo a la página.
Arrastre un control UpdatePanel desde el cuadro de herramientas y colóquelo bajo el control ScriptManager.

Agregar contenido a un control UpdatePanel

El control UpdatePanel realiza las actualizaciones parciales de la página e identifica contenido que se actualiza independientemente del resto de la página. En esta parte del tutorial, agregará un control enlazado a datos que muestra datos de la base de datos de AdventureWorks.

Para agregar contenido a un control UpdatePanel

En la ficha Datos del cuadro de herramientas, arrastre un control GridView hasta el área editable del control UpdatePanel.
En el menú Tareas de GridView, haga clic en Formato automático.
En el panel Formato automático, en Seleccionar una combinación, seleccione Multicolor y, a continuación, haga clic en Aceptar.
En el menú Tareas de GridView, seleccione <Nuevo origen de datos> en la lista Elegir origen de datos.

Aparece el Asistente para la configuración de orígenes de datos.
En ¿De dónde obtendrá la aplicación los datos?, seleccione Base de datos y haga clic en Aceptar.
En el Asistente para la configuración de orígenes de datos, en el paso Elegir la conexión de datos, configure una conexión a la base de datos de AdventureWorks y, a continuación, haga clic en Siguiente.
En el paso Configurar la instrucción Select, seleccione Especificar una instrucción SQL o un procedimiento almacenado personalizado y, a continuación, haga clic en Siguiente.
En la ficha SELECT del paso Definir instrucciones o procedimientos almacenados personalizados, escriba la siguiente instrucción SQL:
```
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName
```
Haga clic en Siguiente.
Haga clic en Finalizar.
En el menú Tareas de GridView, active la casilla Habilitar paginación.
Guarde los cambios y presione CTRL+F5 para ver la página en un explorador.

Observe que la página no parpadea al seleccionar diferentes páginas de datos. Esto se debe a que la página no realiza una devolución de datos y actualiza la página entera cada vez.

Agregar un control UpdateProgress a la página

El control UpdateProgress muestra un mensaje de estado mientras se solicita el nuevo contenido de un control UpdatePanel.

Para agregar un control UpdateProgress a la página

En la ficha Extensiones AJAX del cuadro de herramientas, arrastre un control UpdateProgress a la página y colóquelo bajo el control UpdatePanel.
Seleccione el control UpdateProgress y, en la ventana Propiedades, establezca la propiedad AssociatedUpdatePanelID en UpdatePanel1.

De esta forma asocia el control UpdateProgress al control UpdatePanel que agregó previamente.
En el área editable del control UpdateProgress, escriba Obteniendo empleados... .
Guarde los cambios y presione CTRL+F5 para ver la página en un explorador.

Si hay un retraso mientras la página ejecuta la consulta SQL y devuelve los datos, el control UpdateProgress muestra el mensaje que escribió en el control UpdateProgress.

Agregar un retraso a la aplicación de ejemplo

Si la aplicación actualiza rápidamente cada página de datos, es posible que no vea el contenido del control UpdateProgress en la página. El control UpdateProgress admite una propiedad DisplayAfter que permite establecer un retraso antes de que se muestre el control. De esta forma evita que el control parpadee en el explorador si la actualización se produce con mucha rapidez. De forma predeterminada, el retraso se establece en 500 milisegundos (0,5 segundos), lo que significa que el control UpdateProgress no se mostrará si la actualización tarde menos de medio segundo.

En un entorno de desarrollo, puede agregar un retraso artificial a la aplicación para asegurarse de que el control UpdateProgress funciona como se espera. Éste es un paso opcional y sólo sirve para probar la aplicación.

Para agregar un retraso a la aplicación de ejemplo

En el control UpdatePanel, seleccione el control GridView.
En la ventana Propiedades, haga clic en el botón Eventos.
Haga doble clic en el evento PageIndexChanged para crear un controlador de eventos.

Agregue el código siguiente al controlador de eventos PageIndexChanged para crear artificialmente un retraso de tres segundos:

'Include three second delay for example only.
System.Threading.Thread.Sleep(3000)

//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);

Nota:
En este tutorial, el controlador del evento PageIndexChanged introduce un retraso de manera intencionada. En la práctica, no debería incluir un retraso. Si se produce un retraso en este caso, será como resultado del tráfico del servidor o debido a que el código de servidor tarda mucho en tiempo en procesarse, como ocurre con las consultas de base de datos de ejecución prolongada.

Guarde los cambios y presione CTRL+F5 para ver la página en un explorador.

Dado que ahora se produce un retraso de tres segundos cada vez que se desplaza a una nueva página de datos, podrá ver el control UpdateProgress.