Partager via

Procédure pas à pas : tri simple pour le contrôle serveur Web GridView

  • Article

Mise à jour : novembre 2007

Vous pouvez utiliser les fonctionnalités de tri intégrées du contrôle GridView ASP.NET pour ajouter le tri sur une seule colonne à vos données sans requérir de codage.

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

  • activer les fonctionnalités de tri intégrées du contrôle GridView.

Composants requis

Pour exécuter cette procédure pas à pas, vous avez besoin des éléments suivants :

  • Microsoft Visual Web Developer (Visual Studio).

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

  • Nom d'utilisateur et mot de passe d'un compte SQL Server qui a accès à la base de données Northwind.

  • 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 les composants MDAC déjà installés sur votre ordinateur. Pour plus d'informations, consultez « Microsoft Data Access Components (MDAC) Installation » dans MSDN Library.

Création du site et de la page Web

Créez un site 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, sélectionnez 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 du dossier C:\SitesWeb\TriSimple.

  5. Dans la liste Langage, cliquez sur Visual Basic ou Visual C#.

  6. Cliquez sur OK.

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

Affichage de données dans le contrôle GridView

Dans cette section, vous ajouterez un contrôle GridView à la page et le configurerez pour afficher les données de la table Customers de la base de données Northwind.

Pour afficher des données dans le contrôle GridView

  1. Basculez vers le fichier Default.aspx ou ouvrez-le.

  2. Basculez en mode Design.

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

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

    L'AssistantConfiguration de source de données s'affiche.

  5. 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 et d'autres bases de données compatibles OLEDB.

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

  7. Cliquez sur OK.

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

  8. Cliquez sur Nouvelle connexion.

    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.

  9. Dans la zone Nom du serveur, entrez le nom de votre ordinateur SQL Server.

  10. Dans la section Connexion au serveur, sélectionnez l'option appropriée pour votre configuration SQL Server (authentification Windows ou ID et mot de passe spécifiques).

  11. Si nécessaire, entrez un nom d'utilisateur et un mot de passe.

  12. Dans la zone Sélectionner ou entrer un nom de base de données, sélectionnez Northwind.

  13. Cliquez sur le bouton Tester la connexion pour tester la connexion. Lorsque vous êtes sûr que la connexion a réussi, cliquez sur OK.

    Vous revenez à l'Assistant Configurer la source de données - SqlDataSource1, dans lequel les informations de connexion sont fournies.

  14. 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 est plus sécurisé que le stockage dans la page.

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

  15. 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 affiche une page où vous pouvez spécifier les données à récupérer à partir de la base de données.

  16. Sous Spécifiez les colonnes d'une table ou d'une vue, dans la liste déroulante Nom, sélectionnez Customers.

  17. 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 (clauses WHERE) et d'autres options de requête SQL. Pour cette procédure pas à pas, vous créerez une instruction unique sans options de sélection ou de tri.

  18. Cliquez sur Suivant.

  19. Cliquez sur Tester la requête pour vous assurer de récupérer les données que vous souhaitez.

  20. Cliquez sur Terminer.

    L'Assistant crée un contrôle SqlDataSource et l'ajoute à la page. Le contrôle GridView que vous avez ajouté précédemment est lié au contrôle SqlDataSource. Si vous affichez les propriétés pour le contrôle SqlDataSource, vous verrez que l'Assistant a créé des valeurs pour les propriétés ConnectionString et SelectQuery.

  21. Cliquez avec le bouton droit sur le contrôle GridView, cliquez sur Afficher la balise active, puis, dans le menu Tâches GridView, cliquez sur Activer le tri.

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

Vous pouvez à présent tester la page.

Pour tester la page

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

    Le contrôle GridView est affiché avec les colonnes CustomerID, CompanyName et Ville.

  2. Cliquez sur un en-tête de colonne pour trier en fonction du contenu de cette colonne.

  3. Cliquez de nouveau sur une colonne pour basculer entre l'ordre de tri croissant et décroissant.

Étapes suivantes

Envisagez d'activer également le tri multicolonne pour un contrôle GridView. Pour plus d'informations, consultez Tri des données dans un contrôle serveur Web GridView.

Voir aussi

Concepts

Tri des données dans un contrôle serveur Web GridView

Référence

Vue d'ensemble du contrôle serveur Web GridView