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

Actualización: noviembre 2007

El control GridView muestra los cuadros de texto para editar de forma predeterminada. Puede utilizar la funcionalidad avanzada integrada del control GridView de ASP.NET para agregar una lista desplegable a la presentación de edición. Esto se puede hacer en un formulario Web Forms sin tener que escribir código detrás del formulario. Entre las tareas ilustradas en este tutorial se incluyen las siguientes:

• Configurar un control GridView para mostrar datos SQL.

• Mostrar los datos del control GridView.

• Mostrar una lista desplegable mientras se edita en el control GridView.

Requisitos previos

Para poder completar este tutorial, necesitará:

• Microsoft Visual Web Developer (Visual Studio).

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

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

  Nota:
  Hay muchos métodos alternativos para conectarse a la base de datos Northwind.

Crear el sitio y la página 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 utiliza Visual Web Developer Express, 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 ASP.NET.

4. En el cuadro Ubicación, seleccione Sistema de archivos y 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\DropDownEdit.

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 una conexión a un origen de datos SQL

Para comenzar, debe crear una conexión con la base de datos de ejemplo Northwind.

Para crear una conexión a SQL Server

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 utiliza Visual Web Developer Express, use el Explorador de base de datos.

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

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

   • Si aparece la página Elegir origen de datos, en la lista Origen de datos, seleccione el tipo de origen de datos que va a utilizar. Para 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. Si la ficha Explorador de base de datos no se puede ver, en el menú Ver, haga clic en Explorador de base de datos.

2. En el campo Nombre de archivo de la base de datos, escriba o vaya a la ubicación donde instaló la base de datos de ejemplo Northwind.

3. Seleccione el archivo de base de datos Northwnd.mdf y haga clic en Abrir.

4. Active la casilla Guardar mi contraseña.

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

   La nueva conexión se ha creado bajo Conexiones de datos en el Explorador de servidores.

Configurar un control GridView para mostrar datos de una base de datos

En esta parte del tutorial, rellenará dinámicamente la cuadrícula con datos.

Para habilitar la ordenación simple

1. Abra el archivo Default.aspx o cambie a él.

2. Cambie a la vista Diseño.

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

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

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

5. Haga clic en Base de datos.

   Al hacerlo, especifica que desea obtener los datos de una base de datos que admite instrucciones SQL, lo que incluye SQL Server y otras bases de datos compatibles con OLE-DB.

6. En el cuadro Especificar un id. para el origen de datos, aparece un nombre de control de origen de datos predeterminado, SqlDataSource1. Puede dejar este nombre.

7. Haga clic en Aceptar.

   Se muestra el Asistente para la configuración de orígenes de datos.

8. En el cuadro ¿Qué conexión de datos debería utilizar la aplicación para conectarse a la base de datos?, escriba la conexión que creó en "Para crear una conexión a SQL Server" y, a continuación, 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.

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

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

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

11. En Columnas, active las casillas Id. de empleado, Apellido, Nombre, Fecha de contratación y Ciudad.

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

    Nota:
    El asistente permite especificar criterios de selección (cláusulas WHERE) y otras opciones de consulta de SQL. En este tutorial, creará una instrucción sencilla sin opciones de selección u ordenación.

12. Haga clic en Avanzadas, active la casilla Generar instrucciones Insert, Update y Delete y, a continuación, haga clic en Aceptar.

    Esto genera instrucciones Insert, Update y Delete para el control SqlDataSource1 en función de la instrucción Select que configuró anteriormente.

    Nota:
    Si lo prefiere, puede crear manualmente las instrucciones seleccionando Especificar una instrucción SQL o un procedimiento almacenado personalizado y escribiendo las consultas SQL.

13. Haga clic en Siguiente.

14. Haga clic en Consulta de prueba para asegurarse de que recupera los datos que desea.

15. Haga clic en Finalizar.

16. Haga clic con el botón secundario en el control GridView y seleccione Mostrar etiqueta inteligente. En el menú Tareas de GridView, seleccione el cuadro Habilitar edición.

Ya puede probar la página.

Para probar la página

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

   Se muestra el control GridView con las columnas Id. de empleado, Apellido, Nombre, Fecha de contratación y Ciudad.

2. Haga clic en el vínculo Editar situado junto a una fila.

   La fila seleccionada para la edición se muestra con las columnas Apellido, Nombre, Fecha de contratación y Ciudad como cuadros de texto modificables. Id. de empleado no se muestra en un cuadro de texto, porque es un campo clave y no modificable.

3. Cambie un campo como LastName y haga clic en Actualizar.

   Se muestra el control GridView con las columnas Id. de empleado, Apellido, Nombre, Fecha de contratación y Ciudad, con Apellido actualizado con el nuevo valor.

4. Cierre el explorador.

Mostrar una lista desplegable mientras se edita en el control GridView

En esta parte del tutorial, puede agregar una lista desplegable para realizar selecciones mientras se editan las filas de la cuadrícula.

Para mostrar una lista desplegable mientras se edita

1. Desde el nodo Datos del Cuadro de herramientas, arrastre un control SqlDataSource hasta la página.

   Se crea un nuevo control de origen de datos denominado SqlDataSource2.

2. En el menú Tareas de SqlDataSource, seleccione Configurar origen de datos.

3. En el cuadro ¿Qué conexión de datos debería utilizar la aplicación para conectarse a la base de datos?, escriba la conexión que creó anteriormente.

4. Haga clic en Siguiente.

5. En la página Configurar la instrucción Select, seleccione Especificar columnas de una tabla o vista y, a continuación, en el cuadro Nombre, haga clic en Empleados.

6. Seleccione sólo la columna Ciudad y, a continuación, active la casilla Devolver sólo filas únicas. Haga clic en Siguiente.

7. Haga clic en Consulta de prueba para obtener una vista previa de los datos y, a continuación, haga clic en Finalizar.

8. Haga clic con el botón secundario en el control GridView y seleccione Mostrar etiqueta inteligente. En el menú Tareas de GridView, seleccione Editar columnas.

9. En el cuadro de diálogo Campos, seleccione Ciudad en la lista Campos seleccionados.

10. Haga clic en el vínculo Convertir este informe en TemplateField.

11. Haga clic en Aceptar para cerrar el cuadro de diálogo Campos.

12. Haga clic con el botón secundario en el control GridView y seleccione Mostrar etiqueta inteligente. En el menú Tareas de GridView, seleccione Editar plantillas.

13. Seleccione EditItemTemplate en la lista desplegable Mostrar.

14. Haga clic con el botón secundario en el control TextBox predeterminado de la plantilla y seleccione Eliminar para quitarlo.

15. Desde la ficha Estándar del Cuadro de herramientas, arrastre un control DropDownList hasta la plantilla.

16. Haga clic con el botón secundario en el control DropDownList y seleccione Mostrar etiqueta inteligente. En el menú Tareas de DropDownList, seleccione Elegirorigen de datos.

17. Seleccione SqlDataSource2.

18. Haga clic en Aceptar.

19. En el menú Tareas de DropDownList, seleccione Editar DataBinding. La propiedad SelectedValue del control DropDownList está seleccionada en el cuadro de diálogo Enlace de datos.

20. Haga clic en el botón de opción Enlace de campos y seleccione Ciudad en Enlazado con.

21. Active la casilla enlace de datos bidireccional.

22. Haga clic en Aceptar.

23. Haga clic con el botón secundario en el control GridView y seleccione Mostrar etiqueta inteligente. En el menú Tareas de GridView, seleccione Terminar edición de plantilla.

    Nota de seguridad:

    Los datos proporcionados por el usuario en una página Web de ASP.NET pueden incluir secuencias de comandos del cliente malintencionadas. De manera predeterminada, las páginas Web de ASP.NET validan la entrada del usuario para asegurarse de que ésta no incluye elementos HTML o de secuencia de comandos. Siempre que esta validación esté habilitada, no tendrá que comprobar explícitamente si algún usuario está insertando secuencias de comandos o elementos HTML. Para obtener más información, vea Información general sobre los ataques mediante secuencias de comandos.

Ya puede probar la página.

Para probar la página

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

   Se muestra el control GridView con las columnas Id. de empleado, Apellido, Nombre, Fecha de contratación y Ciudad.

2. Haga clic en el vínculo Editar situado junto a una fila.

   El valor de Ciudad actual está preseleccionado en la lista desplegable.

   Seleccione un valor de Ciudad diferente en la lista desplegable y haga clic en Actualizar.

   El campo Ciudad se actualiza con el valor seleccionado en la lista desplegable.

Pasos siguientes

Aunque este tutorial muestra cómo mostrar una lista desplegable rellena con valores de la misma columna que está enlazada al control, hay muchos métodos para rellenar una lista desplegable. Vea el ejemplo DataItem para ver cómo rellenar una lista desplegable con valores de una tabla diferente.

Vea también

Tareas

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

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

Referencia

Información general sobre GridView (Control de servidor Web)

DataItem