Procédure pas à pas : liaison de données de pages Web à un composant de données Visual Studio

Mise à jour : novembre 2007

De nombreuses applications Web sont générées en utilisant plusieurs couches, avec un ou plusieurs composants de la couche intermédiaire qui combinent l'accès aux données et la logique métier. Cette procédure pas à pas vous indique comment construire un composant gérant l'accès aux données dans un site Web et lier un contrôle serveur Web (un contrôle GridView) aux données qui sont gérées par le composant. Le composant de données interagit avec une base de données Microsoft SQL Server et peut lire et écrire des données.

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

• Création d'un composant qui peut lire et écrire des données.

• Référencement du composant de données comme source de données d'une page Web.

• Liaison d'un contrôle aux données qui sont retournées par le composant de données.

• Lecture et écriture de données à l'aide du composant de données.

Composants requis

Pour effectuer cette procédure pas à pas, vous aurez besoin des éléments suivants :

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

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

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

Création du site Web

Si vous avez déjà créé un site Web dans Visual Web Developer en effectuant la Procédure pas à pas : création d'une page Web de base dans Visual Web Developer, vous pouvez utiliser ce site Web 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

1. Ouvrez Visual Web Developer.

2. 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 liste Emplacement la plus à gauche, cliquez sur Système de fichiers, puis dans la zone de texte Emplacement la plus à droite, entrez le nom du dossier dans lequel vous souhaitez conserver les pages du site Web.

   Par exemple, tapez le nom de dossier C:\SitesWeb\ExempleComposant.

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

6. Cliquez sur OK.

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

Création d'un composant gérant l'accès aux données

Dans cette procédure pas à pas, vous utiliserez un Assistant pour générer un composant qui lit des données à partir de la base de données Northwind et écrit des données dans cette base de données. Le composant inclut un fichier de schéma (.xsd) qui décrit les données que vous souhaitez et les méthodes qui seront utilisées pour lire et écrire des données. Vous n'avez pas besoin d'écrire du code. Au moment de l'exécution, le fichier .xsd est compilé dans un assembly qui effectue les tâches que vous spécifiez dans l'Assistant.

Pour créer un composant gérant l'accès aux données

1. Si le site Web n'a pas déjà de dossier App_Code, procédez de la façon suivante :

   1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web.

   2. Pointez vers Ajouter un dossier, puis cliquez sur Dossier App_Code.

2. Cliquez avec le bouton droit sur le dossier App_Code, puis cliquez sur Ajouter un nouvel élément.

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

3. Sous Modèles Visual Studio installés, cliquez sur DataSet.

4. Dans la zone Nom, tapez EmployeesObject, puis cliquez sur Ajouter.

   L'Assistant Configuration de TableAdapter s'affiche.

5. Cliquez sur Nouvelle connexion.

6. Si la boîte de dialogue Choisir la source de données s'affiche, sélectionnez Microsoft SQL Server et cliquez sur Continuer.

7. Dans la zone Nom du serveur, entrez le nom de l'ordinateur qui exécute SQL Server.

8. Pour les informations d'identification de connexion, sélectionnez l'option appropriée pour accéder à la base de données SQL Server (sécurité intégrée ou ID et mot de passe spécifiques) et si nécessaire, entrez un nom d'utilisateur et un mot de passe.

   • Si vous spécifiez des informations explicites, activez la case à cocher Enregistrer mon mot de passe.

9. Cliquez sur Sélectionnez ou entrez un nom de base de données, puis entrez Northwind.

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

    L'Assistant Configuration de TableAdapter s'affiche avec les informations de connexion fournies.

11. Cliquez sur Suivant.

    Une page dans laquelle vous pouvez choisir de stocker la chaîne de connexion dans le fichier de configuration s'affiche.

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

    Vous pouvez laisser le nom de chaîne de connexion par défaut.

    Une page dans laquelle vous pouvez choisir d'utiliser des instructions SQL ou des procédures stockées s'affiche.

13. Cliquez sur Utiliser des instructions SQL, puis cliquez sur Suivant.

    L'utilisation de procédures stockées présente quelques avantages, notamment l'amélioration des performances et de la sécurité. Toutefois, pour simplifier cette procédure pas à pas, vous utiliserez une instruction SQL.

    Une page dans laquelle vous pouvez définir l'instruction SQL s'affiche.

14. Sous Quelles données doivent être chargées dans la table, tapez l'instruction SQL suivante :

    SELECT EmployeeID, LastName, FirstName, HireDate FROM Employees
    

    Remarque :
    Si vous le souhaitez, vous pouvez cliquer sur Générateur de requêtes pour utiliser un outil de génération.

15. Cliquez sur Suivant.

    Une page dans laquelle vous pouvez définir les méthodes que le composant exposera s'affiche.

16. Cliquez pour désactiver la case à cocher Remplir un DataTable, puis activez les cases à cocher Retourner un DataTable et Créer des méthodes pour envoyer directement des mises à jour à la base de données.

    Vous n'avez pas besoin d'une méthode pour remplir une table de données pour cette procédure pas à pas. Toutefois, vous aurez besoin d'une méthode qui retourne les données et il est également préférable que le composant contienne des méthodes qui mettent à jour la base de données.

17. Dans la zone Nom de la méthode, tapez GetEmployees.

    Vous nommez la méthode qui sera utilisée ultérieurement pour obtenir des données.

18. Cliquez sur Terminer.

    L'Assistant configure le composant et l'affiche dans le Concepteur de composants, en affichant les données que le composant gère et les méthodes que le composant expose.

19. Enregistrez le composant de données, puis fermez le Concepteur de composants.

20. Dans le menu Générer, cliquez sur Générer le site Web pour veiller à ce que le composant compile correctement.

Utilisation d'un composant de données sur une page

Vous pouvez à présent utiliser le composant de données comme source de données dans une page Web ASP.NET. Pour accéder au composant de données, vous utiliserez un contrôle ObjectDataSource, en le configurant pour appeler les méthodes gérant l'accès aux données qui sont exposées par le composant de données. Vous pouvez ensuite ajouter des contrôles à la page et les lier au contrôle de source de données.

Pour ajouter un contrôle de source de données à la page

1. Ouvrez la page Default.aspx et basculez en mode Design.

2. À partir du groupe Données de la Boîte à outils, faites glisser un contrôle ObjectDataSource sur la page.

   • Si le menu contextuel Tâches ObjectDataSource ne s'affiche pas, cliquez avec le bouton droit sur le contrôle ObjectDataSource, puis cliquez sur Afficher la balise active.

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

   L'Assistant Configurer la source de données s'affiche.

4. Dans la liste Choisissez votre objet métier, cliquez sur EmployeesObjectTableAdapters.EmployeesTableAdapter.

   C'est le nom de type (espace de noms et nom de classe) du composant que vous avez créé dans la section précédente.

5. Cliquez sur Suivant.

6. Dans l'onglet Sélectionner, dans la liste Choisissez une méthode, cliquez sur GetEmployees(), returns EmployeesDataTable.

   La méthode GetEmployees est une méthode qui a été définie dans le composant que vous avez créé dans la section précédente. Elle retourne les résultats de l'instruction SQL, disponible dans un objet DataTable auquel les contrôles de données peuvent se lier.

7. Cliquez sur Terminer.

Vous pouvez à présent ajouter des contrôles de données à la page et les lier au contrôle ObjectDataSource. Dans cette procédure pas à pas, vous travaillerez avec le contrôle GridView.

Pour ajouter un contrôle GridView à la page et le lier aux données

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

   • Si le menu contextuel Tâches GridView ne s'affiche pas, cliquez avec le bouton droit sur le contrôle GridView, puis cliquez sur Afficher la balise active.

2. Dans le menu contextuel Tâches GridView, dans la liste Choisir la source de données, cliquez sur ObjectDataSource1, qui est l'ID du contrôle que vous avez configuré dans la section précédente.

   Le contrôle GridView réapparaît avec une colonne pour chaque colonne de données qui est retournée par l'instruction SQL.

3. Dans Propriétés, vérifiez que DataKeyNames a la valeur EmployeeID.

Test de la page

Maintenant que tous les contrôles dont vous avez besoin sont sur la page, vous pouvez tester la page.

Pour tester la page

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

2. Confirmez que les colonnes EmployeeID, LastName, FirstName et HireDate de la table Employees sont affichées dans la grille.

3. Fermez le navigateur.

Le contrôle GridView demande des données du contrôle ObjectDataSource. Ensuite, le contrôle ObjectDataSource crée une instance du composant de données et appelle la méthode GetEmployees pour le composant de données. La méthode GetEmployees retourne un objet DataTable que le contrôle ObjectDataSource retourne au contrôle GridView.

Ajout de mises à jour à la page

Le composant de données que vous avez créé inclut des instructions SQL pour mettre à jour la base de données (mettre à jour, insérer et supprimer les enregistrements). Les fonctionnalités de mise à jour du composant de données sont exposées par les méthodes qui ont été générées automatiquement lorsque l'Assistant a créé le composant. Le contrôle GridView et le contrôle ObjectDataSource peuvent interagir pour démarrer automatiquement les méthodes de mise à jour.

Remarque :
Le contrôle GridView ne prend pas en charge Insert.

Pour activer les mises à jour et les suppressions

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

2. Activez la case à cocher Activer la modification.

3. Activez la case à cocher Activer la suppression.

   Remarque :
   L'activation de la suppression vous permet de supprimer définitivement des enregistrements de la base de données. N'activez pas la suppression sauf si vous utilisez les données de test consommables.

Test des mises à jour

Vous pouvez à présent tester afin de vous assurer que vous pouvez utiliser le composant pour mettre à jour la base de données.

Pour tester les mises à jour

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

   Cette fois, le contrôle GridView affiche les liens Modifier et Supprimer dans chaque ligne.

2. Cliquez sur le lien Modifier qui se trouve en regard d'une ligne.

3. Apportez une modification à la ligne, puis cliquez sur Mettre à jour.

   La grille est réaffichée avec la date mise à jour.

4. Cliquez sur le lien Supprimer dans une ligne.

   La ligne est supprimée définitivement de la base de données. La grille est réaffichée sans cette ligne.

5. Fermez le navigateur.

Étapes suivantes

Cette procédure pas à pas illustre comment utiliser un composant de données. Vous pouvez essayer des fonctionnalités de navigation supplémentaires. Par exemple, vous pouvez souhaiter procéder comme suit :

• Créez un composant de données personnalisé au lieu d'utiliser l'Assistant.

  Pour obtenir un exemple, consultez Procédure pas à pas : liaison de données à un objet métier personnalisé.

• Limitez les utilisateurs qui peuvent modifier les données. La méthode type consiste à ajouter l'appartenance et les rôles au site Web, puis d'établir des règles que le composant d'entreprise peut vérifier avant d'autoriser des modifications apportées aux données.

• Pour plus d'informations, consultez Procédure pas à pas : création d'un site Web avec appartenance et connexion utilisateur et Procédure pas à pas : gestion des utilisateurs de site Web avec des rôles.

Voir aussi

Tâches

Procédure pas à pas : utilisation de code partagé au sein de sites Web dans Visual Web Developer

Procédure pas à pas : création d'une page Web de base dans Visual Web Developer

Concepts

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

Utilisation de paramètres avec des contrôles de source de données