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

Actualización: noviembre 2007

Microsoft Visual Web Developer permite crear formularios de entrada de datos para actualizar registros e insertar otros nuevos en una base de datos con sólo unas pocas líneas de código. Utilizando una combinación de control de origen de datos que encapsula el acceso a datos y controles DetailsView y GridView que muestran los registros en un formato modificable, se puede crear una página de entrada de datos que permite a los usuarios editar registros o insertar otros nuevos sin escribir nada de código.

Durante este tutorial aprenderá a:

• Crear una página de entrada de datos.

• Configurar un control de origen de datos con la información necesaria para realizar actualizaciones e inserciones en la base de datos.

• Utilizar el control DetailsView para ver registros individuales, cambiarlos e insertar otros nuevos.

• Utilizar un control GridView para habilitar la modificación de la base de datos desde la página de entrada de datos.

Requisitos previos

Para poder completar este tutorial, necesitará:

• Visual Web Developer.

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

  Si utiliza los sistemas operativos Microsoft Windows XP o Windows Server 2003, ya tiene MDAC 2.7. Sin embargo, si utiliza el sistema operativo Microsoft Windows 2000 Server, quizá 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.

• 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.

• Permiso para modificar datos en la base de datos Northwind de ejemplo.

Crear el sitio y la página Web

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

Para crear un nuevo sitio Web del 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 Servicio Web ASP.NET.

4. En el cuadro Ubicación, seleccione Sistema de archivos y escriba el nombre de la carpeta donde desee guardar las páginas del sitio Web.

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

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

   El lenguaje de programación que elija será el lenguaje predeterminado de su sitio Web, sin embargo, también puede establecer el lenguaje de programación en cada página de forma individual.

6. Haga clic en Aceptar.

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

Conectar a SQL Server

El paso siguiente es establecer una conexión a la base de datos de SQL Server.

Para crear una conexión a una base de datos de SQL Server

1. En el Explorador de servidores, haga clic con el botón secundario del mouse (ratón) en Conexiones de datos y, a continuación, seleccione 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 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 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, después, 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 está visible en Visual Web Developer Express, en el menú Ver haga clic en Explorador de base de datos.

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

3. En la sección Conexión con el servidor, seleccione la opción apropiada 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 contraseña. Active la casilla de verificación Guardar mi contraseña si ha escrito una contraseña.

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

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.

Crear la página de entrada de datos

En esta sección, creará una página de entrada de datos y configurará un control DetailsView a fin de ver los datos de empleados almacenados en la tabla Employees de la base de datos Northwind. Para controlar el acceso a datos en la página, configurará un control de origen de datos de SQL.

Para crear una página de entrada de datos y configurar un control DetailsView

1. En el menú Sitio Web, haga clic en Agregar nuevo elemento.

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

2. En Plantillas instaladas de VisualStudio, haga clic en Web Forms y, a continuación, en el cuadro Nombre escriba EditEmployees.aspx.

3. Haga clic en Agregar.

4. Abra la página EditEmployees.aspx.

5. Cambie a la vista Diseño.

6. Escriba Edit Employees, seleccione el texto y, a continuación, dé formato al texto como un encabezado.

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

8. Haga clic con el botón secundario del mouse en el control DetailsView, haga clic en Propiedades y, a continuación, establezca AllowPaging en true.

   Esto le permitirá recorrer entradas de empleados individuales cuando se muestren.

El paso siguiente es crear y configurar un control de origen de datos que se puede utilizar para consultar la base de datos. Existen varias maneras de crear un control de origen de datos, entre las que se incluye arrastrar elementos de datos desde el Explorador de servidores o el Explorador de base de datos hasta la página. En este tutorial, comenzará con el control DetailsView y configurará el control de origen de datos desde allí.

Para configurar un control de origen de datos

1. Haga clic con el botón secundario del mouse en el control DetailsView y seleccione Mostrar etiqueta inteligente.

2. En el menú Tareas de DetailsView, en el cuadro Elegir origen de datos, haga clic en <Nuevo origen de datos>.

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

3. En Seleccionar un tipo de origen de datos, haga clic en Base de datos.

4. Deje el nombre predeterminado de SqlDataSource1 y, a continuación, haga clic en Aceptar.

   El Asistente para la configuración del origen de datos muestra la página Elegir una conexión.

5. 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 la sección "Para crear una conexión a una base de datos de SQL Server" y, a continuación, haga clic en Siguiente.

   El asistente muestra una página donde se puede almacenar la cadena de conexión, si se desea, en un archivo de configuración. Si se almacena la cadena de conexión en el archivo de configuración, se obtienen dos ventajas:

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

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

6. Active la casilla de verificación 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. 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 Employees.

8. En Columnas, active las casillas de verificación EmployeeID, LastName, FirstName e HireDate y, a continuación, haga clic en Siguiente.

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

Ahora puede probar la página de presentación de registros de empleados.

Para probar la presentación de registros de empleados

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

   El primer registro de empleado se muestra en el control DetailsView.

2. Haga clic en los vínculos de número de página para ver registros de empleados adicionales.

3. Cierre el explorador.

Permitir la edición en un control GridView

En este momento, puede ver registros de empleados, pero no puede editarlos. En esta sección, agregará un control GridView y lo configurará para poder editar registros individuales.

Nota:
El control GridView presenta una lista de registros y le permite editarlos. Sin embargo, no le permite insertarlos. Más adelante en este tutorial, utilizará el control DetailsView, que le permite agregar nuevos registros.

Para admitir la edición, debe configurar el control de origen de datos que creó anteriormente (SqlDataSource1) con instrucciones SQL que realizan actualizaciones.

Para agregar un control GridView que permita la edición

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

2. Haga clic con el botón secundario del mouse en el control GridView, haga clic en Mostrar etiqueta inteligente y, a continuación, en el menú Tareas de GridView, en el cuadro Elegir origen de datos haga clic en SqlDataSource1.

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

4. Haga clic en Siguiente hasta llegar a la página Configurar la instrucción Select del asistente.

5. En la página Configurar la instrucción Select, haga clic en Avanzadas, active la casilla de verificación 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 basado en la instrucción Select que configuró anteriormente.

   Nota:
   Alternativamente, puede crear manualmente las instrucciones si selecciona Especifique un procedimiento almacenado o una instrucción SQL personalizada y escribe las consultas SQL.

6. Haga clic en Siguiente y, a continuación, en Finalizar.

   El control SqlDataSource ahora se configura con instrucciones SQL adicionales.

   Nota:
   Para examinar las instrucciones generadas por el asistente, seleccione el control SqlDataSource y observe las propiedades DeleteQuery, InsertQuery y UpdateQuery. También puede ver las propiedades actualizadas del control si cambia a la vista Código fuente y examina el formato del control.

7. En el menú Tareas de GridView, active las casillas de verificación Habilitar paginación y Habilitar edición.

   Nota de seguridad:

   Los datos proporcionados por el usuario en una página Web ASP.NET pueden incluir secuencias de comandos del cliente malintencionadas. De manera predeterminada, las páginas Web ASP.NET validan los datos proporcionados por el usuario para asegurarse de que no incluyen 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.

Ahora puede probar la edición de registros de empleados.

Para probar la edición en el control GridView

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

   El control GridView se muestra con los datos en cuadros de texto.

2. Elija una fila en el control GridView y haga clic en Editar.

3. Realice un cambio en el registro y, a continuación, haga clic en Update.

   Los datos actualizados aparecen ahora en los controles GridView y DetailsView.

4. Cierre el explorador.

Permitir la edición, eliminación e inserción con un control DetailsView

El control GridView permite editar registros, pero no permite insertar datos. En esta sección, modificará el control DetailsView para poder ver individualmente los registros, así como eliminar, insertar y actualizar registros.

Para utilizar un control DetailsView para permitir la eliminación, inserción y actualización

1. Haga clic con el botón secundario del mouse en el control DetailsView y seleccione Mostrar etiqueta inteligente.

2. En el menú Tareas de DetailsView, active las casillas de verificación Habilitar inserción, Habilitar edición y Habilitar eliminación.

   Cuando utilizó anteriormente el control DetailsView en el tutorial, las opciones para habilitar la edición, inserción y eliminación no estaban disponibles. La razón es que el control SqlDataSource1 al que está enlazado el control DetailsView no tenía las instrucciones SQL necesarias. Ahora que ha configurado el control de origen de datos para incluir instrucciones de actualización, las opciones de actualización están disponibles en el control DetailsView.

Ahora puede probar la eliminación, inserción y actualización en el control DetailsView.

Para probar la actualización, inserción y eliminación en el control DetailsView

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

   El control DetailsView muestra un registro de empleado.

2. En el control DetailsView, haga clic en Editar.

   El control DetailsView ahora muestra los datos en cuadros de texto.

3. Realice un cambio en el registro y, a continuación, haga clic en Update.

   El registro actualizado se muestra en el control.

4. En el control DetailsView, haga clic en New.

   El control ahora muestra los cuadros de texto en blanco para cada columna.

5. Escriba valores en cada columna.

   La tabla Employees tiene una columna de clave de incremento automático, por lo que el valor de EmployeeID se asigna automáticamente al guardar el registro.

6. Cuando termine, haga clic en Insert.

   El nuevo registro se agrega como el último registro.

   Nota:
   Al insertar un nuevo registro en la tabla Employees en este tutorial, no se generará ningún error. Sin embargo, cuando trabaje con datos de producción, las tablas podrían tener restricciones (por ejemplo, una restricción FOREIGN KEY) que deberá tener en cuenta cuando configure el control DetailsView.

7. Utilice la paginación en el control DetailsView para desplazarse al último registro y, a continuación, haga clic en Eliminar.

   Se quita el nuevo registro.

   Nota:
   Al igual que en la inserción de datos, siempre debe tener en cuenta las restricciones que se aplican a la fila de datos cuando configure un control DetailsView para permitir la eliminación.

Pasos siguientes

Este tutorial ha mostrado los fundamentos de crear una página Web que permite a los usuarios modificar registros de datos. Quizás desee explorar funciones de datos adicionales de las páginas Web ASP.NET. Por ejemplo, puede hacer lo siguiente:

• Trabajar con registros de tablas relacionadas. Para obtener información detallada, vea Tutorial: Crear páginas Web principal-detalle en Visual Studio.

• Utilizar un componente de nivel medio para el acceso a datos. Para obtener información detallada, vea Tutorial: Enlace de datos a un objeto comercial personalizado.

• Utilizar otras maneras de configurar el acceso a datos en una página Web. Para obtener información detallada, vea Tutorial: Acceso a datos básico en páginas Web.

Vea también

Tareas

Tutorial: Crear una página web para mostrar datos de una base de datos de Access

Conceptos

Información general sobre los controles de origen de datos

Establecer enlaces a datos utilizando un control de origen de datos