Exporter (0) Imprimer
Développer tout
Développer Réduire

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

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.

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

  • Visual Studio ou Visual Web Developer Express installé sur votre ordinateur.

    RemarqueRemarque

    Si vous utilisez Visual Studio, la procédure pas à pas suppose que vous avez sélectionné la collection de paramètres Développement Web lors du premier démarrage de Visual Studio. Pour plus d'informations, consultez Comment : sélectionner les paramètres de l'environnement de développement Web.

  • SQL Server Express. Par défaut, il est installé avec Visual Studio ou Visual Web Developer Express. Si SQL Server est installé, vous pouvez l'utiliser, mais vous devrez apporter de légères modifications à certaines des 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.

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 Studio, par exemple), vous pouvez utiliser ce dernier et passer à la section suivante. Sinon, créez un site et une page Web.

Cette procédure pas à pas utilise un projet de site Web. Vous pouvez utiliser un projet d'application Web à la place. Pour plus d'informations sur ce qui différencie ces types de projets Web, consultez Projets d'application Web et projets de site Web.

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

  1. Ouvrez Visual Studio ou Visual Web Developer Express.

  2. Dans le menu Fichier, cliquez sur Nouveau site Web.

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

  3. Sous Modèles installés, cliquez sur Visual Basic ou VisualC#, puis sélectionnez Site Web ASP.NET.

  4. Dans la zone EmplacementWeb, sélectionnez Système de fichiers, puis 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.

  5. Cliquez sur OK.

    Visual Studio crée un projet de site Web qui inclut des fonctionnalités prégénérées pour la disposition (page maître, pages de contenu About.aspx et Default.aspx et feuille de style en cascade), pour Ajax (fichiers de script client) et pour l'authentification (appartenance d'ASP.NET).

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

    RemarqueRemarque

    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. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le projet, puis sélectionnez Ajouter un nouvel élément.

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

  5. Sous Modèles installés, sélectionnez Visual Basic ou Visual C#, puis Web Form.

  6. Entrez Sample.aspx comme nom pour la nouvelle page Web, puis cliquez sur Ajouter.

  7. Basculez en mode Design.

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

    Contrôle ListView
  9. À 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.

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

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

    Assistant Configuration de source de données
  12. Cliquez sur OK.

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

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

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

  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. Sélectionnez l'option Spécifiez une instruction SQL personnalisée ou une procédure stockée.

    Configuration de l'instruction Select
    RemarqueRemarque

    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.

  17. Cliquez sur Suivant.

  18. À 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.

    RemarqueRemarque

    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.

  19. Cliquez sur Suivant.

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

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

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

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

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

  24. Sélectionnez Activer la pagination.

    RemarqueRemarque

    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.

    Configuration de ListView
  25. Cliquez sur OK.

    Contrôle ListView

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.

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, basculez en mode Source.

  2. De l'onglet Standard de la Boîte à outils, faites glisser deux contrôles Button et déposez-les après l'élément table qui se trouve dans l'élément LayoutTemplate.

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

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

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.

Ajouts de la communauté

AJOUTER
Afficher:
© 2014 Microsoft