Procédure pas à pas : modification et insertion de données dans les pages Web avec le contrôle serveur Web DetailsView

Mise à jour : novembre 2007

Microsoft Visual Web Developer vous permet de créer des formulaires d'entrée de données pour mettre à jour des enregistrements et insérer de nouveaux enregistrements dans une base de données avec quelques lignes de code seulement. En utilisant la combinaison d'un contrôle de source de données qui encapsule l'accès aux données et des contrôles DetailsView et GridView qui affichent des enregistrements dans un format modifiable, vous pouvez créer une page d'entrée de données qui permet aux utilisateurs de modifier des enregistrements existants ou d'insérer de nouveaux enregistrements, le tout sans code.

Au cours de cette procédure pas à pas, vous apprendrez à :

• créer une page d'entrée de données ;

• configurer un contrôle de source de données avec les informations requises pour effectuer des mises à jour et des insertions dans la base de données ;

• utiliser le contrôle DetailsView pour consulter des enregistrements, les modifier et en insérer de nouveaux ;

• utiliser un contrôle GridView pour activer la modification de base de données à partir de la page d'entrée de données.

Composants requis

Pour exécuter cette procédure pas à pas, vous avez besoin de :

• Visual Web Developer.

• Microsoft Data Access Components (MDAC) version 2.7 ou ultérieure.

  Si vous utilisez les systèmes d'exploitation Microsoft Windows XP ou Windows Server 2003, MDAC 2.7 est déjà installé. Toutefois, si vous utilisez le système d'exploitation Microsoft Windows 2000, vous devrez peut-être mettre à niveau les composants MDAC déjà installés sur votre ordinateur. Pour télécharger la version MDAC actuelle, consultez le Centre de Développement Accès aux données.

• Accéder à la base de données Northwind SQL Server. Pour plus d'informations sur le téléchargement et l'installation de l'exemple de base de données Northwind SQL Server, consultez Installation d'exemples de bases de données 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.

• Être autorisé à modifier des données dans l'exemple de base de données Northwind.

Création du site et de la page Web

Créez un site et une page Web en suivant ces étapes.

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

1. Ouvrez Visual Web Developer.

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

   La boîte de dialogue Nouveau site Web s'affiche.

3. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.

4. Dans la zone Emplacement, sélectionnez Système de fichiers et entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.

   Par exemple, tapez le nom de dossier C:\SitesWeb\ModificationDonnées.

5. Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.

   Le langage de programmation que vous choisissez sera la valeur par défaut pour votre site Web, mais vous pouvez définir individuellement les langages de programmation pour chaque page.

6. Cliquez sur OK.

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

Connexion à SQL Server

Vous devez maintenant établir une connexion avec la base de données SQL Server.

Pour créer une connexion avec une base de données SQL Server

1. Dans l'Explorateur de serveurs, cliquez avec le bouton droit sur Connexions de données, puis cliquez sur Ajouter une connexion. Si vous utilisez Visual Web Developer Express, utilisez l'Explorateur de bases de données.

   La boîte de dialogue Ajouter une connexion s'affiche.

   • Si la liste Source de données n'affiche pas Microsoft SQL Server (SqlClient), cliquez sur Modifier puis, dans la boîte de dialogue Modifier la source de données, sélectionnez Microsoft SQL Server.

   • Si la page Choisir la source de données s'affiche, dans la liste Source de données, sélectionnez le type de source de données que vous utiliserez. Pour cette procédure pas à pas, le type de source de données est Microsoft SQL Server. Dans la liste Fournisseur de données, cliquez sur Fournisseur de données .NET Framework pour SQL Server, puis sur Continuer.

   Remarque :
   Si l'onglet Explorateur de serveurs n'est pas visible dans Visual Web Developer, dans le menu Affichage, cliquez sur Explorateur de serveurs. Si l'onglet Explorateur de bases de données n'est pas visible dans l'édition Express, dans le menu Affichage, cliquez sur Explorateur de bases de données.

2. Dans la zone Ajouter une connexion, entrez le nom de votre serveur dans la zone Nom du serveur.

3. Pour la section Connexion au serveur, sélectionnez l'option appropriée pour accéder à la base de données SQL Server en cours d'exécution (sécurité intégrée ou ID spécifique et mot de passe) et, si besoin est, entrez un nom d'utilisateur et un mot de passe. Activez la case à cocher Enregistrer mon mot de passe si vous avez entré un mot de passe.

4. Sous Sélectionner ou entrer un nom de base de données, entrez Northwind.

5. Cliquez sur Tester la connexion et, lorsque vous êtes sûr que la connexion fonctionne, cliquez sur OK.

   Votre nouvelle connexion a été créée sous Connexions de données dans l'explorateur de serveurs.

Création de la page d'entrée de données

Dans cette section, vous créerez une page d'entrée de données et configurerez un contrôle DetailsView afin que vous puissiez consulter des données sur les employés qui sont stockées dans la table Employees de la base de données Northwind. Pour gérer l'accès aux données pour la page, vous configurerez un contrôle de source de données SQL.

Pour créer une page d'entrée de données et configurer un contrôle DetailsView

1. Dans le menu Site Web, cliquez sur Ajouter un nouvel élément.

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

2. Sous Modèles Visual Studioinstallés, cliquez sur Web Form, puis dans la zone Nom, tapez EditEmployees.aspx.

3. Cliquez sur Ajouter.

4. Ouvrez la page EditEmployees.aspx.

5. Basculez en mode Design.

6. Tapez Edit Employees, sélectionnez le texte, puis mettez-le en forme comme un titre.

7. Dans la Boîte à outils, à partir du groupe Données, faites glisser un contrôle DetailsView sur la page.

8. Cliquez avec le bouton droit sur le contrôle DetailsView, cliquez sur Propriétés, puis affectez true à AllowPaging.

   Cela vous permettra de parcourir les entrées des employés lorsque celles-ci sont affichées.

Vous devez maintenant créer et configurer un contrôle de source de données qui puisse être utilisé pour interroger la base de données. Il existe plusieurs façons de créer un contrôle de source de données, y compris en faisant glisser des éléments de données provenant de l'explorateur de serveurs ou de l'explorateur de bases de données sur la page. Dans cette procédure pas à pas, vous démarrerez avec le contrôle DetailsView et configurerez le contrôle de source de données à partir de ce dernier.

Pour configurer un contrôle de source de données

1. Cliquez avec le bouton droit sur le contrôle DetailsView, puis cliquez sur Afficher la balise active.

2. Dans le menu Tâches DetailsView, dans la zone Choisir la source de données, cliquez sur <Nouvelle source de données>.

   La boîte de dialogue Assistant Configuration de source de données s'affiche.

3. Sous Choisir un type de source de données, cliquez sur Base de données.

4. Gardez le nom par défaut de SqlDataSource1, puis cliquez sur OK.

   L'Assistant Configurer la source de données affiche la page Choisir votre connexion de données.

5. Dans la zone Quelle connexion de données votre application doit-elle utiliser pour établir une connexion à la base de données ?, entrez la connexion que vous avez créée dans « Pour créer une connexion au SQL Server », puis cliquez sur Suivant.

   L'Assistant affiche une page dans laquelle vous pouvez choisir de stocker la chaîne de connexion dans un fichier de configuration. Le stockage de la chaîne de connexion dans le fichier de configuration présente deux avantages :

   • Le stockage dans la page est plus sécurisé.

   • Vous pouvez utiliser la même chaîne de connexion dans plusieurs pages.

6. Activez la case à cocher Oui, enregistrer cette connexion en tant que, puis cliquez sur Suivant.

   L'Assistant affiche une page où vous pouvez spécifier les données à récupérer à partir de la base de données.

7. Sur la page Configurer l'instruction Select, sélectionnez Spécifiez les colonnes d'une table ou d'une vue, puis dans la zone Nom, cliquez sur Employees.

8. Sous Colonnes, activez les cases à cocher EmployeeID, LastName, FirstName et HireDate, puis cliquez sur Suivant.

9. Cliquez sur Tester la requête pour visualiser les données, puis cliquez sur Terminer.

Vous pouvez à présent tester la page d'affichage des enregistrements d'employés.

Pour tester l'affichage des enregistrements d'employés

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

   Le premier enregistrement d'employé est affiché dans le contrôle DetailsView.

2. Cliquez sur les liens de numéro de page pour consulter d'autres enregistrements d'employés.

3. Fermez le navigateur.

Modification dans un contrôle GridView

À ce stade, vous pouvez afficher des enregistrements d'employés, mais vous ne pouvez pas les modifier. Dans cette section, vous ajouterez un contrôle GridView et le configurerez afin de pouvoir modifier des enregistrements individuels.

Remarque :
Le contrôle GridView présente une liste d'enregistrements et vous permet de les modifier. Toutefois, il ne vous permet pas de les insérer. À une étape ultérieure de cette procédure, vous utiliserez le contrôle DetailsView qui vous permettra d'ajouter de nouveaux enregistrements.

Pour autoriser la modification, vous devez configurer le contrôle de source de données que vous avez créé précédemment (SqlDataSource1) avec les instructions SQL qui effectuent des mises à jour.

Pour ajouter un contrôle GridView pour effectuer des modifications

1. Dans la Boîte à outils, à partir du groupe Données, faites glisser un contrôle GridView sur la page.

2. Cliquez avec le bouton droit sur le contrôle GridView, cliquez sur Afficher la balise active, puis dans le menu Tâches GridView, dans la zone Choisir la source de données, cliquez sur SqlDataSource1.

3. Dans le menu Tâches GridView, cliquez sur Configurer la source de données.

4. Cliquez sur Suivant pour accéder à la page Configurer l'instruction Select de l'Assistant.

5. Dans la page Configurer l'instruction Select, cliquez sur Avancé, activez la case à cocher Générer des instructions INSERT, UPDATE et DELETE, puis cliquez sur OK.

   Cela génère des instructions Insert, Update et Delete pour le contrôle SqlDataSource1 selon l'instruction Select que vous avez configurée précédemment.

   Remarque :
   Vous pouvez également créer manuellement les instructions en sélectionnant Spécifiez une instruction SQL personnalisée ou une procédure stockée et entrant des requêtes SQL.

6. Cliquez sur Suivant, puis sur Terminer.

   Le contrôle SqlDataSource est maintenant configuré avec des instructions SQL supplémentaires.

   Remarque :
   Vous pouvez examiner les instructions générées par l'Assistant en sélectionnant le contrôle SqlDataSource et en affichant les propriétés DeleteQuery, InsertQuery et UpdateQuery. Vous pouvez également consulter les propriétés de contrôle mises à jour en basculant en mode Source et en examinant le balisage du contrôle.

7. Dans le menu Tâches GridView, activez les cases à cocher Activer la pagination et Activer la modification.

   Note de sécurité :

   Les entrées d'utilisateur dans une page Web ASP.NET peuvent inclure un script client nuisible. Par défaut, les pages Web ASP.NET vérifient que les entrées d'utilisateur n'incluent pas de script ou d'éléments HTML. Tant que cette vérification est activée, vous n'avez pas besoin de vérifier explicitement la présence d'un script ou d'éléments HTML dans les entrées d'utilisateur. Pour plus d'informations, consultez Vue d'ensemble des attaques de script.

Vous pouvez à présent tester la modification des enregistrements d'employés.

Pour tester la modification dans le contrôle GridView

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

   Le contrôle GridView est affiché avec les données dans des zones de texte.

2. Choisissez une ligne dans le contrôle GridView et cliquez sur Modifier.

3. Apportez une modification à l'enregistrement, puis cliquez sur Mettre à jour.

   Les données mises à jour s'affichent maintenant dans le contrôle GridView et dans le contrôle DetailsView.

4. Fermez le navigateur.

Modification, suppression et insertion à l'aide d'un contrôle DetailsView

Le contrôle GridView vous permet de modifier des enregistrements, mais il ne vous permet pas d'insérer des données. Dans cette section, vous modifierez le contrôle DetailsView afin de pouvoir consulter des enregistrements, les supprimer, les insérer et les mettre à jour.

Pour utiliser un contrôle DetailsView pour permettre la suppression, l'insertion, et la mise à jour

1. Cliquez avec le bouton droit sur le contrôle DetailsView, puis cliquez sur Afficher la balise active.

2. Dans le menu Tâches DetailsView, activez les cases à cocher Activer l'insertion, Activer la modification et Activer la suppression.

   Lorsque vous avez utilisé le contrôle DetailsView précédemment dans la procédure pas à pas, les options de modification, d'insertion et de suppression n'étaient pas disponibles. La raison tient au fait que le contrôle SqlDataSource1 auquel le contrôle DetailsView est lié ne disposait pas des instructions SQL nécessaires. Maintenant que vous avez configuré le contrôle de source de données pour inclure des instructions UPDATE, les options de mise à jour sont disponibles sur le contrôle DetailsView.

Vous pouvez à présent tester la suppression, l'insertion et la mise à jour dans le contrôle DetailsView.

Pour tester la mise à jour, l'insertion et la suppression dans le contrôle DetailsView

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

   Le contrôle DetailsView affiche un enregistrement d'employé.

2. Dans le contrôle DetailsView, cliquez sur Modifier.

   Le contrôle DetailsView affiche maintenant les données dans des zones de texte.

3. Apportez une modification à l'enregistrement, puis cliquez sur Mettre à jour.

   L'enregistrement mis à jour est affiché dans le contrôle.

4. Dans le contrôle DetailsView, cliquez sur Nouveau.

   Le contrôle affiche maintenant des zones de texte vierges pour chaque colonne.

5. Entrez les valeurs pour chaque colonne.

   La table Employees a une colonne clé d'auto-incrémentation, la valeur pour EmployeeID est donc automatiquement assignée lorsque vous enregistrez l'enregistrement.

6. Lorsque vous avez terminé, cliquez sur Insérer.

   Le nouvel enregistrement est ajouté en tant que dernier enregistrement.

   Remarque :
   L'insertion d'un nouvel enregistrement dans la table Employees dans cette procédure pas à pas ne générera aucune erreur. Toutefois, lorsque vous utilisez les données de production, les tables peuvent avoir des contraintes (telles qu'une contrainte de clé étrangère) dont vous devez être informé lors de la configuration du contrôle DetailsView.

7. Utilisez la pagination dans le contrôle DetailsView pour naviguer jusqu'au dernier enregistrement, puis cliquez sur Supprimer.

   Le nouvel enregistrement est supprimé.

   Remarque :
   Comme avec l'insertion de données, vous devez toujours être informé de toute contrainte qui s'applique à la ligne de données lors de la configuration d'un contrôle DetailsView pour permettre la suppression.

Étapes suivantes

Cette procédure pas à pas a illustré les concepts de base de la création d'une page Web qui permet aux utilisateurs de modifier des enregistrements de données. Vous pouvez explorer d'autres fonctions de données des pages Web ASP.NET. Par exemple, vous pouvez souhaiter procéder comme suit :

• Utiliser des enregistrements dans des tables connexes Pour plus d'informations, consultez Procédure pas à pas : création de pages Web maître/détail dans Visual Studio.

• Utilisez un composant de couche intermédiaire pour l'accès aux données. Pour plus d'informations, consultez Procédure pas à pas : liaison de données à un objet métier personnalisé.

• Utilisez d'autres techniques pour configurer l'accès aux données dans une page Web. Pour plus d'informations, consultez Procédure pas à pas : accès aux données de base dans les pages Web.

Voir aussi

Tâches

Procédure pas à pas : création d'une page Web pour afficher les données d'une base de données Access

Concepts

Vue d'ensemble des contrôles de source de données

Liaison à des données à l'aide d'un contrôle de source de données