Partager via

Mise en forme des contrôles DataList et Repeater en fonction des données (VB)

  • Article

par Scott Mitchell

Télécharger le PDF

Dans ce tutoriel, nous allons parcourir des exemples de mise en forme de l’apparence des contrôles DataList et Repeater, soit en utilisant des fonctions de mise en forme dans des modèles, soit en gérant l’événement DataBound.

Introduction

Comme nous l’avons vu dans le tutoriel précédent, datalist offre un certain nombre de propriétés liées au style qui affectent son apparence. En particulier, nous avons vu comment affecter des classes CSS par défaut aux propriétés DataList s HeaderStyle, ItemStyle, AlternatingItemStyle, et SelectedItemStyle . En plus de ces quatre propriétés, le DataList inclut un certain nombre d’autres propriétés liées au style, telles que , ForeColor, BackColoret BorderWidth, pour n’en nommer que Fontquelques-unes. Le contrôle Repeater ne contient aucune propriété liée au style. Ces paramètres de style doivent être effectués directement dans le balisage dans les modèles s du répéteur.

Souvent, cependant, la façon dont les données doivent être mises en forme dépend des données elles-mêmes. Par exemple, lors de la liste des produits, nous pouvons afficher les informations sur le produit dans une couleur de police gris clair si elles sont supprimées, ou nous pouvons mettre en surbrillance la UnitsInStock valeur si elle est égale à zéro. Comme nous l’avons vu dans les tutoriels précédents, GridView, DetailsView et FormView offrent deux façons distinctes de mettre en forme leur apparence en fonction de leurs données :

  • L’événement DataBound crée un gestionnaire d’événements pour l’événement appropriéDataBound, qui se déclenche une fois que les données ont été liées à chaque élément (pour gridView, c’était l’événement RowDataBound ; pour datalist et repeater, il s’agit de l’événementItemDataBound). Dans ce gestionnaire d’événements, les données simplement liées peuvent être examinées et les décisions de mise en forme prises. Nous avons examiné cette technique dans le didacticiel Mise en forme personnalisée basée sur les données .
  • Les fonctions de mise en forme dans les modèles lors de l’utilisation de TemplateFields dans les contrôles DetailsView ou GridView, ou d’un modèle dans le contrôle FormView, nous pouvons ajouter une fonction de mise en forme à la classe code-behind de la page ASP.NET, à la couche logique métier ou à toute autre bibliothèque de classes accessible à partir de l’application web. Cette fonction de mise en forme peut accepter un nombre arbitraire de paramètres d’entrée, mais doit retourner le code HTML à afficher dans le modèle. Les fonctions de mise en forme ont d’abord été examinées dans le tutoriel Utilisation de TemplateFields dans le contrôle GridView .

Ces deux techniques de mise en forme sont disponibles avec les contrôles DataList et Repeater. Dans ce tutoriel, nous allons parcourir des exemples utilisant les deux techniques pour les deux contrôles.

Utilisation du gestionnaire d’événementsItemDataBound

Lorsque les données sont liées à une dataList, soit à partir d’un contrôle de source de données, soit via l’affectation programmatique de données à la propriété s du DataSource contrôle et l’appel de sa DataBind() méthode, l’événement DataList s se déclenche, la source de DataBinding données énumérée et chaque enregistrement de données est lié à la DataList. Pour chaque enregistrement de la source de données, datalist crée un DataListItem objet qui est ensuite lié à l’enregistrement actif. Au cours de ce processus, datalist déclenche deux événements :

  • ItemCreated se déclenche une fois que le DataListItem a été créé
  • ItemDataBound se déclenche une fois que l’enregistrement actif a été lié au DataListItem

Les étapes suivantes décrivent le processus de liaison de données pour le contrôle DataList.

  1. L’événement DataList se DataBinding déclenche

  2. Les données sont liées à la liste de données

    Pour chaque enregistrement dans la source de données

    1. Créer un DataListItem objet
    2. Déclencher l’événementItemCreated
    3. Lier l’enregistrement au DataListItem
    4. Déclencher l’événementItemDataBound
    5. Ajouter à DataListItem la Items collection

Lors de la liaison de données au contrôle Repeater, elles progressent dans la même séquence d’étapes. La seule différence est qu’au lieu de créer des DataListItem instances, le répéteur utilise RepeaterItems.

Notes

Le lecteur astute a peut-être remarqué une légère anomalie entre la séquence d’étapes qui se produit lorsque le DataList et le Repeater sont liés à des données et lorsque gridView est lié à des données. À l’extrémité du processus de liaison de données, GridView déclenche l’événement DataBound ; toutefois, ni le contrôle DataList ni Repeater n’ont un tel événement. Cela est dû au fait que les contrôles DataList et Repeater ont été créés dans la période ASP.NET 1.x, avant que le modèle de gestionnaire d’événements de pré et de post-niveau ne soit devenu courant.

Comme avec GridView, une option de mise en forme basée sur les données consiste à créer un gestionnaire d’événements pour l’événement ItemDataBound . Ce gestionnaire d’événements inspecte les données qui viennent d’être liées au DataListItem ou RepeaterItem et affecte la mise en forme du contrôle si nécessaire.

Pour le contrôle DataList, les modifications de mise en forme de l’élément entier peuvent être implémentées à l’aide DataListItem des propriétés liées au style s, qui incluent la norme Font, ForeColor, BackColor, CssClass, et ainsi de suite. Pour affecter la mise en forme de contrôles Web particuliers dans le modèle DataList s, nous devons accéder par programmation et modifier le style de ces contrôles Web. Nous avons vu comment effectuer cette opération dans le didacticiel Mise en forme personnalisée basée sur les données . Comme le contrôle Repeater, la RepeaterItem classe n’a pas de propriétés liées au style ; par conséquent, toutes les modifications liées au style apportées à un dans le ItemDataBound gestionnaire d’événements RepeaterItem doivent être effectuées en accédant par programmation aux contrôles Web dans le modèle et en les mettant à jour.

Étant donné que la ItemDataBound technique de mise en forme de DataList et de Repeater est pratiquement identique, notre exemple se concentre sur l’utilisation de la DataList.

Étape 1 : affichage des informations sur le produit dans la liste de données

Avant de nous soucier de la mise en forme, créons d’abord une page qui utilise une DataList pour afficher des informations sur le produit. Dans le tutoriel précédent , nous avons créé une DataList qui ItemTemplate affichait le nom, la catégorie, le fournisseur, la quantité par unité et le prix de chaque produit. Répétons cette fonctionnalité ici dans ce tutoriel. Pour ce faire, vous pouvez recréer le DataList et son ObjectDataSource à partir de zéro, ou vous pouvez copier ces contrôles à partir de la page créée dans le tutoriel précédent (Basics.aspx) et les coller dans la page de ce didacticiel (Formatting.aspx).

Une fois que vous avez répliqué les fonctionnalités DataList et ObjectDataSource à partir de Basics.aspxFormatting.aspx, prenez un moment pour passer de la propriété DataList s ID à une propriété DataList1 plus descriptive ItemDataBoundFormattingExample. Ensuite, affichez dataList dans un navigateur. Comme le montre la figure 1, la seule différence de mise en forme entre chaque produit est que la couleur d’arrière-plan alterne.

Les produits sont répertoriés dans le contrôle DataList

Figure 1 : Les produits sont répertoriés dans le contrôle DataList (cliquez pour afficher l’image en taille réelle)

Pour ce tutoriel, nous allons mettre en forme la DataList de telle sorte que tous les produits dont le prix est inférieur à 20,00 $ aient leur nom et leur prix unitaire mis en évidence en jaune.

Étape 2 : Détermination par programmation de la valeur des données dans le gestionnaire d’événements ItemDataBound

Étant donné que seuls les produits dont le prix est inférieur à 20,00 $ auront la mise en forme personnalisée appliquée, nous devons être en mesure de déterminer le prix de chaque produit. Lors de la liaison de données à une dataList, dataList énumère les enregistrements dans sa source de données et, pour chaque enregistrement, crée un DataListItem instance, liant l’enregistrement de source de données à .DataListItem Une fois que les données de l’enregistrement particulier ont été liées à l’objet actif DataListItem , l’événement DataList s est ItemDataBound déclenché. Nous pouvons créer un gestionnaire d’événements pour cet événement afin d’inspecter les valeurs de données actuelles DataListItem et, en fonction de ces valeurs, d’apporter les modifications de mise en forme nécessaires.

Créez un ItemDataBound événement pour datalist et ajoutez le code suivant :

Protected Sub ItemDataBoundFormattingExample_ItemDataBound _
    (sender As Object, e As DataListItemEventArgs) _
    Handles ItemDataBoundFormattingExample.ItemDataBound
    If e.Item.ItemType = ListItemType.Item OrElse _
       e.Item.ItemType = ListItemType.AlternatingItem Then
        ' Programmatically reference the ProductsRow instance
        ' bound to this DataListItem
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Item.DataItem, System.Data.DataRowView).Row, _
                Northwind.ProductsRow)
        ' See if the UnitPrice is not NULL and less than $20.00
        If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 20 Then
            ' TODO: Highlight the product's name and price
        End If
    End If
End Sub

Bien que le concept et la sémantique derrière le gestionnaire d’événements DataList soient ItemDataBound les mêmes que ceux utilisés par le gestionnaire d’événements GridView dans RowDataBound le didacticiel Mise en forme personnalisée basée sur les données , la syntaxe diffère légèrement. Lorsque l’événement ItemDataBound se déclenche, le DataListItem juste lié aux données est passé dans le gestionnaire d’événements correspondant via e.Item (au lieu de , comme avec le gestionnaire d’événements e.RowRowDataBound GridView). Le gestionnaire d’événements DataList s’active ItemDataBound pour chaque ligne ajoutée à la DataList, y compris les lignes d’en-tête, les lignes de pied de page et les lignes de séparateur. Toutefois, les informations sur le produit sont uniquement liées aux lignes de données. Par conséquent, lorsque vous utilisez l’événement ItemDataBound pour inspecter les données liées à dataList, nous devons d’abord nous assurer que nous travaillons avec un élément de données. Pour ce faire, vérifiez la DataListItem propriété sItemType, qui peut avoir l’une des huit valeurs suivantes :

  • AlternatingItem
  • EditItem
  • Footer
  • Header
  • Item
  • Pager
  • SelectedItem
  • Separator

Les éléments de données datalist et AlternatingItem``DataListItem les s sont à la foisItem. En supposant que nous travaillons avec un Item ou , nous accédons à la instance réelle ProductsRow qui était liée au actuel DataListItemAlternatingItem. La DataListItem propriété s DataItem contient une référence à l’objet, dont Row la DataRowView propriété fournit une référence à l’objet réelProductsRow.

Ensuite, nous case activée la ProductsRow propriété s du UnitPrice instance. Étant donné que le champ s de la table Produits UnitPrice autorise NULL les valeurs, avant d’essayer d’accéder à la UnitPrice propriété, nous devons d’abord case activée pour voir s’il a une NULL valeur à l’aide de la IsUnitPriceNull() méthode . Si la UnitPrice valeur n’est pas NULL, nous case activée pour voir si elle est inférieure à 20,00 $. S’il est effectivement inférieur à 20,00 $, nous devons appliquer la mise en forme personnalisée.

Étape 3 : Mise en surbrillance du nom et du prix du produit

Une fois que nous savons que le prix d’un produit est inférieur à 20,00 $, il ne reste plus qu’à mettre en évidence son nom et son prix. Pour ce faire, nous devons d’abord référencer par programmation les contrôles Label dans le ItemTemplate qui affichent le nom et le prix du produit. Ensuite, nous devons leur faire afficher un arrière-plan jaune. Ces informations de mise en forme peuvent être appliquées en modifiant directement les propriétés Des étiquettes BackColor (LabelID.BackColor = Color.Yellow ; dans l’idéal, cependant, toutes les questions liées à l’affichage doivent être exprimées par le biais de feuilles de style en cascade. En fait, nous avons déjà une feuille de style qui fournit la mise en forme souhaitée définie dans Styles.css - AffordablePriceEmphasis, qui a été créée et abordée dans le tutoriel Mise en forme personnalisée basée sur les données .

Pour appliquer la mise en forme, définissez simplement les deux propriétés des contrôles CssClass Label Web sur AffordablePriceEmphasis, comme indiqué dans le code suivant :

' Highlight the product name and unit price Labels
' First, get a reference to the two Label Web controls
Dim ProductNameLabel As Label = CType(e.Item.FindControl("ProductNameLabel"), Label)
Dim UnitPriceLabel As Label = CType(e.Item.FindControl("UnitPriceLabel"), Label)
' Next, set their CssClass properties
If ProductNameLabel IsNot Nothing Then
    ProductNameLabel.CssClass = "AffordablePriceEmphasis"
End If
If UnitPriceLabel IsNot Nothing Then
    UnitPriceLabel.CssClass = "AffordablePriceEmphasis"
End If

Une fois le ItemDataBound gestionnaire d’événements terminé, revenez à la Formatting.aspx page dans un navigateur. Comme l’illustre la figure 2, les produits dont le prix est inférieur à 20,00 $ mettent en évidence leur nom et leur prix.

Les produits inférieurs à 20,00 $ sont mis en surbrillance

Figure 2 : Les produits inférieurs à 20,00 $ sont mis en surbrillance (cliquer pour afficher l’image en taille réelle)

Notes

Étant donné que dataList est rendu en tant que code HTML <table>, ses DataListItem instances ont des propriétés liées au style qui peuvent être définies pour appliquer un style spécifique à l’élément entier. Par exemple, si nous voulions mettre en surbrillance l’ensemble de l’élément jaune lorsque son prix était inférieur à 20,00 $, nous aurions pu remplacer le code qui faisait référence aux Étiquettes et définir leurs CssClass propriétés par la ligne de code suivante : e.Item.CssClass = "AffordablePriceEmphasis" (voir figure 3).

Toutefois RepeaterItem , les s qui composent le contrôle Repeater n’offrent pas de telles propriétés de niveau de style. Par conséquent, l’application d’une mise en forme personnalisée au répéteur nécessite l’application de propriétés de style aux contrôles Web dans les modèles s du répéteur, comme nous l’avons fait dans la figure 2.

L’élément de produit entier est mis en surbrillance pour les produits de moins de 20,00 $

Figure 3 : L’élément de produit entier est mis en surbrillance pour les produits de moins de 20,00 $ (Cliquer pour afficher l’image en taille réelle)

Utilisation des fonctions de mise en forme à partir du modèle

Dans le tutoriel Utilisation de TemplateFields dans le contrôle GridView , nous avons vu comment utiliser une fonction de mise en forme dans un GridView TemplateField pour appliquer une mise en forme personnalisée en fonction des données liées aux lignes gridView. Une fonction de mise en forme est une méthode qui peut être appelée à partir d’un modèle et retourne le code HTML à émettre à sa place. Les fonctions de mise en forme peuvent résider dans la classe code-behind de la page ASP.NET ou peuvent être centralisées dans des fichiers de classe dans le App_Code dossier ou dans un projet de bibliothèque de classes distinct. Le déplacement de la fonction de mise en forme hors de la classe code-behind de la page ASP.NET est idéal si vous envisagez d’utiliser la même fonction de mise en forme dans plusieurs pages ASP.NET ou dans d’autres applications web ASP.NET.

Pour illustrer les fonctions de mise en forme, supposons que les informations sur le produit incluent le texte [DISCONTINUED] en regard du nom du produit s’il est interrompu. En outre, mettons le prix en surbrillance jaune s’il est inférieur à 20,00 $ (comme nous l’avons fait dans l’exemple ItemDataBound de gestionnaire d’événements) ; si le prix est de 20,00 $ ou plus, n’affichez pas le prix réel, mais plutôt le texte, appelez pour obtenir un devis de prix. La figure 4 montre une capture d’écran de la liste des produits avec ces règles de mise en forme appliquées.

Capture d’écran montrant les produits répertoriés dans le contrôle DataList, avec le prix des produits de plus de 20,00 $ remplacé par le texte « Veuillez appeler pour obtenir un devis ».

Figure 4 : Pour les produits chers, le prix est remplacé par le texte, appelez pour obtenir un devis (cliquez pour afficher l’image en taille réelle)

Étape 1 : Créer les fonctions de mise en forme

Pour cet exemple, nous avons besoin de deux fonctions de mise en forme, l’une qui affiche le nom du produit avec le texte [DISCONTINUED], si nécessaire, et l’autre qui affiche un prix mis en surbrillance s’il est inférieur à 20,00 $, ou le texte, Veuillez appeler pour obtenir un devis dans le cas contraire. Créez ces fonctions dans la classe code-behind de la page ASP.NET et nommez-les DisplayProductNameAndDiscontinuedStatus et DisplayPrice. Les deux méthodes doivent retourner le code HTML à restituer sous forme de chaîne et toutes deux doivent être marquées Protected (ou Public) pour être appelées à partir de la partie de syntaxe déclarative de la page ASP.NET. Le code de ces deux méthodes est le suivant :

Protected Function DisplayProductNameAndDiscontinuedStatus _
    (productName As String, discontinued As Boolean) As String
    ' Return just the productName if discontinued is false
    If Not discontinued Then
        Return productName
    Else
        ' otherwise, return the productName appended with the text "[DISCONTINUED]"
        Return String.Concat(productName, " [DISCONTINUED]")
    End If
End Function
Protected Function DisplayPrice(product As Northwind.ProductsRow) As String
    ' If price is less than $20.00, return the price, highlighted
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 20 Then
        Return String.Concat("<span class="AffordablePriceEmphasis">", _
                             product.UnitPrice.ToString("C"), "</span>")
    Else
        ' Otherwise return the text, "Please call for a price quote"
        Return "<span>Please call for a price quote</span>"
    End If
End Function

Notez que la DisplayProductNameAndDiscontinuedStatus méthode accepte les valeurs des champs de productName données et discontinued en tant que valeurs scalaires, tandis que la DisplayPrice méthode accepte une ProductsRow instance (plutôt qu’une unitPrice valeur scalaire). L’une ou l’autre approche fonctionnera ; Toutefois, si la fonction de mise en forme fonctionne avec des valeurs scalaires qui peuvent contenir des valeurs de base de données NULL (telles que UnitPriceles valeurs ; ni ProductNameDiscontinued autoriser NULL ), une attention particulière doit être prise dans la gestion de ces entrées scalaires.

En particulier, le paramètre d’entrée doit être de typeObject, car la valeur entrante peut être une DBNull instance au lieu du type de données attendu. En outre, une case activée doit être effectuée pour déterminer si la valeur entrante est une valeur de base de donnéesNULL. Autrement dit, si nous voulions que la DisplayPrice méthode accepte le prix comme valeur scalaire, nous devons utiliser le code suivant :

Protected Function DisplayPrice(ByVal unitPrice As Object) As String
    ' If price is less than $20.00, return the price, highlighted
    If Not Convert.IsDBNull(unitPrice) AndAlso CType(unitPrice, Decimal) < 20 Then
        Return String.Concat("<span class="AffordablePriceEmphasis">", _
            CType(unitPrice, Decimal).ToString("C"), "</span>")
    Else
        ' Otherwise return the text, "Please call for a price quote"
        Return "<span>Please call for a price quote</span>"
    End If
End Function

Notez que le unitPrice paramètre d’entrée est de type Object et que l’instruction conditionnelle a été modifiée pour vérifier si unitPrice est DBNull ou non. En outre, étant donné que le unitPrice paramètre d’entrée est passé en tant que Object, il doit être converti en valeur décimale.

Étape 2 : Appel de la fonction de mise en forme à partir de l’élément ItemTemplate de DataList

Avec les fonctions de mise en forme ajoutées à notre classe code-behind de la page ASP.NET, il ne reste plus qu’à appeler ces fonctions de mise en forme à partir de DataList s ItemTemplate. Pour appeler une fonction de mise en forme à partir d’un modèle, placez l’appel de fonction dans la syntaxe de liaison de données :

<%# MethodName(inputParameter1, inputParameter2, ...) %>

Dans dataList s, ItemTemplate le ProductNameLabel contrôle Label Web affiche actuellement le nom du produit en affectant à sa Text propriété le résultat de <%# Eval("ProductName") %>. Pour qu’elle affiche le nom et le texte [DISCONTINUED], si nécessaire, mettez à jour la syntaxe déclarative afin qu’elle affecte à la Text propriété la valeur de la DisplayProductNameAndDiscontinuedStatus méthode. Dans ce cas, nous devons transmettre le nom du produit et les valeurs abandonnées à l’aide de la Eval("columnName") syntaxe . Eval retourne une valeur de type Object, mais la DisplayProductNameAndDiscontinuedStatus méthode attend des paramètres d’entrée de type String ; Booleanpar conséquent, nous devons caster les valeurs retournées par la Eval méthode en types de paramètres d’entrée attendus, comme suit :

<h4>
    <asp:Label ID="ProductNameLabel" runat="server"
        Text='<%# DisplayProductNameAndDiscontinuedStatus((string) Eval("ProductName"),
              (bool) Eval("Discontinued")) %>'>
    </asp:Label>
</h4>

Pour afficher le prix, nous pouvons simplement définir la UnitPriceLabel propriété Label s Text sur la valeur retournée par la méthode, comme nous l’avons DisplayPrice fait pour afficher le nom du produit et le texte [DISCONTINUED]. Toutefois, au lieu de passer le UnitPrice en tant que paramètre d’entrée scalaire, nous transmettons à la place l’ensemble ProductsRow de la instance :

<asp:Label ID="UnitPriceLabel" runat="server"
    Text='<%# DisplayPrice((Northwind.ProductsRow)
          ((System.Data.DataRowView) Container.DataItem).Row) %>'>
</asp:Label>

Une fois les appels aux fonctions de mise en forme en place, prenez un moment pour voir notre progression dans un navigateur. Votre écran doit ressembler à la figure 5, avec les produits abandonnés, y compris le texte [DISCONTINUED] et les produits dont le prix est supérieur à 20,00 $ et dont le prix est remplacé par le texte Appelez pour obtenir un devis .

Capture d’écran montrant les produits répertoriés dans le contrôle DataList, avec le prix des produits dont le coût est supérieur à 20,00 $ remplacé par le texte « Veuillez appeler pour obtenir un devis de prix » et le texte « [DISCONTINUED] » ajouté au nom des produits abandonnés.

Figure 5 : Pour les produits coûteux, le prix est remplacé par le texte, appelez pour obtenir un devis (cliquez pour afficher l’image en taille réelle)

Résumé

La mise en forme du contenu d’un contrôle DataList ou Repeater basé sur les données peut être effectuée à l’aide de deux techniques. La première technique consiste à créer un gestionnaire d’événements pour l’événement ItemDataBound , qui se déclenche lorsque chaque enregistrement de la source de données est lié à un nouveau DataListItem ou RepeaterItem. Dans le ItemDataBound gestionnaire d’événements, les données de l’élément actif peuvent être examinées, puis la mise en forme peut être appliquée au contenu du modèle ou, pour DataListItem s, à l’élément entier lui-même.

Vous pouvez également effectuer une mise en forme personnalisée via des fonctions de mise en forme. Une fonction de mise en forme est une méthode qui peut être appelée à partir des modèles DataList ou Repeater qui retourne le code HTML à émettre à sa place. Souvent, le code HTML retourné par une fonction de mise en forme est déterminé par les valeurs liées à l’élément actif. Ces valeurs peuvent être transmises à la fonction de mise en forme, soit en tant que valeurs scalaires, soit en passant l’objet entier lié à l’élément (par exemple, le ProductsRow instance).

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.

Un merci spécial à

Cette série de tutoriels a été examinée par de nombreux réviseurs utiles. Les principaux réviseurs de ce tutoriel étaient Yaakov Ellis, Randy Schmidt et Liz Shulok. Vous souhaitez consulter mes prochains articles MSDN ? Si c’est le cas, déposez-moi une ligne à mitchell@4GuysFromRolla.com.

PrécédentSuivant