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 examiner l’ajout du tri et de la pagination à nos rapports, que nous allons ensuite développer dans les prochains tutoriels.

Introduction

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, lors de la recherche de livres ASP.NET dans une librairie en ligne, il peut y en avoir des centaines, mais le rapport répertoriant les résultats de la 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 derniers tutoriels aient examiné comment créer divers rapports, y compris des interfaces qui permettent d’ajouter, de modifier et de supprimer des données, nous n’avons pas examiné comment trier les données et les seuls exemples de pagination que nous avons vus concernent 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 effectué 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 que les routines de pagination ne sont pas conçues pour la pagination efficace dans les jeux de résultats volumineux. Les prochains tutoriels exploreront 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, prenons un moment pour ajouter les ASP.NET pages 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, en les utilisant toutes pour utiliser la page Site.mastermaster :

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

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

Ensuite, ouvrez la Default.aspx page et faites glisser le SectionLevelTutorialListing.ascx contrôle utilisateur du UserControls dossier vers l’aire de conception. Ce contrôle utilisateur, que nous avons créé dans le didacticiel Pages maîtres et navigation sur le site, énumère la carte du site et affiche ces didacticiels dans la section actuelle d’une liste à puces.

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

Pour que la liste à puces affiche les didacticiels de pagination et de tri que nous allons créer, nous devons les ajouter à la carte de 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 plan 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 le plan de site pour inclure les nouvelles pages ASP.NET

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

Avant d’implémenter réellement les fonctionnalités de pagination et de tri, nous allons d’abord créer un GridView standard non triable et non paginable qui répertorie les informations sur le produit. Il s’agit d’une tâche que nous avons effectuée plusieurs fois auparavant tout au long de cette série de tutoriels. Ces étapes doivent donc être familières. Commencez par ouvrir la SimplePagingSorting.aspx page et faites glisser un contrôle GridView de la boîte à outils vers le Designer, en définissant sa ID propriété sur Products. Ensuite, créez un objet ObjectDataSource qui utilise la méthode de la classe ProductsBLL GetProducts() pour retourner 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 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 : Choisissez l’option (Aucun) dans la liste Drop-Down sous les onglets UPDATE, INSERT et DELETE

Ensuite, nous allons personnaliser les champs de GridView afin que seuls les noms des produits, les fournisseurs, les catégories, les prix et les états abandonné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 propriétés ou la HeaderText 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 dans un seul écran, en affichant le nom, la catégorie, le fournisseur, le prix et les status abandonnés de chaque produit.

Figure 6 : Chacun des produits est répertorié (cliquez pour afficher l’image en taille réelle)

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

La liste de tous les produits sur un seul écran peut entraîner une surcharge d’informations pour l’utilisateur qui parcoure les données. Pour faciliter la gestion des résultats, nous pouvons diviser les données en pages de données plus petites et permettre à l’utilisateur de parcourir les données une page à la fois. Pour ce faire, case activée simplement la case à cocher Activer la pagination à partir de la balise active de GridView (cela définit la propriété de AllowPaging 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 en taille réelle)

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 dans la figure 7, est une série de numéros de page, permettant à l’utilisateur de naviguer rapidement d’une page de données à une autre. Cette interface de pagination doit vous ê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. Toutefois, GridView consulte sa PageSize propriété pour déterminer le nombre d’enregistrements à afficher par page (cette propriété a par défaut une valeur de 10).

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

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

• PagerSettings contient une quantité 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 comment l’interface de pagination fonctionne et peut être définie sur :

  • NextPrevious affiche les boutons Suivant et Précédent, permettant à l’utilisateur d’avancer ou de reculer 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, permettant à l’utilisateur d’accéder immédiatement à n’importe quelle page
  • NumericFirstLast en plus des numéros de page, inclut des boutons Premier et Dernier, ce qui permet à l’utilisateur de passer rapidement à la première ou dernière page de données ; Les boutons Premier/Dernier s’affichent uniquement si tous les numéros de page numériques ne peuvent pas tenir

En outre, GridView, DetailsView et FormView offrent toutes les PageIndex propriétés et PageCount , qui indiquent la page active affichée et le nombre total de pages de données, respectivement. 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 égal à 0. PageCount, en revanche, commence à compter à 1, ce qui signifie que PageIndex 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 GridView. Plus précisément, nous allons aligner l’interface de pagination à droite avec un arrière-plan gris clair. Au lieu de définir ces propriétés directement par le biais de 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 sur les sites, les fichiers d’apparence 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 PagerStyle propriété s CssClass sur PagerRowStyle. En outre, nous allons 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>

Expérience utilisateur de pagination

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

Figure 8 : Lorsque la pagination est activée, seul un sous-ensemble des enregistrements est affiché à la fois (cliquez pour afficher l’image en taille réelle)

Lorsque l’utilisateur clique sur l’un des numéros de page dans l’interface de pagination, une publication s’ensuit et la page se recharge avec les enregistrements de page demandés. La figure 9 montre les résultats après avoir choisi d’afficher la dernière page de 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 donne 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 d’enregistrements approprié (cliquez pour afficher l’image en taille réelle)

Pagination du flux de travail Server-Side

Lorsque l’utilisateur final clique sur un bouton dans l’interface de pagination, une publication s’ensuit et le workflow côté serveur suivant commence :

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

À l’étape 2, ObjectDataSource demande à nouveau toutes les données de sa source de données. Ce style de pagination est communément appelé pagination par défaut, car il s’agit du comportement de pagination utilisé par défaut lors de la définition de la AllowPaging propriété sur true. Avec la pagination par défaut, le contrôle Web récupère naïvement tous les enregistrements pour chaque page de données, même si seul un sous-ensemble d’enregistrements est réellement rendu dans le code HTML envoyé au navigateur. À moins que les données de base de données ne soient mises en cache par 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 demander spécifiquement à ObjectDataSource de récupérer uniquement le jeu précis d’enregistrements nécessaire 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 via des jeux de résultats volumineux.

Notes

Bien que la pagination par défaut ne convienne pas lors de la pagination via des jeux de résultats suffisamment volumineux ou pour les sites avec de nombreux utilisateurs simultanés, sachez que la pagination personnalisée nécessite plus de modifications et d’efforts à 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 dans des jeux de résultats relativement petits, car il est beaucoup plus facile et plus rapide à implémenter.

Par exemple, si nous savons que nous n’aurons jamais plus de 100 produits dans notre base de données, le gain de performances minimal dont bénéficie la pagination personnalisée est probablement compensé par l’effort nécessaire pour l’implémenter. Si, toutefois, nous pouvons un jour avoir des milliers ou des dizaines de milliers de produits, l’implémentation de la pagination personnalisée entraverait considérablement la scalabilité 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, tandis que la PageIndex propriété indique la page 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 Label Web à notre page qui informe l’utilisateur de la page qu’il visite actuellement, ainsi qu’un contrôle DropDownList qui lui permet d’accéder rapidement à une page donnée.

Tout d’abord, ajoutez un contrôle Label Web à votre page, définissez sa ID propriété sur PagingInformation, puis effacez sa Text propriété. Ensuite, créez un gestionnaire d’événements pour l’événement GridView et DataBound 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 affecte la PagingInformation propriété Label s Text à un message informant l’utilisateur de la page qu’il visite Products.PageIndex + 1 actuellement sur le nombre total de pages Products.PageCount (nous ajoutons 1 à la Products.PageIndex propriété, car PageIndex est indexée à partir de 0). J’ai choisi la propriété Assign this 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 GridView est initialement lié aux données lors de la première visite de page, l’événement PageIndexChanging ne se déclenche pas (contrairement à l’événement DataBound ).

Avec cet ajout, un message s’affiche maintenant à l’utilisateur indiquant la page qu’il visite et le nombre total de pages de données qu’il contient.

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

En plus du contrôle Label, nous allons également ajouter un contrôle DropDownList qui répertorie les numéros de page dans le 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 à une autre en sélectionnant simplement le nouvel index de page dans la liste DropDownList. Commencez par ajouter un DropDownList à l’Designer, 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 DropDownList. Cela peut sembler superflu, car on ne s’attend pas à ce que le nombre de pages change, mais d’autres utilisateurs utilisent le système simultanément, ajoutant ou 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 avoir celui qui correspond au GridView PageIndex actuel sélectionné par défaut. Pour ce faire, nous effectuons une boucle de 0 à , en ajoutant un nouveau ListItem dans chaque itération et en affectant à sa Selected propriété la valeur true si l’index d’itération actuel est égal à PageCount - 1la propriété gridViewPageIndex.

Enfin, nous devons créer un gestionnaire d’événements pour l’événement DropDownList, qui se SelectedIndexChanged 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 Designer, 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 simple modification de la propriété de PageIndex GridView entraîne un rebond des données vers GridView. Dans le gestionnaire d’événements GridView DataBound , la liste DropDownList ListItem appropriée est sélectionnée.

Figure 11 : L’utilisateur passe automatiquement à la sixième page lors de la sélection de l’élément de liste de la page 6 Drop-Down (cliquez pour afficher l’image en taille réelle)

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

L’ajout de la prise en charge du tri bidirectionnel est aussi simple que l’ajout de la prise en charge de la pagination simplement case activée l’option Activer le tri à partir de la balise active de GridView (qui définit la propriété de AllowSorting GridView sur true). Cela affiche chacun des en-têtes des champs GridView en tant que LinkButtons qui, lorsqu’on clique dessus, provoquent une publication et retournent les données triées par la colonne cliquée dans l’ordre croissant. Cliquer sur le même en-tête LinkButton trie à nouveau les données dans l’ordre décroissant.

Notes

Si vous utilisez une couche d’accès aux données personnalisée plutôt qu’un dataset typé, vous n’avez peut-être pas d’option Activer le tri dans la balise active gridView. Cette case est disponible uniquement pour les GridViews liés aux sources de données qui prennent en charge le tri en mode natif. Le DataSet typé fournit une prise en charge du tri prête à l’emploi, car l’ADO.NET DataTable fournit une Sort méthode qui, lorsqu’elle est appelée, trie les DataRows de DataTable à l’aide des critères spécifiés.

Si votre DAL ne retourne pas d’objets qui prennent en charge le tri en mode natif, vous devez configurer ObjectDataSource pour transmettre les informations de tri à la couche de logique métier, qui peut trier les données ou faire trier les données par le DAL. Nous allons découvrir comment trier des données dans les couches d’accès aux données et logique métier dans un tutoriel ultérieur.

Les linkButtons de tri sont affichés sous forme de liens hypertexte HTML, dont les couleurs actuelles (bleu pour un lien non visuel et rouge foncé pour un lien visité) entrent en conflit avec la couleur d’arrière-plan de la ligne d’en-tête. Au lieu de cela, laissez tous les liens de ligne d’en-tête affichés 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, lorsque vous visitez la page via un navigateur, votre écran doit ressembler à la figure 12. En particulier, la figure 12 montre les résultats après un 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 en taille réelle)

Examen du flux de travail de tri

Tous les champs GridView boundField, CheckBoxField, TemplateField, etc. ont une SortExpression propriété qui indique l’expression qui doit être utilisée pour trier les données lorsque l’on clique sur le lien d’en-tête de tri de ce champ. GridView a également une SortExpression propriété . Lorsque l’utilisateur clique sur un en-tête de tri LinkButton, gridView affecte la valeur de SortExpression ce champ à sa SortExpression propriété. Ensuite, les données sont récupérées à nouveau à partir de l’ObjetDataSource et triées en fonction de la propriété gridView SortExpression . La liste suivante détaille la séquence d’étapes qui se produit lorsqu’un utilisateur final trie les données dans un GridView :

1. L’événement de tri gridView se déclenche
2. La propriété gridView est SortExpression définie sur le SortExpression du champ sur lequel 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 des éléments GridView SortExpression
4. La propriété GridView est PageIndex réinitialisée à 0, ce qui signifie que lors du tri, l’utilisateur est retourné à 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 se Sorted déclenche

Comme avec la pagination par défaut, l’option de tri par défaut récupère 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 ce niveau de performance (à moins de mettre en cache les 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 dans la ProductsRow classe . Par exemple, boundField ProductName est SortExpression défini sur ProductName, comme indiqué dans le balisage déclaratif suivant :

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

Un champ peut être configuré de sorte qu’il ne soit pas triable en effaçant sa SortExpression propriété (en 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é de SortExpression BoundField peut être supprimée du balisage déclaratif ou par le biais de la boîte de dialogue Champs (accessible en cliquant sur le lien Modifier les colonnes dans la balise active GridView).

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

Une fois la SortExpression propriété supprimée pour l’objet UnitPrice BoundField, 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 en taille réelle)

Tri du GridView par programmation

Vous pouvez également trier le contenu de GridView par programmation à l’aide de la méthode GridView.Sort Transmettez simplement la SortExpression valeur à trier avec ( SortDirectionAscending ou Descending), et les données de GridView seront triées de nouveau.

Imaginez que la raison pour laquelle nous avons désactivé le tri par le UnitPrice était parce que nous étions inquiets que nos clients n’achèteraient que les produits les moins chers. 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 Button Web à la page, définissez sa ID propriété sur SortPriceDescendinget sa Text propriété sur 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 Designer. 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 cher au moins cher (voir la figure 15).

Figure 15 : Cliquer sur le bouton Commande les produits du plus cher au moins cher (cliquer 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, toutes deux aussi simples que de cocher une case à cocher ! Lorsqu’un utilisateur trie ou effectue des pages dans des données, un flux de travail similaire se déroule :

1. Une publication s’en suit
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 par ObjectDataSource
4. L’événement de post-niveau du contrôle Web de données se déclenche (PageIndexChanged ou Sorted)

Bien que l’implémentation de la pagination et du tri de base soit un jeu d’enfant, vous devez déployer davantage d’efforts pour utiliser la pagination personnalisée plus efficace ou pour améliorer davantage l’interface de pagination ou de tri. Les prochains tutoriels exploreront ces sujets.

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 comme consultant indépendant, formateur et écrivain. Son dernier livre est Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Il est accessible à l’adressemitchell@4GuysFromRolla.com . ou via son blog, qui se trouve à l’adresse http://ScottOnWriting.NET.

Next