Tutorial: Crear una aplicación de datos habilitada para AJAX

  • Artículo

Actualización: noviembre 2007

En este tutorial se describe cómo crear una aplicación web habilitada para AJAX que pueda funcionar como una lista de tareas pendientes o como una lista de tareas. Ayuda a crear una interfaz de usuario básica para crear, administrar y eliminar listas y los elementos de esas listas. Todas las operaciones de inserción, actualización, eliminación, ordenación y paginación se realizan dentro de un control UpdatePanel que utiliza AJAX.

Puede utilizar el control UpdatePanel para habilitar las devoluciones de datos asincrónicas en una página. De forma predeterminada, ASP.NET actualiza la página entera cuando se produce una devolución de datos. Sin embargo, cuando se utiliza el control UpdatePanel para crear devoluciones de datos asincrónicas, sólo cambian los elementos de la página que están dentro del control UpdatePanel. Esto hace que la página parezca más dinámica y rápida, y la experiencia del usuario sea más satisfactoria.

Entre las tareas ilustradas en este tutorial se incluyen las siguientes:

  • Crear una base de datos SQL y agregar datos.

  • Agregar un control LinqDataSource a una página.

  • Agregar un archivo Clases de LINQ to SQL.

  • Utilizar el control ListView para mostrar, modificar y eliminar datos.

  • Utilizar el control LinqDataSource para conectar a una base de datos utilizando Language-Integrated Query (LINQ). Para obtener más información, vea Language-Integrated Query (LINQ).

  • Utilizar el control UpdatePanel para agregar funcionalidad AJAX a la página.

Requisitos previos

Para realizar este tutorial, necesitará lo siguiente:

  • Microsoft Visual Studio 2008 o Visual Web Developer 2008 Express. Para obtener información sobre descargas, visite el sitio web Visual Studio Development Center.

  • SQL Server Express Edition instalado en el equipo. Si tiene SQL Server instalado, puede usarlo, pero debe realizar pequeños ajustes en algunos procedimientos.

Crear un sitio Web

En esta parte del tutorial va a crear un sitio web y a agregarle una nueva página. En la sección siguiente, se conectará a una base de datos. Si ya ha creado un sitio web (por ejemplo, mediante los pasos descritos en Tutorial: Crear una página Web básica en Visual Web Developer), puede utilizar ese sitio web para este tutorial. De lo contrario, cree un sitio Web nuevo siguiendo estos pasos.

Para crear un nuevo sitio Web del sistema de archivos

  1. En Visual Web Developer, en el menú Archivo, haga clic en Nuevo Sitio Web.

    Se muestra el cuadro de diálogo Nuevo sitio Web.

  2. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.

  3. En el cuadro Ubicación, haga clic en Sistema de archivos y escriba el nombre de la carpeta en la que desea guardar las páginas del sitio web.

  4. En la lista Lenguaje, haga clic en Visual Basic o Visual C# y, a continuación, haga clic en Aceptar.

    Nota:

    El lenguaje de programación que seleccione será el lenguaje predeterminado de su sitio web, pero también puede establecer el lenguaje de programación de cada página de forma individual.

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

Crear una nueva base de datos de SQL Server

Ahora que tiene un sitio web, el paso siguiente es crear una base de datos y agregar una referencia a la base de datos en el Explorador de servidores. (En Visual Web Developer 2008 Express, el Explorador de servidores se denomina Explorador de bases de datos.) Cuando se agrega una base de datos al Explorador de servidores, puede utilizar Visual Studio para agregar tablas, procedimientos almacenados, vistas, etc.. También puede ver los datos de la tabla o crear sus propias consultas a mano o gráficamente utilizando la ventana Generador de consultas.

Para agregar una base de datos al proyecto

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

    Se abrirá el cuadro de diálogo Agregar nuevo elemento.

  2. Seleccione Base de datos SQL, asigne el nombre Tasks.mdf a la base de datos y, a continuación, haga clic en Aceptar.

  3. Cuando Visual Studio le pregunte si la base de datos debe almacenarse en la carpeta App_Data, haga clic en Sí.

Crear un esquema y datos de ejemplo para la base de datos

Puede utilizar las características de diseño y edición de bases de datos para crear un esquema para la nueva tabla que almacena los elementos de tarea.

Para crear un esquema y datos de ejemplo para la base de datos

  1. En el Explorador de soluciones, abra la carpeta App_Data y haga doble clic en Tasks.mdf.

    La jerarquía en árbol de la base de datos Tasks se muestra en el Explorador de servidores (o Explorador de bases de datos).

  2. Haga clic con el botón secundario del mouse en la carpeta Tablas y haga clic en Agregar nueva tabla.

  3. En el editor de la tabla de base de datos, cree las columnas siguientes en la tabla:

    Nombre de columna

    Tipo de datos

    Propiedades

    taskId

    int

    Permitir valores null: No

    taskName

    nvarchar(50)

    Permitir valores null: No

    dateCreated

    datetime

    Permitir valores null: No

    isComplete

    bit

    Permitir valores null: No

  4. Haga clic con el botón secundario del mouse en la fila que contiene taskid y, a continuación, haga clic en Establecer clave principal.

  5. Con la fila taskid aún seleccionada, en la ficha Propiedades de columna, abra la sección Especificación de identidad y, a continuación, establezca (Identidad) en Sí.

  6. Guarde la tabla y asígnele el nombre TasksList.

  7. Haga clic con el botón secundario en el Explorador de servidores y haga clic en Mostrar datos de tabla.

    Se muestra una ventana donde puede ver y agregar los datos.

  8. Agregue cuatro o cinco registros a la tabla y, a continuación, cierre el diseñador de bases de datos.

    No tiene que especificar un valor para taskid, porque es una columna de identidad cuyo valor se asigna automáticamente. Debe especificar False o True para el campo isComplete.

Crear los controles de acceso a datos

En esta sección, se utilizará el control LinqDataSource y se crearán las clases que representan las entidades de la base de datos. El control y las clases creados son la capa de acceso a datos que se utilizará en este tutorial.

El control LinqDataSource expone Language Integrated Query (LINQ) a los desarrolladores web a través de la arquitectura de controles de origen de datos ASP.NET. El control LinqDataSource crea código para seleccionar, insertar, actualizar y eliminar objetos de la base de datos. LINQ aplica los principios de la programación orientada a objetos a los datos relacionales. Proporciona un modelo de programación unificado para realizar consultas y actualizar datos de clases diferentes de orígenes de datos y amplía directamente las funciones de datos en los lenguajes C# y Visual Basic. Para obtener más información sobre LINQ, vea Language-Integrated Query (LINQ).

Asignar la base de datos de tareas a un objeto de contexto de datos de SQL

Para comenzar a crear la capa de acceso a datos, se agrega un conjunto de datos con tipo al proyecto.

Para crear una clase para la tabla TasksList

  1. Si el sitio web no tiene todavía una carpeta App_Code, en el Explorador de soluciones, haga clic con el botón secundario en el nombre del sitio web, haga clic en Agregar carpeta ASP.NET y, a continuación, en App_Code.

  2. Haga clic con el botón secundario del mouse en la carpeta App_Code y, a continuación, haga clic en Agregar nuevo elemento.

  3. En Plantillas instaladas de Visual Studio, seleccione Clases LINQ to SQL, cambie el nombre de archivo a Tasks.dbml y, a continuación, haga clic en Agregar.

    Se muestra el Diseñador relacional de objetos.

  4. En el Explorador de servidores, arrastre la tabla TasksList a la ventana Diseñador relacional de objetos.

  5. Guarde el archivo Tasks.dbml.

    Al guardar el archivo, Visual Studio crea dos archivos en la carpeta App_Code bajo Tasks.dbml. El primer archivo es Tasks.dbml.layout. El segundo archivo es Tasks.designer.cs o Tasks.designer.vb, dependiendo del lenguaje seleccionado al crear el archivo Tasks.dbml.

  6. En el Explorador de soluciones, abra el archivo Tasks.designer.cs o Tasks.designer.vb.

    Observe que el código contiene las clases denominadas TasksDataContext y TasksList. La clase TasksDataContext representa la base de datos y la clase TasksList representa la tabla de base de datos. El constructor sin parámetros de la clase TasksDataContext lee la cadena de conexión del archivo Web.config.

  7. Abra el archivo Web.config.

    Observe que se ha agregado una cadena de conexión a la base de datos Tasks.mdf en el elemento connectionStrings.

  8. Cierre el archivo de clase, la ventana Diseñador relacional de objetos y el archivo Web.config.

Crear y configurar un control LinqDataSource

Ahora que cuenta con una tabla de base de datos y clases que representan las entidades de base de datos, puede usar un control LinqDataSource en una página web ASP.NET para tener acceso a la base de datos.

Para crear y configurar un control LinqDataSource

  1. Abra o cambie a la página Default.aspx.

  2. Cambie a la vista Diseño.

  3. Arrastre un control LinqDataSource a la página.

    Puede dejar la propiedad ID como LinqDataSource1.

  4. En el panel de etiquetas inteligentes Tareas de LinqDataSource, haga clic en Configurar origen de datos.

    Nota:

    Si no se muestra el panel de etiquetas inteligentes, hace clic con el botón secundario del mouse en el control LinqDataSource y, a continuación, haga clic en Mostrar etiqueta inteligente.

  5. En la lista Elija el objeto de contexto, seleccione TasksDataContext y, a continuación, haga clic en Siguiente.

  6. En la lista Tabla, seleccione TasksLists(Table<TasksList>) y, a continuación, haga clic en Finalizar.

  7. En el menú Tareas de LinqDataSource, seleccione Habilitar eliminación, Habilitar inserción y Habilitar actualización.

    Observe que no tuvo que especificar ningún comando de base de datos para seleccionar los datos.

  8. Guarde la página.

Utilizar los controles de orígenes de datos

En esta sección, agregará a la página los controles que utilizan el archivo Clases de LINQ to SQL que asignó la tabla de base de datos a las clases. También utilizará el control LinqDataSource para crear una aplicación de datos básica.

Agregará un control ListView para mostrar los datos de una base de datos de SQL Server. A continuación, agregará un control DropDownList para filtrar los datos que aparecen en el control ListView. Más adelante en el tutorial, colocará los controles en un control UpdatePanel para agregar las funciones de devolución de datos asincrónica.

Mostrar datos con un control ListView

El control ListView resulta útil para mostrar datos de cualquier estructura de repetición, de forma similar a los controles DataList y Repeater. Sin embargo, a diferencia de estos controles, el control ListView admite las operaciones de edición, inserción y eliminación, así como la ordenación y la paginación.

Agregará un control ListView que muestra todas las tareas. Después, agregará una lista desplegable que permite filtrar los datos. El control ListView da formato a la presentación de los datos y muestra botones que se pueden utilizar para modificar y actualizar el contenido, o para insertar nuevo contenido.

Para agregar un control ListView a la página

  1. Abra o cambie a la página donde agregó el control LinqDataSource.

  2. Desde la ficha Datos de la Barra de herramientas, arrastre un control ListView a la página.

  3. En el menú Tareas de ListView, en la lista Elegir origen de datos, seleccione LinqDataSource1.

    De esta manera se enlaza ListView al control LinqDataSource que configuró anteriormente en el tutorial.

  4. En el panel de etiquetas inteligentes Tareas de ListView, haga clic en Configurar ListView.

  5. En el cuadro de diálogo Configurar ListView, seleccione Habilitar edición, Habilitar inserción, Habilitar eliminación y Habilitar paginación.

  6. Haga clic en Aceptar.

  7. Guarde la página.

Agregar un control DropDownList para filtrar datos

Puede filtrar los datos que se muestran en el control ListView creando una lista desplegable que permite seleccionar las tareas que se mostrarán. En este ejemplo, se creará una lista que muestra todas las tareas activas o las tareas que se han completado.

Puede colocar el código en el control ListView para generar automáticamente una cláusula Where que muestre sólo los registros que coincidan con la selección realizada en el control DropDownList.

Para agregar un control para filtrar datos

  1. Abra o cambie a la página Default.aspx, y cambie a la vista Código fuente.

  2. Dentro del elemento form y encima del control ListView, agregue el marcado siguiente:

    <span id="filter">
  Current List Filter: 
  <asp:DropDownList ID="DropDownList1" 
    AutoPostBack="true" 
    >
  <asp:ListItem Text="Active" Value="False" />
  <asp:ListItem Text="Completed" Value="True" />
  </asp:DropDownList>
</span>
<hr id="separator" />

  3. En el control LinqDataSource, establezca la propiedad AutoGenerateWhereClause en true, como se muestra en el ejemplo siguiente:

    <asp:LinqDataSource ID="LinqDataSource1"  
  ContextTypeName="TasksDataContext" 
  TableName="TasksLists" 
  EnableDelete="True" 
  EnableInsert="True" 
  EnableUpdate="True" 
  AutoGenerateWhereClause="true" >

  4. Agregue el marcado siguiente para los parámetros Where entre las etiquetas de apertura y cierre del control LinqDataSource.

    <WhereParameters>
  <asp:ControlParameter 
    Name="isComplete" 
    ControlID="DropDownList1" 
    Type="Boolean" />
</WhereParameters>

  5. Guarde la página.

Ahora puede probar la página para asegurarse de que muestra los datos seleccionados.

Para probar la página

  1. Presione CTRL+F5 para mostrar la página en el explorador.

  2. En la lista desplegable, seleccione Completado.

    Si tiene tareas marcadas como completas, sólo verá esas tareas.

Agregar funcionalidad AJAX a la página

En esta sección se agregará un control ScriptManager a la página para habilitar las características AJAX de ASP.NET. A continuación, se agregará un control UpdatePanel a la página que permite realizar las tareas del control ListView sin una devolución de datos de la página completa.

Agregar un control ScriptManager

Para utilizar las características AJAX de ASP.NET, como el control UpdatePanel, debe agregar un control ScriptManager a la página.

Para agregar un control ScriptManager a la página

  1. Abra o cambie a la página Default.aspx, y cambie a la vista Código fuente.

  2. En la ficha Extensiones AJAX del cuadro de herramientas, haga doble clic en el control ScriptManager y para agregarlo a la página dentro del elemento form.

Colocar el control ListView en un control UpdatePanel

En este ejemplo, el control ListView se colocará dentro de un control UpdatePanel. Los cambios realizados al control ListView no requerirán una devolución de datos completa.

Para colocar el control ListView dentro de un control UpdatePanel

  1. En la página Default.aspx, agregue directamente el marcado siguiente después de la etiqueta de apertura <form>:

    <asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>

  2. Agregue directamente el código siguiente antes de la etiqueta de cierre </form>:

    </ContentTemplate>
</asp:UpdatePanel>

    Este código coloca un control UpdatePanel alrededor de los controles ListView y DropDownList.

  3. Guarde la página.

Ahora ya puede probar de nuevo la página.

Para probar la página

  • Presione CTRL+F5 para ver la página en un explorador.

    Observe que al seleccionar Activo o Completado en el filtro de lista, no se produce devolución de datos completa y ListView muestra la lista actualizada de datos sin parpadeo.

Pasos siguientes

En este tutorial se ha mostrado cómo agregar un control ListView a una página con un control LinqDataSource para agregar, modificar y eliminar las tareas de una base de datos. A continuación, se agregó funcionalidad AJAX utilizando el control UpdatePanel.

Puede encontrar más información sobre cómo trabajar con bases de datos en tutoriales como Tutorial: Enlace de datos a un objeto comercial personalizado y Tutorial: Crear páginas Web principal-detalle en Visual Studio.

Vea también

Conceptos

Información general sobre el control de servidor web LinqDataSource

Información general sobre AJAX en ASP.NET

Información general sobre la representación parcial de páginas