Procédure pas à pas : accès aux données de base dans les pages Web

Mise à jour : novembre 2007

Cette procédure pas à pas vous montre comment créer une page liée aux données simple en utilisant des contrôles conçus spécialement pour l'accès aux données.

Au cours de cette procédure pas à pas, vous allez apprendre à effectuer les tâches suivantes :

• vous connecter à une base de données Microsoft SQL Server dans l'outil de développement Web Microsoft Visual Web Developer ;

• effectuer une opération de glisser-déplacer pour créer des éléments d'accès aux données qui peuvent être utilisés dans la page sans code ;

• utiliser le contrôle SqlDataSource pour gérer l'accès aux données et la liaison des données ;

• afficher des données avec le contrôle GridView ;

• configurer le contrôle GridView pour autoriser le tri et la pagination ;

• créer une requête filtrée qui affiche uniquement les enregistrements sélectionnés.

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 devrez 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 zone Emplacement la plus à droite, entrez le nom du dossier dans lequel vous souhaitez conserver les pages du site Web.

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

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.

Ajout d'un contrôle GridView pour afficher les données

Pour afficher des données dans une page Web ASP.NET, vous avez besoin des éléments suivants :

• une connexion à une source de données (telle qu'une base de données).

  Dans la procédure suivante, vous créerez une connexion à la base de données Northwind SQL Server.

• Un contrôle de source de données sur la page qui exécute des requêtes et gère les résultats des requêtes.

• Un contrôle sur la page pour afficher réellement les données.

  Dans la procédure suivante, vous afficherez des données dans un contrôle GridView. Le contrôle GridView obtiendra ses données du contrôle SqlDataSource.

Vous pouvez ajouter séparément ces éléments au site Web. Toutefois, il est plus facile de commencer en affichant les données à l'aide du contrôle GridView, puis à l'aide d'Assistants pour créer la connexion et le contrôle de source de données. La procédure suivante explique comment créer chacun des trois éléments dont vous devez disposer pour afficher des données sur la page.

Pour ajouter et configurer un contrôle GridView pour afficher des données

1. Dans Visual Web Developer, basculez vers le mode Design.

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

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

4. Dans le menu Tâches GridView, dans la liste Choisir la source de données, cliquez sur <Nouvelle source de données>.

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

   

5. Cliquez sur Base de données.

   Cela spécifie que vous souhaitez obtenir des données à partir d'une base de données qui prend en charge des instructions SQL. Cela inclut le serveur SQL et d'autres bases de données compatibles OLEDB.

   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.

6. Cliquez sur OK.

   L'Assistant Configurer la source de données apparaît, en affichant une page sur laquelle vous pouvez choisir une connexion.

   

7. Cliquez sur Nouvelle connexion.

8. Dans la boîte de dialogue Choisir la source de données, sous Source de données, cliquez sur Microsoft SQL Server, puis sur Continuer.

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

9. Dans la zone Nom du serveur, entrez le nom du serveur SQL que vous souhaitez utiliser.

   

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

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

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

    L'Assistant Configurer la source de données - <NomSourceDonnées> apparaît et les informations de connexion sont renseignées.

13. 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 :

    1. Il est plus sécurisé que le stockage de la chaîne de connexion dans la page.

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

14. 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 NorthwindConnectionString.)

    L'Assistant affiche une page dans laquelle vous pouvez spécifier les données à extraire à partir de la base de données.

15. Sous Spécifiez les colonnes d'une table ou d'une vue, dans la zone Nom, cliquez sur Customers.

16. Sous Colonnes, activez les cases à cocher CustomerID, CompanyName et City.

    L'Assistant affiche l'instruction SQL que vous créez dans une zone en bas de la page.

    

    Remarque :
    L'Assistant vous permet de spécifier des critères de sélection (clause WHERE) et d'autres options de requête SQL. Pour cette partie de la procédure pas à pas, vous créerez une instruction unique sans option de sélection ou de tri.

17. Cliquez sur Suivant.

18. Cliquez sur Tester la requête pour veiller à extraire les données que vous souhaitez.

19. Cliquez sur Terminer.

    L'Assistant se ferme et vous revenez à la page. L'Assistant a permis d'effectuer deux tâches :

    • L'Assistant a créé et configuré un contrôle SqlDataSource (nommé SqlDataSource1) qui incorpore la connexion et les informations de requête que vous avez spécifiées.

    • L'Assistant lie le contrôle GridView à SqlDataSource. Par conséquent, le contrôle GridView affichera des données qui sont retournées par le contrôle SqlDataSource.

    Si vous affichez les propriétés pour le contrôle SqlDataSource, vous pouvez voir que l'Assistant a créé des valeurs pour les propriétés ConnectionString et SelectQuery.

    Remarque :
    Vous pouvez aisément changer l'apparence du contrôle GridView. En mode Design, cliquez avec le bouton droit sur le contrôle GridView, puis cliquez sur Afficher la balise active. Dans le menu Tâches GridView, cliquez sur Mise en forme automatique puis appliquez un modèle.

Test de la page

Vous pouvez à présent exécuter la page.

Pour tester la page

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

   La page s'affiche dans le navigateur. Le contrôle GridView affiche toutes les lignes de données dans la table Customers.

2. Fermez le navigateur.

Ajout de fonctions de tri et de pagination

Vous pouvez ajouter des fonctions de tri et de pagination au contrôle GridView sans écrire de code.

Pour ajouter les fonctions de tri et de pagination

1. En mode Design, 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, activez la case à cocher Activer le tri.

   Les en-têtes de colonne dans le contrôle GridView sont transformés en liens.

3. Dans le menu Tâches GridView, activez la case à cocher Activer la pagination.

   Un pied de page est ajouté au contrôle GridView contenant les liens de numéro de page.

4. Éventuellement, utilisez Propriétés pour modifier la valeur de la propriété PageSize de 10 en une plus petite taille de page.

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

   Vous pourrez cliquer sur un en-tête de colonne pour trier le contenu de cette colonne. S'il y a plus d'enregistrements dans la source de données que la taille de page du contrôle GridView, vous pourrez utiliser les liens de navigation entre les pages en bas du contrôle GridView pour changer de pages.

6. Fermez le navigateur.

Ajout du filtrage

Fréquemment, vous souhaitez afficher des données sélectionnées uniquement dans la page. Dans cette partie de la procédure pas à pas, vous modifierez la requête du contrôle SqlDataSource afin que les utilisateurs puissent sélectionner des enregistrements de client pour une ville particulière.

En premier lieu, vous devez utiliser un contrôle TextBox pour créer une zone de texte dans laquelle les utilisateurs peuvent taper le nom d'une ville. Puis, vous modifierez la requête pour inclure un filtre paramétré (clause WHERE). Dans le cadre de ce processus, vous créerez un élément de paramètre pour le contrôle SqlDataSource. L'élément de paramètre établit comment le contrôle SqlDataSource obtiendra la valeur de sa requête paramétrée, à savoir de la zone de texte.

Lorsque vous avez terminé cette partie de la procédure pas à pas, la page peut ressembler en mode Design à :

Pour ajouter la zone de texte pour spécifier une ville

1. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle TextBox et un contrôle Button dans la page.

   Le contrôle Button est utilisé uniquement pour publier la page au serveur. Vous n'aurez pas besoin d'écrire du code pour lui.

2. Dans Propriétés, pour le contrôle TextBox, affectez textCity à ID.

3. Si vous souhaitez, tapez Ville ou du texte similaire avant que la zone de texte n'agisse comme une légende.

4. Dans Propriétés, pour le contrôle Button, affectez Submit à Text.

Vous pouvez maintenant modifier la requête pour inclure un filtre.

Pour modifier la requête avec un filtre paramétré

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

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

   L'Assistant Configurer la source de données - <NomSourceDonnées> s'affiche.

3. Cliquez sur Suivant.

   L'Assistant affiche la commande SQL actuellement configurée pour le contrôle SqlDataSource.

4. Cliquez sur WHERE.

   La page Ajouter une clause WHERE apparaît.

5. Dans la liste Colonne, cliquez sur Ville.

6. Dans la liste Opérateur, cliquez sur =.

7. Dans la liste Source, cliquez sur Contrôle.

8. Sous Propriétés du paramètre, dans la liste ControlID, cliquez sur textCity.

   

   Les cinq étapes précédentes spécifient que la requête obtiendra la valeur de recherche pour Ville du contrôle TextBox que vous avez ajouté dans la procédure précédente.

9. Cliquez sur Ajouter.

   La clause WHERE que vous avez créée apparaît dans une zone en bas de la page.

10. Cliquez sur OK pour fermer la page Ajouter une clause WHERE.

11. Dans l'Assistant Configurer la source de données - <NomSourceDonnées>, cliquez sur Suivant.

12. Dans la page Tester la requête, cliquez sur Tester la requête.

    L'Assistant apparaît, affichant la page Éditeur de valeurs de paramètre qui vous invite à utiliser une valeur dans la clause WHERE.

13. Dans la zone Valeur, tapez London, puis cliquez sur OK.

    Les enregistrements de client pour London apparaissent.

14. Cliquez sur Terminer pour fermer l'Assistant.

Vous pouvez maintenant tester le filtrage.

Pour tester le filtrage

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

2. Dans la zone de texte, tapez London, puis cliquez sur Envoyer.

   Une liste de clients de la ville de Londres apparaît dans le contrôle GridView.

3. Essayez d'autres villes, telles que Buenos Aires et Berlin.

Étapes suivantes

L'accès aux données est une partie importante de beaucoup d'applications Web, et cette procédure pas à pas a seulement fourni un aperçu de ce que vous pouvez faire avec les données dans les pages Web. Vous pouvez essayer des fonctionnalités d'accès aux données supplémentaires. Par exemple, vous pouvez souhaiter procéder comme suit :

• Utilisation de Microsoft Access à la place de SQL Server. (Vous ne pouvez pas utiliser de dépendance de cache SQL avec Access.)

  Pour plus d'informations, consultez Procédure pas à pas : création d'une page Web pour afficher les données d'une base de données Access.

• Modifiez et insérez des enregistrements.

  Pour plus d'informations, consultez Procédure pas à pas : modification et insertion de données dans les pages Web avec le contrôle serveur Web DetailsView.

• Utilisez des enregistrements qui ont une relation maître/détail.

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

• Créez un composant de couche intermédiaire (métier) qui exécute l'accès aux données, puis utilisez-le comme source de données dans une page.

  Pour plus d'informations, consultez Procédure pas à pas : liaison de données à un objet métier personnalisé.

Voir aussi

Concepts

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