Procédure pas à pas : modification de données à l'aide du contrôle serveur Web ListView

Mise à jour : novembre 2007

Le contrôle ASP.NET ListView possède des fonctionnalités intégrées permettant aux utilisateurs d'insérer, de modifier ou de supprimer des enregistrements sans programmation.

Cette procédure pas à pas décrit comment afficher et mettre à jour des données à l'aide du contrôle ListView. Cette procédure pas à pas utilise un contrôle SqlDataSource pour récupérer les résultats de la source de données et gérer les mises à jour. Le contrôle SqlDataSource agit en tant que source de données pour le contrôle ListView.

Cette procédure pas à pas illustre notamment les tâches suivantes :

Affichage de données retournées d'une base de données dans le contrôle ListView.
Ajout des fonctions de modification, d'insertion et de suppression d'enregistrements dans le contrôle ListView.

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer des composants suivants :

Visual Studio 2008 ou Visual Web Developer 2008 Express
Accès à la base de données SQL Server AdventureWorks. Pour plus d'informations sur le téléchargement et l'installation de l'exemple de base de données AdventureWorks SQL Server, consultez Installing Sample Databases for Express Editions sur le site Web Microsoft SQL Server.

Remarque :

Si vous avez besoin d'informations sur la façon de se connecter à un ordinateur qui exécute SQL Server, contactez l'administrateur du serveur.
Nom d'utilisateur et mot de passe pour un compte SQL Server ayant accès à la base de données AdventureWorks.

Remarque :
Si vous avez besoin d'informations sur la façon de se connecter à un ordinateur qui exécute SQL Server, contactez l'administrateur du serveur.

Création du site Web

Si vous avez déjà créé un site Web (à l'aide de la Procédure pas à pas : création d'une page Web de base dans Visual Web Developer, par exemple), vous pouvez utiliser ce dernier et passer à la section suivante. Sinon, créez un site et une page Web en suivant ces étapes.

Pour créer un site Web de système de fichiers

Ouvrez Visual Studio 2008 ou Visual Web Developer 2008 Express.
Dans le menu Fichier, cliquez sur Nouveau, puis sur Site Web. Si vous utilisez Visual Web Developer 2008 Express, dans le menu Fichier, cliquez sur Nouveausite Web.

La boîte de dialogue Nouveau site Web s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
Dans la première zone Emplacement, sélectionnez Système de fichiers ; dans la deuxième, entrez le nom du dossier dans lequel vous souhaitez conserver les pages du site Web.

Par exemple, entrez le nom du dossier C:\WebSites\ModifyData.
Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.
Cliquez sur OK.

Visual Studio crée le dossier et une page nommée Default.aspx.

Modification de données à l'aide du contrôle ListView par les utilisateurs

Dans cette section, vous allez ajouter un contrôle ListView à la page et le configurer pour l'affichage et la modification de données de la table de départements de la base de données AdventureWorks.

Pour afficher et modifier des données dans le contrôle ListView

Si le site Web ne possède pas de dossier App_Data, dans l'Explorateur de solutions, cliquez avec le bouton droit sur le projet, puis cliquez sur Ajouter le dossier ASP.NET et enfin sur App_Data.
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier App_Data, puis cliquez sur Ajouter un élément existant.

La boîte de dialogue Ajouter un élément existant s'affiche.

Entrez l'emplacement où a été installé le fichier de la base de données AdventureWorks (AdventureWorks_Data.mdf).

Par défaut, l'emplacement où est installé le fichier .mdf est accessible par le chemin suivant : C:\Program Files\Microsoft SQL Server\MSSQL.1\MSSQL\Data\AdventureWorks_Data.mdf.

Remarque :
Cette procédure crée une copie du fichier de base de données dans le projet. Le fichier de base de données est volumineux. Si la copie de la base de données paraît irréalisable, vous pouvez vous connecter à cette dernière en utilisant une autre méthode, par exemple en joignant le fichier de base de données directement. Toutefois, cette méthode n'est pas développée dans notre procédure pas à pas.

Cette procédure crée une copie du fichier de base de données dans le projet. Le fichier de base de données est volumineux. Si la copie de la base de données paraît irréalisable, vous pouvez vous connecter à cette dernière en utilisant une autre méthode, par exemple en joignant le fichier de base de données directement. Toutefois, cette méthode n'est pas développée dans notre procédure pas à pas.

Basculez vers le fichier Default.aspx ou ouvrez-le.
Passez en mode Design.
À partir de l'onglet Données de la Boîte à outils, faites glisser un contrôle ListView sur la page.
À partir du menu TâchesListView, dans la liste déroulante Choisirla source de données, cliquez sur <Nouvelle source de données...>. L'illustration suivante montre le menu des tâches ListViewcourantes.

L'Assistant Configuration de source de données s'affiche. L'illustration suivante montre l'Assistant Configuration de source de données.
Cliquez sur Base de données.

Cela spécifie que vous souhaitez obtenir des données d'une base de données qui prend en charge les instructions SQL, ce qui inclut les bases de données SQL Server ainsi que toute autre base de données compatible OLE-DB.
Dans la zone Spécifiez un ID pour la source de données, le nom d'un contrôle de source de données par défaut est affiché (SqlDataSource1). Vous pouvez laisser ce nom.
Cliquez sur OK.

L'Assistant Configurer la source de données s'affiche.
Sous Quelle connexion de données votre application doit-elle utiliser pour établir une connexion à la base de données ?, sélectionnez AdventureWorks_Data.mdf dans la liste.
Cliquez sur Suivant.

L'Assistant affiche une page dans laquelle vous pouvez choisir de stocker la chaîne de connexion dans le fichier de configuration. Le stockage de la chaîne de connexion dans le fichier de configuration présente deux avantages :
- Ce stockage peut s'avérer plus sécurisé qu'un stockage dans la page.
- Vous pouvez utiliser la même chaîne de connexion dans plusieurs pages.
Veillez à ce que la case à cocher Oui, enregistrer cette connexion en tant que soit activée, puis cliquez sur Suivant. Vous pouvez laisser le nom de chaîne de connexion par défaut.

L'Assistant Configurer la source de données s'affiche. Vous pouvez y spécifier les données à récupérer à partir de la base de données.

Sélectionnez l'option Spécifiez une instruction SQL personnalisée ou une procédure stockée. L'illustration suivante montre l'Assistant Configurer la source de données.

Configuration de l'instruction Select

Remarque :
En principe, vous devez utiliser l'option Spécifiez les colonnes d'une table ou d'une vue. Toutefois, la base de données AdventureWorks comportant des noms de schémas, vous allez créer une instruction SQL personnalisée dans cette procédure pas à pas.

Cliquez sur Suivant.
À la page Définir des instructions personnalisées ou des procédures stockées, entrez la requête SQL suivante pour récupérer des données de département de la base de données AdventureWorks.
```
SELECT  DepartmentID, Name, GroupName 
FROM    HumanResources.Department
```
Vous pouvez également cliquer sur le Générateur de requêtes et utiliser ce Générateur de requêtes pour créer une requête puis la valider à l'aide du bouton Exécuter la requête.
Cliquez sur l'onglet METTRE À JOUR puis entrez la requête SQL suivante pour mettre à jour des données de département dans la base de données AdventureWorks.
```
UPDATE HumanResources.Department 
SET    Name = @Name, GroupName = @GroupName 
WHERE  (DepartmentID = @DepartmentID)
```
Cliquez sur l'onglet INSÉRER puis entrez la requête SQL suivante pour insérer des données de département dans la base de données AdventureWorks.
```
INSERT INTO HumanResources.Department(Name, GroupName)
VALUES (@Name, @GroupName)
```
Cliquez sur l'onglet SUPPRIMER puis entrez la requête SQL suivante pour supprimer des données de département de la base de données AdventureWorks.
```
DELETE FROM HumanResources.Department WHERE (DepartmentID = @DepartmentID)
```
Cliquez sur Suivant.
Cliquez sur Tester la requête pour vous assurer de récupérer les données que vous souhaitez.
Cliquez sur Terminer.

L'Assistant crée un contrôle SqlDataSource et l'ajoute à la page. Le contrôle ListView que vous avez ajouté précédemment est lié au contrôle SqlDataSource.
Cliquez avec le bouton droit sur le contrôle ListView, puis cliquez sur Afficher la balise active.
Dans le menu Tâches ListView, cliquez sur Configurer ListView.

La boîte de dialogue Configurer ListView s'affiche.

Sous Options, sélectionnez les cases à cocher Activer la modification, Activer l'insertion et Activer la suppression. L'illustration suivante montre la boîte de dialogue Configurer ListView.

Configuration de ListView

Remarque :
Vous pouvez également sélectionner, si vous le souhaitez, un style différent, afin de simplifier l'affichage des données. Pour ce faire, sous Sélectionnez un style, sélectionnez un style, tel que Couleur.

Cliquez sur OK. Le contrôle ListView configuré peut se présenter comme illustré ci-dessous.

Vous pouvez à présent tester le contrôle ListView.

Pour tester la page

Appuyez sur CTRL+F5 pour exécuter la page.

Le contrôle ListView s'affiche et présente les colonnes IDService, Nom et NomGroupe.
Cliquez sur le bouton Modifier pour modifier un enregistrement dans la table.
Modifiez les valeurs puis cliquez sur Mettre à jourou sur Annuler pour annuler la modification.
Entrez des valeurs dans les champs Nom et NomGroupe en bas de la page et cliquez sur Insérer pour insérer un nouvel enregistrement.
Cliquez sur le bouton Supprimer de l'enregistrement que vous venez d'insérer pour le supprimer de la base de données.

Étapes suivantes

Cette procédure pas à pas vous a montré les étapes de base pour utiliser un contrôle ListView afin d'afficher et de modifier des enregistrements de données à l'aide d'une disposition personnalisée. Le contrôle ListView vous permet d'effectuer une mise en forme plus sophistiquée que celle que vous avez réalisée dans cette procédure pas à pas. Pour explorer d'autres scénarios possibles avec le contrôle ListView, consultez Vue d'ensemble du contrôle serveur Web ListView.