Pagination et tri des données des rapports (VB)

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" AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False" runat="server">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
            SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
            SortExpression="CategoryName" ReadOnly="True" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
            SortExpression="SupplierName" ReadOnly="True" />
        <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 l’est la pagination par défaut). Par conséquent, la pagination par défaut peut être le choix idéal pour les petits sites web à faible trafic ou lors de la pagination via des jeux de résultats relativement petits, car elle 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. Toutefois, si 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, ajoutez 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 Sub Products_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) _
    Handles Products.DataBound
    PagingInformation.Text = String.Format("You are viewing page {0} of {1}...", _
        Products.PageIndex + 1, Products.PageCount)
End Sub

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 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 des 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 déroulante. Commencez par ajouter un DropDownList au 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 i As Integer = 0 To Products.PageCount - 1
    ' Add the new ListItem
    Dim pageListItem As New ListItem(String.Concat("Page ", i + 1), i.ToString())
    PageList.Items.Add(pageListItem)
    ' select the current item, if needed
    If i = Products.PageIndex Then
        pageListItem.Selected = True
    End If
Next

Ce code commence par effacer les éléments de la PageList liste déroulante. 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 créer à nouveau les numéros de page et faire sélectionner par défaut celui qui correspond au GridView PageIndex actuel. Pour ce faire, nous avons une boucle comprise entre 0 et , en ajoutant un nouveau ListItem dans chaque itération et en définissant sa Selected propriété sur true si l’index d’itération actuel est égal à PageCount - 1la propriété GridView.PageIndex

Enfin, nous devons créer un gestionnaire d’événements pour l’événement DropDownList s, 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 la liste déroulante dans le Designer, puis ajoutez le code suivant :

Protected Sub PageList_SelectedIndexChanged(sender As Object, e As System.EventArgs) _
    Handles PageList.SelectedIndexChanged
        ' Jump to the specified page
        Products.PageIndex = Convert.ToInt32(PageList.SelectedValue)
End Sub

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

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

É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 simplement case activée l’option Activer le tri à partir de la balise intelligente de GridView (qui définit la propriété de AllowSorting GridView sur true). Cela restitue chacun des en-têtes des champs GridView en tant que LinkButtons qui, une fois cliqués, provoquent une publication 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.

Notes

Si vous utilisez une couche d’accès aux données personnalisée plutôt qu’un DataSet typé, il se peut que vous n’ayez pas d’option Activer le tri dans la balise active de GridView. Seuls les GridViews liés à des 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 du tri prête à l’emploi, car le ADO.NET DataTable fournit une Sort méthode qui, lorsqu’il est appelé, 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 logique métier, qui peut trier les données ou faire trier les données par le DAL. Nous allons découvrir comment trier les données dans les couches logique métier et d’accès aux données dans un prochain tutoriel.

Les linkButtons de tri sont rendus sous forme de liens hypertexte HTML, dont les couleurs actuelles (bleu pour un lien non visuel et rouge foncé pour un lien visité) s’opposent à 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 avoir cliqué sur le lien d’en-tête du champ Price.

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 vous cliquez sur le lien d’en-tête de tri de ce champ. GridView a également une SortExpression propriété. Quand un en-tête de tri LinkButton est cliqué, GridView affecte la valeur de SortExpression ce champ à sa SortExpression propriété. Ensuite, les données sont récupérées à 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 tri de GridView se déclenche
2. La propriété de GridView est SortExpression définie sur le SortExpression du 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 des s 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 pour 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 résultat 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 ObjetDataSource à GridView via la liste déroulante de la balise intelligente de 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 s SortExpression a la ProductNamevaleur , comme indiqué dans le balisage déclaratif suivant :

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

Un champ peut être configuré pour qu’il ne soit pas triable en supprimant 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é BoundField s SortExpression peut être supprimée du balisage déclaratif ou via la boîte de dialogue Champs (accessible en cliquant sur le lien Modifier les colonnes dans la balise intelligente 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 BoundField UnitPrice , l’en-tête est rendu 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 programmatique du GridView

Vous pouvez également trier le contenu du GridView par programmation à l’aide de la méthode GridView sSort. Transmettez simplement la SortExpression valeur à trier avec ( SortDirectionAscending ou Descending), et les données gridView seront triées à 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 simplement que les produits les plus bas prix. Cependant, nous voulons les encourager à acheter les produits les plus chers, donc nous aimerions qu’ils soient en mesure de 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 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 Sub SortPriceDescending_Click(sender As Object, e As System.EventArgs) _
    Handles SortPriceDescending.Click
        'Sort by UnitPrice in descending order
        Products.Sort("UnitPrice", SortDirection.Descending)
End Sub

En cliquant sur ce bouton, l’utilisateur accède à la première page avec les produits triés par prix, du plus cher au moins cher (voir 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, qui étaient aussi faciles 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éploie :

1. Une publication 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 par ObjectDataSource
4. L’événement 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, davantage d’efforts doivent être déployés 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 Heures. Il est accessible à l’adressemitchell@4GuysFromRolla.com . ou via son blog, qui peut être trouvé à l’adresse http://ScottOnWriting.NET.

PrécédentSuivant