Pagination et tri des données des rapports (C#)

par Scott Mitchell

Télécharger le PDF

La pagination et le tri sont deux fonctionnalités très courantes lors de l’affichage de données dans une application en ligne. Dans ce tutoriel, nous allons commencer par ajouter le tri et la pagination à nos rapports, sur lesquels nous allons ensuite nous appuyer dans les prochains didacticiels.

Présentation

La pagination et le tri sont deux fonctionnalités très courantes lors de l’affichage de données dans une application en ligne. Par exemple, lorsque vous recherchez ASP.NET livres dans un magasin de livres en ligne, il peut y avoir des centaines de ces livres, mais le rapport répertoriant les résultats de recherche répertorie seulement dix correspondances par page. En outre, les résultats peuvent être triés par titre, prix, nombre de pages, nom de l’auteur, etc. Bien que les 23 précédents didacticiels aient examiné comment créer divers rapports, y compris les interfaces qui permettent d’ajouter, de modifier et de supprimer des données, nous n’avons pas examiné comment trier des données et les seuls exemples de pagination que nous avons vus ont été avec les contrôles DetailsView et FormView.

Dans ce tutoriel, nous allons voir comment ajouter le tri et la pagination à nos rapports, ce qui peut être accompli en cochant simplement quelques cases à cocher. Malheureusement, cette implémentation simpliste présente ses inconvénients que l’interface de tri laisse un peu à désirer et les routines de pagination ne sont pas conçues pour paginer efficacement par le biais de jeux de résultats volumineux. Les didacticiels futurs découvriront comment surmonter les limitations des solutions de pagination et de tri prêtes à l’emploi.

Étape 1 : Ajout des pages web du didacticiel de pagination et de tri

Avant de commencer ce tutoriel, nous allons commencer par prendre un moment pour ajouter les pages ASP.NET dont nous aurons besoin pour ce didacticiel et les trois suivants. Commencez par créer un dossier dans le projet nommé PagingAndSorting. Ensuite, ajoutez les cinq pages ASP.NET suivantes à ce dossier, avec toutes ces pages configurées pour utiliser la page Site.mastermaître :

• Default.aspx
• SimplePagingSorting.aspx
• EfficientPaging.aspx
• SortParameter.aspx
• CustomSortingUI.aspx

Figure 1 : Créer un dossier PagingAndSorting et ajouter les pages ASP.NET du didacticiel

Ensuite, ouvrez la Default.aspx page et faites glisser le SectionLevelTutorialListing.ascx contrôle d'utilisateur du UserControls dossier sur la surface de conception. Ce contrôle utilisateur, que nous avons créé dans le didacticiel Pages Maîtres et Navigation du Site, énumère la carte de site et affiche ces didacticiels dans la section actuelle sous forme de liste à puces.

Figure 2 : Ajouter le contrôle utilisateur SectionLevelTutorialListing.ascx à Default.aspx

Afin que la liste à puces présente les tutoriels de pagination et de tri que nous allons créer, nous devons les ajouter au plan du site. Ouvrez le Web.sitemap fichier et ajoutez le balisage suivant après la modification, l’insertion et la suppression du balisage de nœud de carte de site :

<siteMapNode title="Paging and Sorting" url="~/PagingAndSorting/Default.aspx"
    description="Samples of Reports that Provide Paging and Sorting Capabilities">
    <siteMapNode url="~/PagingAndSorting/SimplePagingSorting.aspx"
        title="Simple Paging & Sorting Examples"
        description="Examines how to add simple paging and sorting support." />
    <siteMapNode url="~/PagingAndSorting/EfficientPaging.aspx"
        title="Efficiently Paging Through Large Result Sets"
        description="Learn how to efficiently page through large result sets." />
    <siteMapNode url="~/PagingAndSorting/SortParameter.aspx"
        title="Sorting Data at the BLL or DAL"
        description="Illustrates how to perform sorting logic in the Business Logic
        Layer or Data Access Layer." />
    <siteMapNode url="~/PagingAndSorting/CustomSortingUI.aspx"
        title="Customizing the Sorting User Interface"
        description="Learn how to customize and improve the sorting user interface." />
</siteMapNode>

Figure 3 : Mettre à jour la carte de site pour inclure les nouvelles pages de ASP.NET

Étape 2 : affichage des informations sur le produit dans un GridView

Avant d’implémenter réellement des fonctionnalités de pagination et de tri, nous allons d’abord créer un GridView non triable et non paginable standard qui répertorie les informations sur le produit. Il s’agit d’une tâche que nous avons effectuée plusieurs fois avant tout au long de cette série de tutoriels afin que ces étapes soient familières. Commencez par ouvrir la SimplePagingSorting.aspx page et faites glisser un contrôle GridView de la boîte à outils sur le Concepteur, en définissant sa propriété ID à Products. Ensuite, créez un ObjectDataSource qui utilise la méthode de la classe ProductsBLL pour restituer toutes les informations sur le produit.

Figure 4 : Récupérer des informations sur tous les produits à l’aide de la méthode GetProducts()

Étant donné que ce rapport est un rapport en lecture seule, il n’est pas nécessaire de mapper les méthodes de l'objet ObjectDataSource Insert(), Update() ou Delete() aux méthodes correspondantes ProductsBLL ; par conséquent, choisissez (Aucun) dans la liste déroulante pour les onglets UPDATE, INSERT et DELETE.

Figure 5 : Choisir l’option (Aucun) dans la liste Drop-Down sous les onglets UPDATE, INSERT et DELETE

Ensuite, personnalisons les champs GridView afin que seuls les noms de produits, fournisseurs, catégories, prix et états supprimés soient affichés. En outre, n’hésitez pas à apporter des modifications de mise en forme au niveau du champ, telles que l’ajustement des HeaderText propriétés ou la mise en forme du prix en tant que devise. Après ces modifications, le balisage déclaratif de GridView doit ressembler à ce qui suit :

<asp:GridView ID="Products" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
            SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
            ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
            ReadOnly="True" SortExpression="SupplierName" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price"
            SortExpression="UnitPrice" DataFormatString="{0:C}"
            HtmlEncode="False" />
        <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued"
            SortExpression="Discontinued" />
    </Columns>
</asp:GridView>

La figure 6 montre notre progression jusqu’à présent lorsqu’elle est consultée via un navigateur. Notez que la page répertorie tous les produits d’un écran, affichant le nom, la catégorie, le fournisseur, le prix et l’état de chaque produit supprimé.

Figure 6 : Chacun des produits est répertorié (cliquez pour afficher l’image de taille complète)

Étape 3 : Ajout de la prise en charge de la pagination

La liste de tous les produits sur un écran peut entraîner une surcharge d’informations pour l’utilisateur qui parcoure les données. Pour aider à rendre les résultats plus gérables, nous pouvons diviser les données en pages plus petites de données et permettre à l’utilisateur de parcourir les données d’une page à la fois. Pour ce faire, cochez simplement la case Activer la pagination à partir de la balise intelligente de GridView (cette action définit la propriété AllowPaging de GridView sur true).

Figure 7 : Cochez la case Activer la pagination pour ajouter la prise en charge de la pagination (cliquez pour afficher l’image de taille complète)

L’activation de la pagination limite le nombre d’enregistrements affichés par page et ajoute une interface de pagination à GridView. L’interface de pagination par défaut, illustrée à la figure 7, est une série de numéros de page, ce qui permet à l’utilisateur de naviguer rapidement d’une page de données vers une autre. Cette interface de pagination doit être familière, comme nous l’avons vu lors de l’ajout de la prise en charge de la pagination aux contrôles DetailsView et FormView dans les didacticiels précédents.

Les contrôles DetailsView et FormView n’affichent qu’un seul enregistrement par page. GridView consulte toutefois sa PageSize propriété pour déterminer le nombre d’enregistrements à afficher par page (cette propriété prend par défaut la valeur 10).

Cette interface de pagination gridView, DetailsView et FormView peut être personnalisée à l’aide des propriétés suivantes :

• PagerStyleindique les informations de style pour l’interface de pagination ; peut spécifier des paramètres tels que BackColor, , ForeColorCssClass, HorizontalAlign, et ainsi de suite.

• PagerSettings contient une envie de propriétés qui peuvent personnaliser les fonctionnalités de l’interface de pagination ; PageButtonCount indique le nombre maximal de numéros de page numériques affichés dans l’interface de pagination (la valeur par défaut est 10) ; la Mode propriété indique le fonctionnement de l’interface de pagination et peut être définie sur :

  • NextPrevious affiche des boutons Suivant et Précédent, ce qui permet à l’utilisateur d’avancer vers l’avant ou vers l’arrière d’une page à la fois
  • NextPreviousFirstLast en plus des boutons Suivant et Précédent, les boutons Premier et Dernier sont également inclus, ce qui permet à l’utilisateur de passer rapidement à la première ou dernière page de données
  • Numeric affiche une série de numéros de page, ce qui permet à l’utilisateur de passer immédiatement à n’importe quelle page
  • NumericFirstLast en plus des numéros de page, inclut les boutons Premier et Dernier, ce qui permet à l’utilisateur de passer rapidement à la première ou dernière page de données ; Les boutons First/Last sont affichés uniquement si tous les numéros de page numériques ne peuvent pas correspondre

De plus, GridView, DetailsView et FormView offrent les propriétés PageIndex et PageCount, qui indiquent respectivement la page en cours d'affichage et le nombre total de pages de données. La PageIndex propriété est indexée à partir de 0, ce qui signifie que lors de l’affichage de la première page de données PageIndex est égale à 0. PageCount, d’autre part, commence à compter à 1, ce qui signifie que PageIndex cela est limité aux valeurs comprises entre 0 et PageCount - 1.

Prenons un moment pour améliorer l’apparence par défaut de notre interface de pagination de GridView. Plus précisément, laissez l’interface de pagination alignée à droite avec un arrière-plan gris clair. Au lieu de définir ces propriétés directement via la propriété GridView PagerStyle , nous allons créer une classe CSS dans Styles.css nommée PagerRowStyle , puis affecter la PagerStyle propriété s CssClass via notre thème. Commencez par ouvrir Styles.css et ajouter la définition de classe CSS suivante :

.PagerRowStyle
{
    background-color: #ddd;
    text-align: right;
}

Ensuite, ouvrez le GridView.skin fichier dans le DataWebControls dossier dans le App_Themes dossier. Comme nous l’avons vu dans le didacticiel Pages maîtres et Navigation de site , les fichiers Skin peuvent être utilisés pour spécifier les valeurs de propriété par défaut d’un contrôle Web. Par conséquent, augmentez les paramètres existants pour inclure la définition de la propriété PagerStyleCssClassPagerRowStyle. Nous allons également configurer l’interface de pagination pour afficher au maximum cinq boutons de page numériques à l’aide de l’interface NumericFirstLast de pagination.

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedRowStyle CssClass="SelectedRowStyle" />
   <PagerStyle CssClass="PagerRowStyle" />
   <PagerSettings Mode="NumericFirstLast" PageButtonCount="5" />
</asp:GridView>

L'expérience utilisateur de pagination

La figure 8 montre la page web lorsqu’elle est visitée via un navigateur une fois que la case à cocher Activer la pagination de GridView a été cochée et que les PagerStylePagerSettings configurations ont été effectuées via le GridView.skin fichier. Notez que seulement dix enregistrements sont affichés et que l’interface de pagination indique que nous affichons la première page de données.

Figure 8 : Avec la pagination activée, seul un sous-ensemble des enregistrements est affiché à la fois (cliquez pour afficher l’image de taille complète)

Lorsque l’utilisateur clique sur l’un des numéros de page dans l’interface de pagination, un postback se produit immédiatement et la page se recharge en montrant les enregistrements de la page demandée. La figure 9 montre les résultats après avoir choisi d’afficher la page finale des données. Notez que la page finale n’a qu’un seul enregistrement ; cela est dû au fait qu’il y a 81 enregistrements au total, ce qui entraîne huit pages de 10 enregistrements par page plus une page avec un enregistrement unique.

Figure 9 : Cliquer sur un numéro de page provoque une publication et affiche le sous-ensemble approprié d’enregistrements (cliquez pour afficher l’image de taille complète)

Flux de travail de pagination de Server-Side

Lorsque l’utilisateur final clique sur un bouton dans l’interface de pagination, un postback se produit et le flux de travail côté serveur suivant commence :

1. L’événement GridView (ou DetailsView ou FormView) PageIndexChanging se déclenche
2. ObjectDataSource redemande toutes les données de la BLL ; les valeurs des propriétés PageIndex et PageSize du GridView sont utilisées pour déterminer quels enregistrements retournés par la BLL doivent être affichés dans le GridView.
3. L’événement PageIndexChanged GridView se déclenche

À l’étape 2, ObjectDataSource demande à nouveau toutes les données de sa source de données. Ce style de pagination est couramment appelé « pagination par défaut », car il s'agit du comportement de pagination utilisé par défaut lorsque la propriété AllowPaging est définie sur true. Avec la pagination par défaut, le contrôle Web de données récupère naïvement tous les enregistrements pour chaque page de données, alors que seul un sous-ensemble de ces enregistrements est effectivement rendu dans le code HTML envoyé au navigateur. À moins que les données de base de données ne soient mises en cache par la BLL ou ObjectDataSource, la pagination par défaut n’est pas utilisable pour les jeux de résultats suffisamment volumineux ou pour les applications web avec de nombreux utilisateurs simultanés.

Dans le tutoriel suivant, nous allons examiner comment implémenter la pagination personnalisée. Avec la pagination personnalisée, vous pouvez indiquer spécifiquement à ObjectDataSource de récupérer uniquement l’ensemble précis d’enregistrements nécessaires pour la page de données demandée. Comme vous pouvez l’imaginer, la pagination personnalisée améliore considérablement l’efficacité de la pagination par le biais de jeux de résultats volumineux.

Remarque

Bien que la pagination par défaut ne soit pas appropriée lors de la pagination par le biais de jeux de résultats suffisamment volumineux ou pour les sites avec de nombreux utilisateurs simultanés, réalisez que la pagination personnalisée nécessite davantage de modifications et d’efforts pour implémenter et n’est pas aussi simple que de cocher une case à cocher (comme la pagination par défaut). Par conséquent, la pagination par défaut peut être le choix idéal pour les sites web à faible trafic ou lors de la pagination via des jeux de résultats relativement petits, car il est beaucoup plus facile et plus rapide d’implémenter.

Par exemple, si nous savons que nous n’aurons jamais plus de 100 produits dans notre base de données, le gain minimal de performances apprécié par la pagination personnalisée est probablement compensé par l’effort nécessaire pour l’implémenter. Toutefois, si nous pouvons avoir un jour des milliers ou des dizaines de milliers de produits, ne pas implémenter la pagination personnalisée entraverait considérablement l’extensibilité de notre application.

Étape 4 : Personnalisation de l’expérience de pagination

Les contrôles web de données fournissent un certain nombre de propriétés qui peuvent être utilisées pour améliorer l’expérience de pagination de l’utilisateur. La PageCount propriété, par exemple, indique le nombre total de pages qu’il y a, tandis que la propriété indique la PageIndex page active en cours de visite et peut être définie pour déplacer rapidement un utilisateur vers une page spécifique. Pour illustrer comment utiliser ces propriétés pour améliorer l’expérience de pagination de l’utilisateur, nous allons ajouter un contrôle Web Label à notre page qui informe l’utilisateur de la page à laquelle il est actuellement invité, ainsi qu’un contrôle DropDownList qui lui permet de passer rapidement à une page donnée.

Tout d’abord, ajoutez un contrôle Web Label à votre page, définissez sa propriété ID à PagingInformation, et effacez sa propriété Text. Ensuite, créez un gestionnaire d’événements pour l’événement GridView DataBound et ajoutez le code suivant :

protected void Products_DataBound(object sender, EventArgs e)
{
    PagingInformation.Text = string.Format("You are viewing page {0} of {1}...",
        Products.PageIndex + 1, Products.PageCount);
}

Ce gestionnaire d’événements attribue à la propriété PagingInformation Label s Text un message indiquant à l’utilisateur la page qu’il consulte actuellement parmi le nombre total de pages Products.PageIndex + 1 (nous ajoutons 1 à la propriété Products.PageCount car elle est indexée à partir de 0). J’ai choisi l’affectation de cette propriété Label s Text dans le DataBound gestionnaire d’événements par opposition au PageIndexChanged gestionnaire d’événements, car l’événement DataBound se déclenche chaque fois que les données sont liées à GridView, tandis que le PageIndexChanged gestionnaire d’événements se déclenche uniquement lorsque l’index de page est modifié. Lorsque le GridView est initialement lié aux données lors de la première visite de page, l'événement PageIndexChanging ne se déclenche pas (tandis que l'événement DataBound le fait).

Avec cet ajout, un message est maintenant affiché à l'utilisateur indiquant quelle page il visite et le nombre total de pages de données.

Figure 10 : Le numéro de page actuel et le nombre total de pages sont affichés (cliquez pour afficher l’image de taille complète)

En plus du contrôle Label, nous allons également ajouter un contrôle DropDownList qui répertorie les numéros de page dans GridView avec la page actuellement consultée sélectionnée. L’idée ici est que l’utilisateur peut rapidement passer de la page active à un autre en sélectionnant simplement le nouvel index de page dans la Liste déroulante. Commencez par ajouter une liste déroulante au Concepteur, en définissant sa ID propriété sur PageList et en vérifiant l’option Activer autoPostBack à partir de sa balise active.

Ensuite, revenez au gestionnaire d’événements DataBound et ajoutez le code suivant :

// Clear out all of the items in the DropDownList
PageList.Items.Clear();
// Add a ListItem for each page
for (int i = 0; i < Products.PageCount; i++)
{
    // Add the new ListItem
    ListItem pageListItem = new ListItem(string.Concat("Page ", i + 1), i.ToString());
    PageList.Items.Add(pageListItem);
    // select the current item, if needed
    if (i == Products.PageIndex)
        pageListItem.Selected = true;
}

Ce code commence par effacer les éléments de la PageList liste déroulante. Cela peut sembler superflu, car on ne s’attendrait pas à ce que le nombre de pages change, mais d’autres utilisateurs peuvent utiliser le système simultanément, en ajoutant ou en supprimant des enregistrements de la Products table. Ces insertions ou suppressions peuvent modifier le nombre de pages de données.

Ensuite, nous devons recréer les numéros de page et rendre celui qui correspond à l'actuel GridView PageIndex sélectionné par défaut. Nous réalisons ceci avec une boucle de 0 à PageCount - 1, en ajoutant un nouveau ListItem à chaque itération et en définissant sa propriété Selected sur true si l'index d'itération actuel est égal à la propriété PageIndex de GridView.

Enfin, nous devons créer un gestionnaire d’événements pour l’événement DropDownList SelectedIndexChanged , qui se déclenche chaque fois que l’utilisateur sélectionne un élément différent dans la liste. Pour créer ce gestionnaire d’événements, double-cliquez simplement sur dropDownList dans le Concepteur, puis ajoutez le code suivant :

protected void PageList_SelectedIndexChanged(object sender, EventArgs e)
{
    // Jump to the specified page
    Products.PageIndex = Convert.ToInt32(PageList.SelectedValue);
}

Comme le montre la figure 11, la modification de la propriété GridView PageIndex entraîne le rebond des données vers GridView. Dans le gestionnaire d’événements DataBound GridView, la liste déroulante ListItem appropriée est sélectionnée.

Figure 11 : L’utilisateur est automatiquement dirigé vers la sixième page lors de la sélection de la page 6 Drop-Down élément de liste (cliquez pour afficher l’image de taille complète)

Étape 5 : Ajout de la prise en charge du tri Bi-Directional

L’ajout de la prise en charge du tri bidirectionnel est aussi simple que l’ajout de la prise en charge de la pagination : il suffit de vérifier l’option Activer le tri à partir de la balise intelligente de GridView (ce qui définit la propriété de GridView sur AllowSortingtrue). Cela restitue chacun des en-têtes des champs GridView sous forme de LinkButtons qui, lorsqu'on clique dessus, provoquent un renvoi et retournent les données triées par la colonne cliquée dans l’ordre croissant. Cliquer à nouveau sur le même en-tête LinkButton trie à nouveau les données dans l’ordre décroissant.

Remarque

Si vous utilisez une couche d'accès aux données personnalisée plutôt qu'un DataSet typé, vous pouvez ne pas avoir l'option "Activer le tri" dans le smart tag de GridView. Seuls les GridViews liés aux sources de données qui prennent en charge le tri en mode natif ont cette case à cocher disponible. Le DataSet typé fournit une prise en charge de tri prête à l’emploi, car l'ADO.NET DataTable fournit une Sort méthode qui, lorsqu'elle est invoquée, trie les DataRows du DataTable, à l’aide des critères spécifiés.

Si votre DAL ne retourne pas d'objets qui prennent en charge le tri de manière native, vous devez configurer la ObjectDataSource pour transmettre des informations de tri à la couche de logique métier, pour qu’elle puisse soit trier les données, soit les faire trier par le DAL. Nous allons découvrir comment trier des données dans la logique métier et les couches d’accès aux données dans un didacticiel ultérieur.

Les liens LinkButtons triés sont affichés sous forme de liens hypertexte HTML dont les couleurs actuelles (bleu pour un lien non affiché et rouge foncé pour un lien visité) se heurtent à la couleur d’arrière-plan de la ligne d’en-tête. Au lieu de cela, supposons que tous les liens de ligne d’en-tête s’affichent en blanc, qu’ils aient été visités ou non. Pour ce faire, ajoutez les éléments suivants à la Styles.css classe :

.HeaderStyle a, .HeaderStyle a:visited
{
    color: White;
}

Cette syntaxe indique d’utiliser du texte blanc lors de l’affichage de ces liens hypertexte dans un élément qui utilise la classe HeaderStyle.

Après cet ajout CSS, lors de la visite de la page via un navigateur, votre écran doit ressembler à la figure 12. En particulier, la figure 12 montre les résultats après le clic sur le lien d’en-tête du champ Prix.

Figure 12 : Les résultats ont été triés par unitPrice dans l’ordre croissant (cliquez pour afficher l’image de taille complète)

Examen du flux de travail de tri

Tous les champs GridView de BoundField, CheckBoxField, TemplateField, et ainsi de suite ont une SortExpression propriété qui indique l’expression qui doit être utilisée pour trier les données lorsque le lien d’en-tête de tri de ce champ est cliqué. GridView a également une SortExpression propriété. Lorsqu’un en-tête de tri LinkButton est cliqué, GridView affecte à sa propriété SortExpression la valeur de ce champ SortExpression. Ensuite, les données sont à nouveau récupérées à partir de l'ObjectDataSource et triées en fonction de la propriété SortExpression du GridView. La liste suivante détaille la séquence d’étapes qui se passe lorsqu’un utilisateur final trie les données dans un GridView :

1. L’événement de tri de GridView se déclenche
2. La propriété GridView SortExpression est définie sur le SortExpression champ dont l’en-tête de tri LinkButton a été cliqué
3. ObjectDataSource récupère toutes les données de la BLL, puis trie les données à l’aide de GridView s SortExpression
4. La propriété GridView PageIndex est réinitialisée à 0, ce qui signifie que lors du tri, l'utilisateur est ramené à la première page de données (en supposant que la prise en charge de la pagination a été implémentée)
5. L’événement GridView Sorted est déclenché

Comme avec la pagination par défaut, l’option de tri par défaut récupère à nouveau tous les enregistrements de la BLL. Lorsque vous utilisez le tri sans pagination ou lorsque vous utilisez le tri avec la pagination par défaut, il n’existe aucun moyen de contourner cette correspondance de performances (en l’absence de mise en cache des données de base de données). Toutefois, comme nous le verrons dans un prochain tutoriel, il est possible de trier efficacement les données lors de l’utilisation de la pagination personnalisée.

Lors de la liaison d’un ObjectDataSource à GridView via la liste déroulante de la balise active GridView, chaque champ GridView a automatiquement sa SortExpression propriété affectée au nom du champ de données de la ProductsRow classe. Par exemple, l'objet BoundField ProductName est défini sur SortExpression, comme indiqué dans le balisage déclaratif suivant :

<asp:BoundField DataField="ProductName" HeaderText="Product"
    SortExpression="ProductName" />

Un champ peut être configuré afin qu’il ne soit pas triable en désactivant sa SortExpression propriété (l’affectant à une chaîne vide). Pour illustrer cela, imaginez que nous ne voulions pas laisser nos clients trier nos produits par prix. La UnitPrice propriété BoundField SortExpression peut être supprimée soit du balisage déclaratif, soit via la boîte de dialogue des Champs (accessible en cliquant sur le lien Modifier les colonnes dans le smart tag de GridView).

Figure 13 : Les résultats ont été triés par l’unitPrice dans l’ordre croissant

Une fois la SortExpression propriété supprimée pour BoundField UnitPrice , l’en-tête est affiché sous forme de texte plutôt que de lien, empêchant ainsi les utilisateurs de trier les données par prix.

Figure 14 : En supprimant la propriété SortExpression, les utilisateurs ne peuvent plus trier les produits par prix (cliquez pour afficher l’image de taille complète)

Tri du GridView par programmation

Vous pouvez également trier le contenu de GridView par programmation à l’aide de la méthode GridViewSort. Passez simplement la valeur SortExpression à trier avec SortDirection (Ascending ou Descending), et les données du GridView seront réordonnées.

Imaginez que la raison pour laquelle nous avons désactivé le tri par le UnitPrice c’était parce que nous étions inquiets que nos clients achèteraient simplement les produits les plus bas prix. Cependant, nous voulons les encourager à acheter les produits les plus chers, donc nous aimerions qu’ils puissent trier les produits par prix, mais seulement du prix le plus cher au moins.

Pour ce faire, ajoutez un contrôle Web Button à la page, définissez sa propriété ID à SortPriceDescending, et sa propriété Text à Trier par prix. Ensuite, créez un gestionnaire d’événements pour l’événement Button s Click en double-cliquant sur le contrôle Button dans le Concepteur. Ajoutez le code suivant à ce gestionnaire d’événements :

protected void SortPriceDescending_Click(object sender, EventArgs e)
{
    // Sort by UnitPrice in descending order
    Products.Sort("UnitPrice", SortDirection.Descending);
}

Cliquez sur ce bouton pour renvoyer l’utilisateur à la première page avec les produits triés par prix, du plus coûteux au moins cher (voir la figure 15).

Figure 15 : Cliquer sur le bouton pour classer les produits du plus coûteux au moins cher (Cliquez pour afficher l’image en taille réelle)

Résumé

Dans ce tutoriel, nous avons vu comment implémenter des fonctionnalités de pagination et de tri par défaut, qui étaient aussi faciles que la case à cocher ! Lorsqu’un utilisateur trie ou page des données, un flux de travail similaire se déroule :

1. Un retour s'ensuit
2. L’événement de pré-niveau du contrôle Web de données se déclenche (PageIndexChanging ou Sorting)
3. Toutes les données sont récupérées à nouveau par ObjectDataSource
4. L’événement post-niveau du contrôle Web de données se déclenche (PageIndexChanged ou Sorted)

Lors de l’implémentation de la pagination et du tri de base, vous devez exercer davantage d’efforts pour utiliser la pagination personnalisée plus efficace ou pour améliorer davantage l’interface de pagination ou de tri. Les didacticiels futurs exploreront ces rubriques.

Bonne programmation !

À propos de l’auteur

Scott Mitchell, auteur de sept livres ASP/ASP.NET et fondateur de 4GuysFromRolla.com, travaille avec les technologies Web Microsoft depuis 1998. Scott travaille en tant que consultant indépendant, formateur et écrivain. Son dernier livre est Sams Teach Yourself ASP.NET 2.0 en 24 heures. On peut le joindre à mitchell@4GuysFromRolla.com.

Prochain