Tutorial: Enlace de datos en páginas Web con un componente de datos de Visual Studio

Actualización: noviembre 2007

Muchas aplicaciones Web se generan utilizando varios niveles, con uno o más componentes en el nivel intermedio que combinan el acceso a datos con la lógica empresarial. En este tutorial se muestra cómo crear un componente de acceso a datos en un sitio Web y enlazar un control de servidor Web (un control GridView) a los datos que el componente administra. El componente de datos interactúa con una base de datos de Microsoft SQL Server y los dos pueden leer y escribir datos.

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

• Crear un componente que puede leer y escribir datos.

• Hacer referencia al componente de datos como un origen de datos en una página Web.

• Enlazar un control a los datos que son devueltos por el componente de datos.

• Leer y escribir datos mediante el componente de datos.

Requisitos previos

Para poder completar este tutorial, necesitará lo siguiente:

• Acceso a la base de datos de SQL Server Northwind. Para obtener información sobre cómo descargar e instalar la base de datos de ejemplo Northwind de SQL Server, vea Installing Sample Databases en el sitio Web de Microsoft SQL Server.

  Nota:
  Si necesita información sobre cómo iniciar sesión en el equipo en el que se ejecuta SQL Server, póngase en contacto con el administrador del servidor.

• Microsoft Data Access Components (MDAC) versión 2.7 o posterior.

  Si utiliza Microsoft Windows XP o Windows Server 2003, ya dispone de MDAC 2.7. Sin embargo, si utiliza Microsoft Windows 2000, quizás tenga que actualizar la versión de MDAC instalada en el equipo. Para descargar la actual versión de MDAC, vea el Centro para desarrolladores de acceso a datos y almacenamiento.

Crear el sitio Web

Si ya ha creado un sitio Web en Visual Web Developer siguiendo las instrucciones que aparecen en Tutorial: Crear una página Web básica en Visual Web Developer, puede utilizar ese sitio Web e ir a la sección siguiente. De lo contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.

Para crear un sitio Web del sistema de archivos

1. Abra Visual Web Developer.

2. En el menú Archivo, haga clic en Nuevositio Web.

   Aparece el cuadro de diálogo Nuevo sitio Web.

3. En Plantillas instaladas de Visual Studio, haga clic en Servicio Web ASP.NET.

4. En la lista Ubicación situada a la izquierda, haga clic en Sistema de archivos y, en el cuadro de texto Ubicación situado a la derecha, escriba el nombre de la carpeta donde desea guardar las páginas del sitio Web.

   Por ejemplo, escriba el nombre de carpeta C:\WebSites\ComponentSample.

5. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.

6. Haga clic en Aceptar.

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

Crear un componente de acceso a datos

En este tutorial, utilizará un asistente para generar un componente que lee y escribe datos de la base de datos Northwind. El componente incluye un archivo de esquema (.xsd) que describe los datos deseados y los métodos que se utilizarán para leer y escribir datos. No tendrá que escribir código. En tiempo de ejecución, el archivo .xsd se compila en un ensamblado que realiza las tareas que se especifican en el asistente.

Para crear un componente de acceso a datos

1. Si el Sitio Web aún no tiene una carpeta App_Code, haga lo siguiente:

   1. En el Explorador de soluciones, haga clic con el botón secundario del mouse (ratón) en el nombre del sitio Web.

   2. Seleccione Agregar carpeta y, a continuación, haga clic en Carpeta 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.

   Aparecerá el cuadro de diálogo Agregar nuevo elemento.

3. En Plantillas instaladas de Visual Studio, haga clic en Conjunto de datos.

4. En el cuadro Nombre, escriba EmployeesObject y haga clic en Agregar.

   Aparece el Asistente para la configuración de TableAdapter.

5. Haga clic en Nueva conexión.

6. Si aparece el cuadro de diálogo Elegir origen de datos, seleccione Microsoft SQL Server y haga clic en Continuar.

7. En el cuadro Nombre de servidor, escriba el nombre del equipo que está ejecutando SQL Server.

8. Para las credenciales de inicio de sesión, seleccione la opción apropiada para tener acceso a la base de datos de SQL Server (seguridad integrada o un identificador y contraseña específicos) y, si es necesario, escriba un nombre de usuario y contraseña.

   • Si especifica credenciales explícitas, active la casilla de verificación Guardar mi contraseña.

9. Haga clic en Seleccionar o escribir nombre de base de datos y escriba Northwind.

10. Haga clic en Probar conexión y, cuando esté seguro de que la conexión funciona, haga clic en Aceptar.

    Aparece el Asistente para la configuración de TableAdapter con la información de conexión rellenada.

11. Haga clic en Siguiente.

    Aparece una página donde se puede almacenar, si se desea, la cadena de conexión en el archivo de configuración.

12. Active la casilla de verificación Sí, guardar esta conexión como y haga clic en Siguiente.

    Puede dejar el nombre predeterminado de la cadena de conexión.

    Aparece una página donde puede elegir entre utilizar instrucciones SQL o procedimientos almacenados.

13. Seleccione Usar instrucciones SQL y, a continuación, haga clic en Siguiente.

    Utilizar procedimientos almacenados tiene algunas ventajas, entre las que se incluyen el rendimiento y seguridad. Sin embargo, para la simplicidad en este tutorial, utilizará una instrucción SQL.

    Aparece una página donde puede definir la instrucción SQL.

14. En ¿Qué datos debe cargar en la tabla?, escriba la instrucción SQL siguiente:

    SELECT EmployeeID, LastName, FirstName, HireDate FROM Employees
    

    Nota:
    Puede hacer clic en Generador de consultas para utilizar una herramienta de generación si prefiere.

15. Haga clic en Siguiente.

    Aparece una página donde puede definir los métodos que el componente expondrá.

16. Haga clic para desactivar la casilla de verificación Rellenar un DataTable y, a continuación, active las casillas de verificación Devolver un DataTable y Crear métodos para enviar actualizaciones directamente a la base de datos.

    No necesita que un método rellene una tabla de datos para este tutorial. Sin embargo, necesitará un método que devuelva los datos y también puede ser conveniente que el componente contenga métodos que actualicen la base de datos.

17. En el cuadro Nombre de método, escriba GetEmployees.

    Está denominando el método que se utilizará después para obtener los datos.

18. Haga clic en Finalizar.

    El asistente configura el componente y lo presenta en el diseñador de componentes, junto con los datos que el componente administra y los métodos que expone.

19. Guarde el componente de datos y, a continuación, cierre el diseñador de componentes.

20. En el menú Generar, haga clic en Generar sitio Web para asegurarse de que el componente se compila correctamente.

Utilizar el componente de datos en una página

Ahora puede utilizar el componente de datos como un origen de datos en una página Web ASP.NET. Para tener acceso al componente de datos, utilizará un control ObjectDataSource y lo configurará para llamar a los métodos de acceso a datos expuestos por el componente de datos. A continuación, puede agregar controles a la página y enlazarlos al control de origen de datos.

Para agregar un control de origen de datos a la página

1. Abra la página Default.aspx y cambie a la vista Diseño.

2. Arrastre un control ObjectDataSource desde el grupo Datos del Cuadro de herramientas hasta la página.

   • Si el menú contextual Tareas de ObjectDataSource no aparece, haga clic con el botón secundario del mouse en el control ObjectDataSource y haga clic en Mostrar etiqueta inteligente.

3. En el menú Tareas de ObjectDataSource, haga clic en Configurar origen de datos.

   Aparecerá el Asistente para la configuración del origen de datos.

4. En la lista Elegir el objeto comercial, haga clic en EmployeesObjectTableAdapters.EmployeesTableAdapter.

   Éste es el nombre de tipo (espacio de nombres y nombre de clase) del componente que creó en la sección anterior.

5. Haga clic en Siguiente.

6. En la ficha Seleccionar, en la lista Elija un método, haga clic en GetEmployees(), devuelve EmployeesDataTable.

   GetEmployees es un método que se definió en el componente que creó en la sección anterior. Devuelve los resultados de la instrucción SQL, disponibles en un objeto DataTable al que se pueden enlazar los controles de datos.

7. Haga clic en Finalizar.

Ahora puede agregar los controles de datos a la página y enlazarlos al control ObjectDataSource. En este tutorial, trabajará con el control GridView.

Para agregar un control GridView a la página y enlazarlo a los datos

1. Arrastre un control GridView desde el grupo Datos del Cuadro de herramientas hasta la página.

   • Si el menú contextual Tareas de GridView no aparece, haga clic con el botón secundario del mouse en el control GridView y haga clic en Mostrar etiqueta inteligente.

2. En el menú contextual Tareas de GridView, en la lista Elegir origen de datos, haga clic en ObjectDataSource1, que es el identificador del control que configuró en la sección anterior.

   El control GridView vuelve a aparecer con una columna para cada columna de datos devuelta por la instrucción SQL.

3. En Propiedades, compruebe que DataKeyNames está establecido en EmployeeID.

Probar la página

Ahora que todos los controles que necesita están en la página, puede probarla.

Para probar la página

1. Presione CTRL+F5 para ejecutar la página.

2. Confirme que las columnas EmployeeID, LastName, FirstName e HireDate de la tabla Employees se muestran en la cuadrícula.

3. Cierre el explorador.

El control GridView solicita los datos del control ObjectDataSource. A su vez, el control ObjectDataSource crea una instancia del componente de datos y llama al método GetEmployees del componente de datos. El método GetEmployees devuelve un objeto DataTable que el control ObjectDataSource devuelve al control GridView.

Agregar actualizaciones a la página

El componente de datos que creó incluye instrucciones SQL para actualizar la base de datos (actualización, inserción y eliminación de registros). Los medios de actualización del componente de datos se exponen mediante métodos que se generaron automáticamente cuando el asistente creó el componente. Los controles GridView y ObjectDataSource pueden interactuar para iniciar automáticamente los métodos de actualización.

Nota:
El control GridView no admite la función de inserción.

Para habilitar actualizaciones y eliminaciones

1. Haga clic con el botón secundario del mouse en el control GridView y, a continuación, seleccione Mostrar etiqueta inteligente.

2. Active la casilla de verificación Habilitar edición.

3. Active la casilla de verificación Habilitar eliminación.

   Nota:
   Habilitar la eliminación permite quitar permanentemente registros de la base de datos. No habilite la eliminación a menos que esté trabajando con datos experimentales sin importancia.

Probar las actualizaciones

Ahora puede hacer pruebas a fin de asegurarse de que puede utilizar el componente para actualizar la base de datos.

Para probar las actualizaciones

1. Presione CTRL+F5 para ejecutar la página.

   Esta vez, el control GridView presenta vínculos Editar y Eliminar en cada fila.

2. Haga clic en el vínculo Editar que está junto a una fila.

3. Realice un cambio en la fila y, a continuación, haga clic en Actualizar.

   La cuadrícula se vuelve a mostrar con la fecha actualizada.

4. Haga clic en un vínculo Eliminar de una fila.

   La fila se elimina permanentemente de la base de datos. La cuadrícula se vuelve a mostrar sin esa fila.

5. Cierre el explorador.

Pasos siguientes

Este tutorial muestra cómo trabajar con un componente de datos. Quizás desee probar otras características de exploración. Por ejemplo, puede hacer lo siguiente:

• Crear un componente de datos personalizado en lugar de utilizar el asistente.

  Para obtener un ejemplo, vea Tutorial: Enlace de datos a un objeto comercial personalizado.

• Restringir qué usuarios pueden cambiar datos. Un método típico es agregar pertenencias y funciones al sitio Web y, después, establecer reglas que el componente comercial pueda comprobar antes de permitir cambios en los datos.

• Para obtener información detallada, vea Tutorial: Crear un sitio web con pertenencia e inicio de sesión de usuarios y Tutorial: Administrar los usuarios de sitios Web con funciones.

Vea también

Tareas

Tutorial: Utilizar código compartido en sitios Web en Visual Web Developer

Tutorial: Crear una página Web básica en Visual Web Developer

Conceptos

Información general sobre los controles de origen de datos

Utilizar parámetros con controles de origen de datos