Procédure pas à pas : affichage, pagination et tri de données à l'aide du contrôle serveur Web ListView

Mise à jour : novembre 2007

Dans cette procédure pas à pas, vous allez utiliser le contrôle ListView afin d'afficher des données d'une source de données au format de votre choix à l'aide de modèles. Les modèles vous permettent de contrôler entièrement la disposition et l'apparence des données dans le contrôle. Le contrôle ListView prend automatiquement en charge les opérations d'édition, d'insertion et de suppression, ainsi que les fonctionnalités de tri et de pagination.

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

• Utilisation du contrôle ListView pour afficher des données d'une base de données.

• Ajout de la fonctionnalité de pagination au contrôle ListView.

• Ajout de la fonctionnalité de tri au 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.

• SQL Server Express Edition. Si vous disposez de SQL Server, vous pouvez l'utiliser, mais vous devrez apporter de légères modifications à certaines procédures.

• Base de données AdventureWorks, installée sur votre ordinateur. 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 dédié à SQL Server.

• Nom d'utilisateur et mot de passe pour un compte SQL Server ayant accès à la base de données AdventureWorks.

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

1. Ouvrez Visual Studio 2008 ou Visual Web Developer 2008 Express.

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 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\DisplayData.

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

6. Cliquez sur OK.

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

Affichage et pagination des données dans le contrôle ListView

Pour afficher des données sur une page Web ASP.NET, vous devez disposer des éléments suivants :

• Une connexion à une source de données (telle qu'une base de données) Dans la procédure suivante, vous allez créer une connexion à la base de données SQL Server AdventureWorks.

• Un contrôle de source de données dans la page qui interagit avec la source de données (la base de données) pour lire et écrire des données. Dans cette procédure pas à pas, vous allez utiliser un contrôle SqlDataSource qui interagit avec la base de données SQL Server AdventureWorks.

• Un contrôle sur la page pour afficher les données. Dans la procédure suivante, vous allez afficher des données dans un contrôle ListView, qui obtient ses données du contrôle SqlDataSource.

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

1. 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 sur Ajouter le dossier ASP.NET et enfin sur App_Data.

2. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier App_Data, puis sur Ajouter un élément existant.

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

3. Entrez l'emplacement du 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.

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

5. Passez en mode Design.

6. À partir de l'onglet Données de la Boîte à outils, faites glisser un contrôle ListView sur la page.

   

7. À partir du menu Tâches ListView, dans la liste déroulante Choisirla source de données, cliquez sur <Nouvelle source de données...>.

   L'Assistant Configuration de source de données s'affiche.

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

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

   

10. Cliquez sur OK.

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

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

12. Cliquez sur Suivant.

    L'Assistant affiche une page où vous pouvez spécifier que vous souhaitez 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.

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

14. Sélectionnez l'option Spécifiez une instruction SQL personnalisée ou une procédure stockée.

    

    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.

15. Cliquez sur Suivant.

16. À la page Définir des instructions personnalisées ou des procédures stockées, entrez la requête SQL suivante qui récupère des données de contact de la base de données AdventureWorks.

    SELECT  ContactID, FirstName, LastName, EmailAddress
    FROM    Person.Contact
    

    Vous pouvez également cliquer sur Générateur de requêtes et utiliser la fenêtre Générateur de requêtes pour créer une requête puis la valider à l'aide du bouton Exécuter la requête.

    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 allez créer une instruction simple sans critères de sélection ou de tri.

17. Cliquez sur Suivant.

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

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

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

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

21. Dans le menu Tâches courantes ListView, cliquez sur Configurer ListView.

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

22. Sélectionnez Activer la pagination.

    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.

    L'Assistant crée les modèles pour le contrôle ListView, selon les colonnes dans la requête. Vous pouvez personnaliser la disposition en modifiant les modèles qui contiennent les éléments de disposition, les contrôles et les expressions de liaison.

    

23. Cliquez sur OK.

    

Avant de continuer, vous pouvez tester le contrôle ListView.

Pour tester le contrôle ListView

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

   Le contrôle ListView s'affiche et présente les colonnes ContactID, FirstName, LastName et EmailAddress.

2. Cliquez sur les boutons Premier, Précédent, Suivant et Dernier en bas de page pour naviguer dans les données.

3. Lorsque vous avez terminé, fermez le navigateur.

Ajout de la fonction de tri au contrôle ListView

Vous allez maintenant ajouter la fonction de tri au contrôle ListView. Vous pouvez proposer cette fonction en ajoutant un bouton au contrôle ListView et en configurant ce bouton.

Pour ajouter la fonction de tri au contrôle ListView

1. Dans le fichier Default.aspx, cliquez avec le bouton droit sur le contrôle ListView, puis cliquez sur Afficher la balise active.

2. À partir du menu Tâches courantes ListView, dans la liste Affichage actuel, sélectionnez une vue pour modifier le modèle LayoutTemplate, par exemple ItemTemplate.

   Remarque :
   Il n'existe aucune vue spécifique pour la modification du modèle LayoutTemplate. Vous pouvez donc modifier le modèle dans n'importe quelle vue de la liste Affichage actuel, à l'exception de la Vue au moment de l'exécution et de la vue EmptyDataTemplate.

3. Dans l'onglet Standard de la Boîte à outils, faites glisser deux contrôles Button en bas du contrôle, au niveau des contrôles de pagination.

4. Dans le Fenêtre Propriétés, modifiez les propriétés des boutons comme suit :

   • Pour le premier bouton, affectez à la propriété Text la valeur "Trier par prénom", à la propriété CommandName la valeur "Trier" et à la propriété CommandArgument la valeur "FirstName".

   • Pour le deuxième bouton, affectez à la propriété Text la valeur "Trier par nom", à la propriété CommandName la valeur "Trier" et à la propriété CommandArgument la valeur "LastName".

   Les propriétés CommandArgument du bouton ont pour valeur une expression de tri. Pour les données de base de données, il s'agit généralement du nom d'une colonne.

5. Enregistrez la page.

Vous pouvez maintenant tester la page à nouveau.

Pour tester le tri

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

2. Cliquez sur les boutons Trier par prénom et Trier par nom pour trier les données de différentes façons.

3. Cliquez sur un bouton à plusieurs reprises pour basculer de l'ordre de tri croissant à l'ordre de tri décroissant et inversement.

Étapes suivantes

Cette procédure pas à pas vous a montré les étapes de base pour utiliser un contrôle ListView afin d'afficher, de paginer et de trier des enregistrements de données avec l'une des dispositions fournies dans le contrôle. Vous pouvez expérimenter d'autres fonctionnalités du contrôle ListView et explorer des scénarios différents. Par exemple, vous pouvez modifier, supprimer et insérer des enregistrements. Pour plus d'informations, consultez Procédure pas à pas : modification de données à l'aide du contrôle serveur Web ListView.

Voir aussi

Tâches

Comment : sécuriser des chaînes de connexion lors de l'utilisation de contrôles de source de données

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

Concepts

Vue d'ensemble du contrôle serveur Web ListView