AJAX y ASP.

NET
ASP.NET AJAX(Asynchrounous Javascript and XML) es un conjunto de extensiones que
permiten la implementacin en web forms para actualizar datos en la pantalla sin
necesidad de una recarga completa de la misma. Para poder usar AJAX en un entorno
ASP.NET es necesario tener instaladas las extensiones de AJAX.
Generaremos una aplicacin que muestre pginas de datos de los empleados de la base
de datos de ejemplo de AdventureWorks. La aplicacin usa el control UpdatePanel para
actualizar slo la parte de la pgina que ha cambiado, sin el parpadeo de la pgina que se
produce con una devolucin de datos. Esto se conoce como una actualizacin parcial de la
pgina. La aplicacin de ejemplo tambin usa el control UpdateProgress para mostrar un
mensaje de estado mientras se procesa la actualizacin parcial de la pgina.
(La base de datos de ejemplo de AdventureWorks la puede descargar e instalar desde
http://msftdbprodsamples.codeplex.com/releases/view/59211 )

Los sitios web que crea en ASP.NET incluyen de forma predeterminada compatibilidad con la
funcionalidad de AJAX.

Para crear un sitio web ASP.NET habilitado para AJAX

1.
2.
3.
4.

Inicie Visual Studio.

En el men Archivo, haga clic en Nuevo sitio Web.
Se muestra el cuadro de dilogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, seleccione Sitio Web ASP.NET.
Escriba una ubicacin y un idioma y, despus, haga clic en Aceptar.

Para crear una nueva pgina web ASP.NET

1.

2.
3.
4.
5.
6.
7.

En el Explorador de soluciones, haga clic con el botn secundario en el nombre del sitio y
haga clic en Agregar nuevo elemento.
Se abrir el cuadro de dilogo Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, seleccione Web Forms.
Asigne a la nueva pgina el nombre Employees.aspx y desactive la casilla Colocar el cdigo
en un archivo independiente.
Seleccione el idioma que desea usar.
Haga clic en Agregar.
Cambie a la vista Diseo.
En la ficha Extensiones AJAX del cuadro de herramientas, haga doble clic en el
control ScriptManager para agregarlo a la pgina.

8.

Arrastre un control UpdatePanel desde el cuadro de herramientas y colquelo debajo del

control ScriptManager.

Agregar contenido a un control UpdatePanel

El control UpdatePanel realiza actualizaciones parciales de la pgina e identifica contenido que se
actualiza independientemente del resto de la pgina. 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

1.
2.
3.
4.

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 automtico.
En el panel Formato automtico, en Seleccionar una combinacin,
seleccione Multicolor y, a continuacin, 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 configuracin de orgenes de datos.

5.
6.

7.
8.

En De dnde obtendr la aplicacin los datos?, seleccione Base de datos y haga clic
en Aceptar.
En el Asistente para la configuracin de orgenes de datos, en el paso Elegir la
conexin de datos, configure una conexin a la base de datos de AdventureWorks y, a
continuacin, haga clic en Siguiente.
En el paso Configurar la instruccin Select, seleccione Especificar una instruccin SQL o
un procedimiento almacenado personalizado y, a continuacin, haga clic en Siguiente.
En la ficha SELECT del paso Definir instrucciones o procedimientos almacenados
personalizados, escriba la siguiente instruccin SQL:
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY
LastName, FirstName

9.
10.
11.
12.

Haga clic en Siguiente.

Haga clic en Finalizar.
En el men Tareas de GridView, active la casilla Habilitar paginacin.
Guarde los cambios y presione CTRL+F5 para ver la pgina en un explorador.
Observe que la pgina no parpadea al seleccionar diferentes pginas de datos. Esto se debe
a que la pgina no realiza una devolucin de datos y actualiza la pgina entera cada vez.

Agregar un control UpdateProgress a la pgina

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 pgina

1.
2.

3.
4.

En la ficha Extensiones AJAX del cuadro de herramientas, arrastre un

control UpdateProgress a la pgina y colquelo debajo del 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 pgina en un explorador.
Si hay un retraso mientras la pgina ejecuta la consulta SQL y devuelve los datos, el
control UpdateProgress muestra el mensaje que escribi en el controlUpdateProgress.

Agregar un retraso a la aplicacin de ejemplo

Si la aplicacin actualiza rpidamente cada pgina de datos, es posible que no vea el contenido del
control UpdateProgress en la pgina. 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 actualizacin 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 actualizacin tarda menos de

medio segundo.
En un entorno de desarrollo, puede agregar un retraso artificial a la aplicacin para asegurarse de
que el control UpdateProgress funciona como se espera. ste es un paso opcional y slo sirve para
probar la aplicacin.

Para agregar un retraso a la aplicacin de ejemplo

1.
2.
3.
4.

En el control UpdatePanel, seleccione el control GridView.

En la ventana Propiedades, haga clic en el botn Eventos.
Haga doble clic en el evento PageIndexChanged para crear un controlador de eventos.
Agregue el cdigo siguiente al controlador de eventos PageIndexChanged para crear
artificialmente un retraso de tres segundos:
System.Threading.Thread.Sleep(3000);

5.

Guarde los cambios y presione CTRL+F5 para ver la pgina en un explorador.

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

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void GridView1_PageIndexChanged(object sender, EventArgs e)
{
//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server"
AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"

ForeColor="#333333" GridLines="None"
OnPageIndexChanged="GridView1_PageIndexChanged">
<FooterStyle BackColor="#990000" Font-Bold="True"
ForeColor="White" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" FontBold="True" ForeColor="Navy" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333"
HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000" Font-Bold="True"
ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString
%>"
SelectCommand="SELECT FirstName, LastName FROM
HumanResources.vEmployee ORDER BY LastName, FirstName">
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Getting employees...
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>