Tutorial: Mostrar datos mediante un procedimiento almacenado en el control de servidor Web GridView

Actualización: noviembre 2007

En este tutorial se describe la forma de mostrar los datos del control GridView utilizando un procedimiento almacenado. Un procedimiento almacenado es una consulta SQL almacenada en una base de datos de Microsoft SQL Server, en vez de en el código de la aplicación. Los procedimientos almacenados son más seguros que el código de consulta y a menudo su ejecución es más rápida. En este tutorial, creará un control SqlDataSource que recupera los resultados de un procedimiento almacenado. El control SqlDataSource actúa como origen de datos para un control GridView. El control GridView lee los resultados generados por el procedimiento almacenado, y crea filas y tablas para mostrar los datos.

Durante este tutorial aprenderá a:

• Conectar a una base de datos de SQL Server en Visual Web Developer.

• Utilizar el control SqlDataSource para administrar el acceso y el enlace de datos.

• Agregar un procedimiento almacenado para devolver los datos que se van a mostrar en el control GridView.

• Mostrar los datos devueltos del procedimiento almacenado en el control GridView.

Requisitos previos

Para poder completar este tutorial, necesitará:

• Visual Studio 2008 o Visual Web Developer 2008 Express.

  Nota:
  Visual Web Developer 2005 Express no admite la característica Agregar nuevo procedimiento almacenado que se utiliza en este tutorial.

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

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

  Si utiliza Microsoft Windows XP o Windows Server 2003, ya tiene MDAC 2.7. Sin embargo, si utiliza el sistema operativo Microsoft Windows 2000, quizá tenga que actualizar la versión de MDAC instalada en el equipo. Para obtener más información, vea Microsoft Data Access Components (MDAC) Installation en el sitio web de MSDN.

• 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 Instalar bases de datos de ejemplo de Express Edition en el sitio web de Microsoft SQL Server.

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

Crear un sitio Web

Cree un sitio y una página Web nuevos siguiendo estos pasos.

Para crear un sitio Web de sistema de archivos

1. Abra Visual Web Developer.

2. En el menú Archivo, haga clic en Nuevo y, a continuación, haga clic en Sitio Web. Si usa Visual Web Developer Express, en el menú Archivo, haga clic en Nuevo sitio web.

   Aparece el cuadro de diálogo Nuevo sitio Web.

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

4. En el primer cuadro Ubicación, seleccione Sistema de archivos y, en el segundo, escriba el nombre de la carpeta en la que desea conservar las páginas de su sitio Web.

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

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 Express crea la carpeta y una página nueva denominada Default.aspx.

Agregar un procedimiento almacenado para devolver datos

Para mostrar datos en una página Web de ASP.NET, necesita lo siguiente:

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

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

• Un procedimiento almacenado que devuelva los datos que se desea mostrar.

• Un control de origen de datos en la página, que ejecute el procedimiento almacenado y administre los resultados.

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

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

El primer paso es crear un procedimiento almacenado.

Para crear un procedimiento almacenado para devolver datos

1. En el Explorador de servidores, haga clic con el botón secundario en Conexiones de datos y, a continuación, haga clic en Agregar conexión. Si está utilizando Visual Web Developer Express, utilice el Explorador de bases de datos.

   Se mostrará el cuadro de diálogo Agregar conexión.

   • Si la lista Origen de datos no muestra Microsoft SQL Server (SqlClient), haga clic en Cambiar y, en el cuadro de diálogo Cambiar origen de datos, seleccione Microsoft SQL Server.

   • Si aparece el cuadro de diálogo Elegir origen de datos en lugar del cuadro de diálogo Propiedades de la conexión, en la lista Origen de datos, seleccione el tipo de origen de datos que desea utilizar. En este tutorial, el tipo de origen de datos es Microsoft SQL Server. En la lista Proveedor de datos, haga clic en Proveedor de datos de .NET Framework para servidor SQL Server y, a continuación, haga clic en Continuar.

     Nota:
     Si la ficha Explorador de servidores no está visible en Visual Web Developer, en el menú Ver, haga clic en Explorador de servidores. En Visual Web Developer Express, en el menú Ver, haga clic en Explorador de bases de datos.

2. En el cuadro Agregar conexión, escriba el nombre de su servidor en el cuadro de texto Nombre de servidor.

3. En la sección Conexión con el servidor, seleccione la opción adecuada para tener acceso a la base de datos de SQL Server en ejecución (seguridad integrada o un identificador y contraseña específicos) y, si es necesario, escriba un nombre de usuario y una contraseña.

4. Si ha escrito una contraseña, active la casilla Guardar mi contraseña.

5. En Seleccionar o escribir nombre de base de datos, escriba Northwind.

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

   La nueva conexión se crea y se muestra en Conexiones de datos en Explorador de servidores.

7. En el Explorador de servidores, en Conexiones de datos, expanda la conexión de datos que acaba de crear. Si está utilizando Visual Web Developer Express, utilice el Explorador de bases de datos.

   La conexión de datos se expande para incluir las conexiones secundarias, como Tablas, Vistas y Procedimientos almacenados.

8. Haga clic con el botón secundario en Procedimientos almacenados y, a continuación, haga clic en Agregar nuevo procedimiento almacenado.

   Nota:
   Visual Web Developer 2005 Express no admite la característica Agregar nuevo procedimiento almacenado.

9. Agregue el siguiente código en el nuevo procedimiento almacenado, sobrescribiendo cualquier código que ya exista.

   CREATE PROCEDURE GetEmployees
   AS
       Select EmployeeID, LastName, FirstName from Employees
   RETURN 
   

10. Cierre la ventana y haga clic en Sí para crear el procedimiento almacenado.

    Nota:
    La palabra clave CREATE cambia a ALTER cuando se guarda el procedimiento.

Agregar un control GridView para mostrar datos

Una vez establecida una conexión a un origen de datos, necesita lo siguiente:

• Un control de origen de datos en la página, que ejecute el procedimiento almacenado y administre los resultados.

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

En el procedimiento siguiente, mostrará los datos de un control GridView. El control GridView obtiene los datos del control SqlDataSource.

Puede agregar estos elementos al sitio Web por separado. Sin embargo, resulta más sencillo comenzar visualizando la presentación de los datos con el control GridView y utilizar después los asistentes para crear el control del origen de datos y la conexión. El procedimiento siguiente explica cómo crear los elementos necesarios para mostrar los datos en la página.

Para agregar y configurar un control GridView para mostrar los datos

1. Abra la página Default.aspx o cambie a ella y, a continuación, cambie a la vista Diseño.

2. En el Cuadro de herramientas, arrastre un control GridView desde el grupo Datos hasta la página.

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

   Aparecerá el cuadro de diálogo Asistente para la configuración de orígenes de datos.

4. Seleccione Base de datos y, a continuación, haga clic en Aceptar.

   De este modo se especifica que desea recuperar los datos de una base de datos de SQL Server.

   En el cuadro Especificar un id. para el origen de datos, aparecerá un nombre de control de origen de datos predeterminado (SqlDataSource1). Deje este nombre.

   El asistente Configurar origen de datos - SqlDataSource1 muestra una página en la que se puede seleccionar una conexión.

5. En la lista ¿Qué conexión de datos debería utilizar la aplicación para conectarse a la base de datos? escriba la conexión creada en el procedimiento anterior y después haga clic en Siguiente.

   El asistente muestra una página en la que se puede almacenar la cadena de conexión en un archivo de configuración. Almacenar la cadena de conexión en el archivo de configuración tiene dos ventajas:

   • Es más seguro que almacenarla en la página.

   • Puede utilizar la misma cadena de conexión en varias páginas.

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

   El asistente muestra una página donde puede especificar los datos que desea recuperar de la base de datos.

7. Seleccione la opción Especificar una instrucción SQL o un procedimiento almacenado personalizado y, a continuación, haga clic en Siguiente.

8. En la página Definir instrucciones o procedimientos almacenados personalizados, seleccione Procedimiento almacenado y, a continuación, seleccione el procedimiento almacenado que creó anteriormente (GetEmployees).

9. Haga clic en Siguiente.

10. Haga clic en Consulta de prueba para confirmar que está recuperando los datos que desea.

11. Haga clic en Finalizar.

Agregar un control DetailsView para mostrar datos de un procedimiento almacenado

Puede mostrar los datos de un procedimiento almacenado que toma parámetros. En el procedimiento siguiente, creará un control DetailsView para mostrar un valor calculado para una fila seleccionada de un control GridView. La fila GridView representará un registro del empleado y el control DetailsView mostrará las ventas totales calculadas para el empleado seleccionado.

Necesita lo siguiente:

• Un procedimiento almacenado que tome el identificador del empleado como un parámetro y devuelva un valor.

• Un segundo control de origen de datos en la página, que ejecute el procedimiento almacenado y administre los resultados. Ambos controles de origen de datos representarán las conexiones a la misma base de datos Northwind. Volverá a usar la conexión a la base de datos Northwind de SQL Server que creó previamente en este tutorial.

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

El primer paso es crear el procedimiento almacenado.

Para crear un procedimiento almacenado para devolver los datos que desea mostrar en el control DetailsView

1. En el Explorador de servidores, en Conexiones de datos, expanda la conexión de datos que creó anteriormente. Si está utilizando Visual Web Developer Express, utilice el Explorador de bases de datos para ello.

2. Haga clic con el botón secundario en Procedimientos almacenados y, a continuación, haga clic en Agregar nuevo procedimiento almacenado.

   Nota:
   Visual Web Developer 2005 Express no admite la característica Agregar nuevo procedimiento almacenado.

3. Agregue el siguiente código en el nuevo procedimiento almacenado, sobrescribiendo cualquier código que ya exista.

   CREATE PROCEDURE EmployeeSales
   @Employee int AS
   SELECT   SUM([Order Subtotals].Subtotal) AS Total
   FROM Employees INNER JOIN
       Orders INNER JOIN
       [Order Subtotals] ON Orders.OrderID = [Order Subtotals].OrderID
   ON Employees.EmployeeID = Orders.EmployeeID
   WHERE (Employees.EmployeeID = @Employee)
   

4. Cierre la ventana y haga clic en Sí para crear el procedimiento almacenado.

   Nota:
   La palabra clave CREATE cambia a ALTER cuando se guarda el procedimiento.

Después de haber creado el procedimiento almacenado para proporcionar los datos, necesita lo siguiente:

• Un control de origen de datos en la página, que ejecute el procedimiento almacenado y administre los resultados.

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

En el procedimiento siguiente, mostrará los datos de un control DetailsView. El control DetailsView obtendrá sus datos del control SqlDataSource.

Puede agregar estos elementos al sitio Web por separado. Sin embargo, resulta más sencillo comenzar por ver la presentación de los datos con el control DetailsView y utilizar después los asistentes para crear el control del origen de datos y la conexión. El procedimiento siguiente explica cómo crear los elementos necesarios para mostrar los datos en la página.

El paso siguiente es la selección de la fila habilitada para el control GridView. La fila seleccionada determinará el parámetro EmployeeID que se pasa al procedimiento almacenado.

Para habilitar la selección de la fila para un control GridView

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

2. En el panel Tareas de GridView, active la casilla Habilitar selección.

El paso siguiente es crear un control para mostrar los resultados del procedimiento almacenado.

Para agregar y configurar un control DetailsView para mostrar datos

1. Abra la página Default.aspx o cambie a ella y, a continuación, cambie a la vista Diseño.

2. En el Cuadro de herramientas, arrastre un control DetailsView desde el grupo Datos hasta la página.

3. En el menú Tareas de DetailsView, en la lista Elegir origen de datos, haga clic en Nuevo origen de datos.

   Aparecerá el cuadro de diálogo Asistente para la configuración de orígenes de datos.

4. Seleccione Base de datos y, a continuación, haga clic en Aceptar.

   De este modo se especifica que desea recuperar los datos de una base de datos de SQL Server.

   En el cuadro Especificar un id. para el origen de datos, aparecerá un nombre de control de origen de datos predeterminado (SqlDataSource2). Deje este nombre.

   El asistente Configurar origen de datos - SqlDataSource2 muestra una página en la que se puede seleccionar una conexión.

5. En la lista ¿Qué conexión de datos debería utilizar la aplicación para conectarse a la base de datos? escriba la conexión creada anteriormente y después haga clic en Siguiente.

6. Seleccione la opción Especificar una instrucción SQL o un procedimiento almacenado personalizado y, a continuación, haga clic en Siguiente.

7. En la página Definir instrucciones o procedimientos almacenados personalizados, seleccione Procedimiento almacenado y, a continuación, seleccione el procedimiento almacenado que creó anteriormente (EmployeeSales).

8. Haga clic en Siguiente.

   Se muestra la página Definir parámetros.

9. En la lista Origen del parámetro, seleccione Control.

10. En la lista ControlID, seleccione GridView1.

11. Haga clic en Consulta de prueba para confirmar que está recuperando los datos que desea. En el cuadro de diálogo Editor de valores del parámetro, especifique el valor 1 y, a continuación, haga clic en Aceptar. El valor 1 es el identificador de un empleado en la base de datos. Si la recuperación de datos funciona correctamente, se devuelve un valor como 192107.6000. Este valor podría ser diferente si se han modificado datos en la base de datos.

12. Haga clic en Finalizar.

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 se muestra en el explorador. El control GridView muestra todas las filas de datos de la tabla Employees.

2. Haga clic en el vínculo Seleccionar en una fila de datos del control GridView.

   Un control DetailsView muestra los detalles de la fila seleccionada y los resultados del procedimiento almacenado para calcular las ventas totales del empleado seleccionado.

3. Cierre el explorador.

Pasos siguientes

Este tutorial ha mostrado cómo se puede usar un procedimiento almacenado de SQL Server con un control de origen de datos para mostrar datos en una página Web de ASP.NET. Puede usar los procedimientos almacenados de la misma forma que utiliza cualquier instrucción SQL cuando trabaja con el control SqlDataSource. Además, los procedimientos almacenados pueden tomar parámetros que se pueden asociar a los valores de la página web. Puede interesarle explorar los escenarios siguientes con procedimientos almacenados, que realizan funciones relacionadas con datos mediante instrucciones SQL:

• Tutorial: Crear páginas Web principal-detalle en Visual Studio

• Tutorial: Editar e insertar datos en páginas Web con el control de servidor Web DetailsView

• Tutorial: Mostrar una lista desplegable mientras se edita en el control de servidor Web GridView

• Utilizar parámetros con el control SqlDataSource

Vea también

Tareas

Cómo: Proteger cadenas de conexión al utilizar controles de origen de datos

Tutorial: Mostrar una lista desplegable mientras se edita en el control de servidor Web GridView

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