Tutorial: Modificar datos con el control de servidor web ListView

Artículo
10/07/2008

Actualización: noviembre 2007

El control ListView de ASP.NET incluye una funcionalidad integrada que permite a los usuarios insertar, editar o eliminar registros sin necesidad de programación.

Este tutorial muestra cómo presentar y actualizar datos con el control ListView. En este tutorial se usa un control SqlDataSource para recuperar los resultados del origen de datos y para administrar las actualizaciones. El control SqlDataSource actúa como origen de datos para el control ListView.

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

Mostrar datos que se devuelven de una base de datos en el control ListView.
Agregar la capacidad para modificar, insertar y eliminar registros en el control ListView.

Requisitos previos

Para poder completar este tutorial, necesitará:

Visual Studio 2008 o Visual Web Developer 2008 Express.
Obtener acceso a la base de datos de AdventureWorks de SQL Server. Para obtener información sobre cómo descargar e instalar la base de datos de ejemplo de AdventureWorks de SQL Server, vea Installing Sample Databases for Express Editions 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.
Un nombre de usuario y una contraseña para una cuenta de SQL Server que tenga acceso a la base de datos AdventureWorks.

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.

Crear el sitio Web

Si ya ha creado un sitio web (por ejemplo, al completar 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 y una página Web nuevos siguiendo estos pasos.

Para crear un sitio Web de sistema de archivos

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

Se muestra el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET.
En el primer cuadro Ubicación, seleccione Sistema de archivos y, en el segundo, escriba el nombre de la carpeta donde desea conservar las páginas del sitio web.

Por ejemplo, escriba el nombre de carpeta C:\WebSites\ModifyData.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que desee trabajar.
Haga clic en Aceptar.

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

Permitir a los usuarios modificar datos con el control ListView

En esta sección, agregará un control ListView a la página y lo configurará para presentar y modificar datos de la tabla Department de la base de datos de AdventureWorks.

Para mostrar y modificar datos en el control ListView

Si el sitio web no tiene una carpeta App_Data, en el Explorador de soluciones, haga clic con el botón secundario en el proyecto, haga clic en Agregar carpeta ASP.NET y, a continuación, en App_Data.
En el Explorador de soluciones, haga clic con el botón secundario en la carpeta App_Data y después haga clic en Agregar elemento existente.

Se mostrará el cuadro de diálogo Agregar elemento existente.

Escriba la ubicación donde se instaló el archivo de base de datos de AdventureWorks (AdventureWorks_Data.mdf).

De forma predeterminada, el archivo .mdf se instala en la ruta de acceso C:\Archivos de programa\Microsoft SQL Server\MSSQL.1\MSSQL\Data\AdventureWorks_Data.mdf.

Nota:
Este procedimiento creará una copia del archivo de base de datos en el proyecto. El archivo de base de datos es grande. Si no resulta práctico realizar una copia de la base de datos, puede conectarse a ella con un método alternativo, como asociar directamente el archivo de base de datos. Sin embargo, el procedimiento para esto no se cubre en este tutorial.

Abra el archivo Default.aspx o cambie a él.
Cambie a la vista Diseño.
En la ficha Datos del Cuadro de herramientas, arrastre un control ListView a la página.
En el menú Tareas de ListViewcomunes, en la lista desplegable Elegirorigen de datos, haga clic en <Nuevo origen de datos…>. En la ilustración siguiente se muestra el menú Tareas deListView comunes.

Aparece el Asistente para configuración de orígenes de datos. En la ilustración siguiente se muestra el asistente para la configuración de orígenes de datos.
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.
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.
Haga clic en Aceptar.

Se muestra el Asistente para la configuración de orígenes de datos.
En la lista ¿Qué conexión de datos debería utilizar la aplicación para conectarse a la base de datos?, seleccione AdventureWorks_Data.mdf .
Haga clic en Siguiente.

El asistente muestra una página donde la cadena de conexión se puede almacenar, si se desea, en el archivo de configuración. Si se almacena la cadena de conexión en el archivo de configuración, se tienen dos ventajas:
- Puede resultar más seguro que almacenarla en la página.
- Puede utilizar la misma cadena de conexión en varias páginas.
Asegúrese de que está activada la casilla Sí, guardar esta conexión como y haga clic en Siguiente. Puede dejar el nombre predeterminado de la cadena de conexión.

Se muestra el asistente para la configuración de orígenes de datos, donde puede especificar los datos que desea recuperar de la base de datos.

Seleccione la opción Especificar una instrucción SQL o un procedimiento almacenado personalizado. En la ilustración siguiente se muestra el asistente para la configuración de orígenes de datos.

Nota:
Normalmente, utilizaría la opción Especificar columnas de una tabla o vista. Sin embargo, dado que la base de datos de AdventureWorks tiene nombres de esquema, en este tutorial creará una instrucción SQL personalizada.

Haga clic en Siguiente.
En la página Definir instrucciones o procedimientos almacenados personalizados, escriba la consulta SQL siguiente para recuperar los datos de departamento de la base de datos de AdventureWorks.
```
SELECT  DepartmentID, Name, GroupName 
FROM    HumanResources.Department
```
También puede hacer clic en el Generador de consultas y utilizar la ventana Generador de consultas para crear una consulta y validarla con el botón Ejecutar consulta.
Haga clic en la ficha UPDATE y, a continuación, escriba la consulta SQL siguiente para actualizar los datos de departamento en la base de datos de AdventureWorks.
```
UPDATE HumanResources.Department 
SET    Name = @Name, GroupName = @GroupName 
WHERE  (DepartmentID = @DepartmentID)
```
Haga clic en la ficha INSERT y escriba la siguiente consulta SQL para insertar datos de departamento en la base de datos de AdventureWorks.
```
INSERT INTO HumanResources.Department(Name, GroupName)
VALUES (@Name, @GroupName)
```
Haga clic en la ficha DELETE y escriba la siguiente consulta SQL para eliminar datos de departamento de la base de datos de AdventureWorks.
```
DELETE FROM HumanResources.Department WHERE (DepartmentID = @DepartmentID)
```
Haga clic en Siguiente.
Haga clic en Consulta de prueba para asegurarse de que recupera los datos que desea.
Haga clic en Finalizar.

El asistente crea un control SqlDataSource y lo agrega a la página. El control ListView que agregó anteriormente se enlaza al control SqlDataSource.
Haga clic con el botón secundario en el control ListView y, a continuación, haga clic en Mostrar etiqueta inteligente.
En el menú Tareas de ListView, haga clic en Configurar ListView.

Se muestra el cuadro de diálogo Configurar ListView.

En Opciones, active las casillas Habilitar edición, Habilitar inserción y Habilitar eliminación. En la ilustración siguiente se muestra el cuadro de diálogo Configurar ListView.

Nota:
También puede seleccionar un estilo diferente, lo que puede hacer que resulte más sencillo ver los datos. Para ello, en Seleccionar un estilo, seleccione un estilo como Multicolor.

Haga clic en Aceptar. El control ListView configurado se podría parecer a la ilustración siguiente.

Ahora puede probar el control ListView.

Para probar la página

Presione CTRL+F5 para ejecutar la página.

El control ListView se muestra con las columnas DepartmentID, Name y GroupName.
Haga clic en el botón Edit para modificar un registro de la tabla.
Cambie los valores y, a continuación, haga clic en Update o bien haga clic en Cancel para cancelar la operación de edición.
Escriba valores para los campos Name y GroupName en la parte inferior de la página y haga clic en Insert para insertar un nuevo registro.
Haga clic en el botón Delete del registro que acaba de insertar para eliminarlo de la base de datos.

Pasos siguientes

Este tutorial le ha enseñado los pasos básicos para utilizar un control ListView para mostrar y editar registros de datos mediante un diseño personalizado. El control ListView permite aplicar un formato más sofisticado que el aplicado en este tutorial. Para explorar otros posibles escenarios con el control ListView, vea Información general sobre el control de servidor web ListView.