Aplicación habilitada para AJAX de ejemplo

Artículo
10/22/2014

Actualización: noviembre 2007

Este tutorial crea una aplicación de ejemplo básica que utiliza características AJAX de ASP.NET. Puede leer más sobre las características de AJAX en ASP.NET, qué problemas técnicos están diseñadas para resolver dichas características, y qué importantes son los componentes AJAX en los siguientes documentos preliminares:

En este tutorial generará una aplicación que muestre páginas de datos de los empleados 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.
Un sitio web ASP.NET habilitado para AJAX.
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 ASP.NET

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

Inicie Visual Studio.
En el menú Archivo, haga clic en Nuevo sitio Web.

Se muestra el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, seleccione Sitio Web ASP.NET.
Escriba una ubicación y un idioma y, después, haga clic en Aceptar.

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

Después de crear un sitio web ASP.NET, 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 debajo del control ScriptManager.

Agregar contenido a un control UpdatePanel

El control UpdatePanel realiza 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 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 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 tarda 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:
El controlador del evento PageIndexChanged aplica de forma intencionada un retraso a este tutorial. En la práctica, no debería incluir un retraso. En este caso, si se produce un retraso será como resultado del tráfico del servidor o debido a que el código de servidor tarda mucho 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.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

    Protected Sub GridView1_PageIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        'Include three second delay for example only.
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:GridView ID="GridView1"  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" Font-Bold="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"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

    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 >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:GridView ID="GridView1"  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" Font-Bold="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"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>