Tutorial: Acceso a datos básico en páginas Web

Actualización: noviembre 2007

Este tutorial le muestra cómo crear una página simple enlazada a datos mediante controles diseñados especialmente para el acceso a datos.

Durante este tutorial aprenderá a hacer lo siguiente:

• Conectarse a una base de datos de Microsoft SQL Server con la herramienta de desarrollo Web Microsoft Visual Web Developer.

• Utilizar la característica de arrastrar y colocar para crear elementos de acceso a datos que se puedan utilizar en la página sin código.

• Utilizar el control SqlDataSource para administrar el acceso a datos y los enlaces.

• Hacer que se muestren datos con el control GridView.

• Configurar el control GridView para permitir la ordenación y la paginación.

• Crear una consulta filtrada con la que sólo se muestren los registros seleccionados.

Requisitos previos

Para poder completar este tutorial, necesitará lo siguiente:

• Obtener acceso a la base de datos Northwind de SQL Server. 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á tenga que actualizar la versión de MDAC que ya está 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 los pasos descritos 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 Sitio Web de ASP.NET.

4. En el cuadro Ubicación situado en el extremo derecho, escriba el nombre de la carpeta en la que desea conservar las páginas del sitio Web.

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

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.

Agregar un control GridView para mostrar datos

Para que se muestren datos en una página Web ASP.NET, necesita lo siguiente:

• Una conexión con un origen de datos (como, por ejemplo, una base de datos).

  En el procedimiento siguiente creará una conexión a la base de datos Northwind de SQL Server.

• Un control de origen de datos en la página con el que se ejecuten las consultas y se administren los resultados de éstas.

• Un control en la página para mostrar los datos.

  En el procedimiento siguiente se mostrarán los datos en un control GridView. El control GridView obtendrá sus datos del control SqlDataSource.

Puede agregar estos elementos al sitio Web por separado. Sin embargo, para empezar resulta más fácil visualizar la presentación de datos con el control GridView y después utilizar asistentes para crear la conexión y el control del origen de datos. En el siguiente procedimiento se explica cómo crear los tres elementos que necesita para mostrar datos en la página.

Para agregar y configurar un control GridView que permita mostrar datos

1. En Visual Web Developer, cambie a la vista Diseño.

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

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

4. En el menú Tareas de GridView, en la lista Elegir origen de datos, haga clic en <Nuevo origen de datos>.

   Aparece el cuadro de diálogo Configuración de origen de datos.

   

5. Haga clic en Base de datos.

   Así especifica que desea obtener datos de una base de datos que admite instrucciones SQL. Esto incluye a SQL Server y a otras bases de datos compatibles con OLE DB.

   En el cuadro Especificar un id. para el origen de datos aparece un nombre de control de origen de datos predeterminado (SqlDataSource1). Puede dejar ese nombre.

6. Haga clic en Aceptar.

   Aparece el asistente para orígenes de datos, que muestra una página en la que puede elegir una conexión.

   

7. Haga clic en Nueva conexión.

8. En el cuadro de diálogo Elegir origen de datos, en Origen de datos, haga clic en Microsoft SQL Server y, a continuación, haga clic en Continuar.

   Aparecerá el cuadro de diálogo Agregar conexión.

9. En el cuadro Nombre de servidor, escriba el nombre del servidor SQL Server que desea utilizar.

   

10. Por lo que respecta a las credenciales de inicio de sesión, seleccione la opción que resulte apropiada para el acceso a la base de datos de SQL Server (seguridad integrada o id. y contraseña específicos) y, si es necesario, especifique un nombre de usuario y una contraseña.

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

12. Haga clic en Probar conexión y, cuando tenga la seguridad de que funciona, haga clic en Aceptar.

    Aparece el asistente Configurar origen de datos - <NombreOrigenDatos> y se rellena la información de la conexión.

13. Haga clic en Siguiente.

    Aparece el asistente, que muestra una página que le permite almacenar la cadena de conexión en el archivo de configuración. Si se almacena la cadena de conexión en el archivo de configuración, se tienen dos ventajas:

    1. Es más seguro que el almacenamiento de la cadena de conexión en la página.

    2. Puede reutilizar la misma cadena de conexión en varias páginas.

14. Asegúrese de que está activada 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, NorthwindConnectionString).

    Aparece el asistente, que muestra una página en la que puede especificar los datos que desea obtener de la base de datos.

15. En Especificar columnas de una tabla o vista, en el cuadro Nombre, haga clic en Customers.

16. Bajo Columnas, active las casillas de verificación CustomerID, CompanyName y City.

    Aparece el asistente, que en un cuadro situado en la parte inferior de la página muestra la instrucción SQL que se está creando.

    

    Nota:
    El asistente le permite especificar criterios de selección (una cláusula WHERE) y otras opciones de la consulta SQL. Para esta parte del tutorial creará una instrucción simple sin opciones de selección ni ordenación.

17. Haga clic en Siguiente.

18. Haga clic en Consulta de prueba para asegurarse de que se obtienen los datos que desea.

19. Haga clic en Finalizar.

    El asistente se cierra y vuelve a mostrarse la página. Al ejecutar el asistente, se han realizado dos tareas:

    • El asistente ha creado y configurado un control SqlDataSource (con el nombre (SqlDataSource1), que incorpora la información de conexión y consulta que especificó.

    • El asistente ha enlazado el control GridView al objeto SqlDataSource. Por consiguiente, el control GridView mostrará datos devueltos por el control SqlDataSource.

    Si ve las propiedades para el control SqlDataSource, podrá observar que el asistente ha creado los valores para las propiedades ConnectionString y SelectQuery.

    Nota:
    Puede cambiar con facilidad la apariencia del control GridView. En la vista Diseño, haga clic con el botón secundario del mouse (ratón) en el control GridView y, a continuación, seleccione Mostrar etiqueta inteligente. En el menú Tareas de GridView, haga clic en Formato automático y, a continuación, aplique un esquema.

Probar la página

Ahora puede ejecutar la página.

Para probar la página

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

   La página aparece en el explorador. El control GridView muestra todas las filas de datos de la tabla Customers.

2. Cierre el explorador.

Agregar ordenación y paginación

Puede agregar posibilidades de ordenación y paginación al control GridView sin escribir código.

Para agregar ordenación y paginación

1. En la vista Diseño, haga clic con el botón secundario del mouse (ratón) en el control GridView y, a continuación, seleccione Mostrar etiqueta inteligente.

2. En el menú contextual Tareas de GridView, active la casilla de verificación Habilitar ordenación.

   Los encabezados de columna del control GridView cambian a vínculos.

3. En el menú contextual Tareas de GridView, active la casilla de verificación Habilitar paginación.

   Se agrega un pie de página al control GridView con vínculos de número de página.

4. También puede utilizar Propiedades para cambiar el valor de la propiedad PageSize de 10 a un tamaño de página menor.

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

   Podrá hacer clic en un encabezado de columna para ordenar los datos por el contenido de esa columna. Si en el origen de datos hay más registros de los que permite el tamaño de página del control GridView, podrá utilizar los vínculos de exploración de páginas situados en la parte superior del control GridView para desplazarse entre las páginas.

6. Cierre el explorador.

Agregar filtrado

A menudo deseará que en la página sólo se muestren datos seleccionados. En esta parte del tutorial modificará la consulta para el control SqlDataSource de manera que los usuarios puedan seleccionar registros de clientes de una ciudad determinada.

En primer lugar, utilizará un control TextBox para crear un cuadro de texto en el que los usuarios puedan escribir el nombre de una ciudad. A continuación, cambiará la consulta para incluir un filtro parametrizado (cláusula WHERE). Como parte de ese proceso, creará un elemento de parámetro para el control SqlDataSource. El elemento de parámetro establece cómo obtendrá el control SqlDataSource el valor para su consulta parametrizada; concretamente, del cuadro de texto.

Cuando finalice esta parte del tutorial, la página podría tener una apariencia similar a la siguiente en la vista Diseño.

Para agregar el cuadro de texto que permite especificar una ciudad

1. Desde el grupo Estándar del Cuadro de herramientas, arrastre a la página un control TextBox y un control Button.

   El control Button sólo se utiliza para devolver la página al servidor. En este caso no tendrá que escribir código.

2. En Propiedades, para el control TextBox, establezca ID como textCity.

3. Si lo desea, escriba Ciudad o un texto similar delante del cuadro de texto, como título.

4. En Propiedades para el control Button, establezca Text como Enviar.

Ahora puede modificar la consulta para que incluya un filtro.

Para modificar la consulta con un filtro parametrizado

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

2. En el menú Tareas de SqlDataSource, haga clic en Configurar origen de datos.

   Aparecerá el asistente Configurar origen de datos - <nombreDelOrigenDeDatos>.

3. Haga clic en Siguiente.

   El asistente muestra el comando SQL configurado actualmente para el control SqlDataSource.

4. Haga clic en WHERE.

   Aparecerá la página Agregar cláusula WHERE.

5. En la lista Columna, haga clic en Ciudad.

6. En la lista Operador, haga clic en =.

7. En la lista Origen, haga clic en Control.

8. En Propiedades del parámetro, en la lista Id. de control, haga clic en textCity.

   

   En los cinco pasos anteriores se especifica que con la consulta se obtendrá el valor de búsqueda de Ciudad del control TextBox que agregó en el procedimiento anterior.

9. Haga clic en Agregar.

   La cláusula WHERE que ha creado aparece en un cuadro en la parte inferior de la página.

10. Haga clic en Aceptar para cerrar la página Agregar cláusula WHERE.

11. En el asistente Configurar origen de datos - <nombreDelOrigenDeDatos>, haga clic en Siguiente.

12. En la página Consulta de prueba, haga clic en Consulta de prueba.

    Aparece el asistente, con la página Editor de valores del parámetro, en la que se solicita un valor para utilizarlo en la cláusula WHERE.

13. En el cuadro Valor, escriba Londres y, a continuación, haga clic en Aceptar.

    Aparecen los registros de los clientes de Londres.

14. Haga clic en Finalizar para cerrar el asistente.

Ahora puede probar el filtrado.

Para probar el filtrado

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

2. En el cuadro de texto, escriba Londres y, a continuación, haga clic en Enviar.

   Aparece una lista de clientes de la ciudad de Londres en el control GridView.

3. Pruebe con otras ciudades, como Buenos Aires y Berlín.

Pasos siguientes

El acceso a datos constituye un aspecto importante en muchas aplicaciones Web, y en este tutorial sólo se da una ligera idea de lo que se puede hacer con los datos en las páginas Web. Quizás desee probar otras características relacionadas con el acceso a datos. Por ejemplo, puede hacer lo siguiente:

• Trabajar con Microsoft Access en lugar de con SQL Server. (No se puede utilizar dependencia de caché de SQL con Access).

  Para obtener información detallada, vea Tutorial: Crear una página web para mostrar datos de una base de datos de Access.

• Editar e insertar registros.

  Para obtener información detallada, vea Tutorial: Editar e insertar datos en páginas Web con el control de servidor Web DetailsView.

• Trabajar con registros que tienen una relación de principal-detalle.

  Para obtener información detallada, vea Tutorial: Crear páginas Web principal-detalle en Visual Studio.

• Crear un componente de nivel medio (comercial) que se encargue del acceso a datos y, a continuación, utilizar ese recurso como origen de datos en una página.

  Para obtener información detallada, vea Tutorial: Enlace de datos a un objeto comercial personalizado.

Vea también

Conceptos

Información general sobre los controles de origen de datos