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

2025-04-30

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

Présentation

Comme nous l’avons vu dans le tutoriel précédent, DataList propose 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 HeaderStyle, ItemStyle, AlternatingItemStyle, et SelectedItemStyle de DataList. En plus de ces quatre propriétés, DataList inclut un certain nombre d'autres propriétés liées au style, telles que Font, ForeColor, BackColor et BorderWidth, pour n'en nommer que quelques-unes. Le contrôle Repeater ne contient aucune propriété liée au style. Tous ces paramètres de style doivent être effectués directement dans le balisage des modèles 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 description des produits, nous pourrions souhaiter afficher les informations du produit dans une couleur de police gris clair si elle est interrompue, ou nous pouvons mettre en surbrillance la UnitsInStock valeur si elle est égale à zéro. Comme nous l’avons vu dans les didacticiels 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, il s’agissait de l’événementRowDataBound ; pour DataList et Repeater, il s’agit de l’événementItemDataBound). Dans ce gestionnaire d’événements, les données récemment liées peuvent être examinées et des décisions de formatage peuvent être prises. Nous avons examiné cette technique dans le didacticiel sur la mise en forme personnalisée basée sur les données .
Mise en forme des fonctions 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 didacticiel Utilisation de TemplateFields dans le didacticiel 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 à l’aide des deux techniques pour les deux contrôles.

Utilisation du gestionnaire d’événements`ItemDataBound`

Lorsque les données sont liées à une DataList, qu’elles proviennent d’un contrôle de source de données ou par le biais de l’affectation par programme de données à la propriété DataSource du contrôle et l’appel de sa méthode DataBind(), l’événement DataBinding DataList se déclenche, la source de données est é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. Pendant ce processus, DataList déclenche deux événements :

ItemCreated se déclenche une fois le DataListItem 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.

L’événement DataBindingDataList se déclenche
Les données sont liées à DataList

Pour chaque enregistrement dans la source de données
1. Créer un objet DataListItem
2. Déclencher l’événementItemCreated
3. Lier l’enregistrement à l’objet DataListItem
4. Déclencher l’événementItemDataBound
5. Ajouter le DataListItem à la collection Items

Lors de la liaison des données au contrôle Repeater, il suit exactement la même séquence d'étapes. La seule différence est que, au lieu d’instances DataListItem créées, le répéteur utilise RepeaterItems.

Remarque

Le lecteur astucieux a peut-être remarqué une légère anomalie entre la séquence d’étapes qui se produisent lorsque DataList et Repeater sont liés aux données par rapport à GridView. À la fin 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 ASP.NET période 1.x, avant que le modèle de gestionnaire d’événements de pré-niveau 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 inspectait les données qui venaient d'être liées au DataListItem ou au RepeaterItem, et ajustait la mise en forme du contrôle selon les besoins.

Pour le contrôle DataList, les modifications de mise en forme de l’élément entier peuvent être implémentées à l’aide des propriétés liées au style DataListItem, qui incluent les propriétés standard Font, ForeColor, BackColor, CssClass, et ainsi de suite. Pour affecter la mise en forme de contrôles Web particuliers au sein du modèle DataList, 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 sur la 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 RepeaterItemItemDataBound gestionnaire d’événements doivent être effectuées par programmation en accédant aux contrôles Web et en mettant à jour les contrôles Web au sein du modèle.

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

Étape 1 : affichage des informations sur le produit dans dataList

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

Une fois que vous avez répliqué la fonctionnalité DataList et ObjectDataSource depuis Basics.aspx vers Formatting.aspx, prenez un moment pour modifier la propriété du DataList ID de DataList1 vers un nom plus descriptif 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.

Figure 1 : Les produits sont répertoriés dans le contrôle DataList (Cliquez pour afficher l’image de taille complète)

Pour ce tutoriel, nous allons mettre en forme la DataList de sorte que tous les produits dont le prix est inférieur à 20,00 $ auront à la fois son nom et son prix unitaire mis en surbrillance 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, la DataList énumère les enregistrements dans sa source de données et, pour chaque enregistrement, crée une instance DataListItem, liant l'enregistrement de la source de données à DataListItem. Une fois que les données de l’enregistrement particulier ont été liées à l’objet actuel DataListItem , l’événement DataList ItemDataBound est déclenché. Nous pouvons créer un gestionnaire d’événements pour cet événement afin d’inspecter les valeurs de données pour le courant DataListItem et, en fonction de ces valeurs, apporter les modifications de mise en forme nécessaires.

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

protected void ItemDataBoundFormattingExample_ItemDataBound
    (object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item ||
        e.Item.ItemType == ListItemType.AlternatingItem)
    {
        // Programmatically reference the ProductsRow instance bound
        // to this DataListItem
        Northwind.ProductsRow product =
            (Northwind.ProductsRow)((System.Data.DataRowView)e.Item.DataItem).Row;
        // See if the UnitPrice is not NULL and less than $20.00
        if (!product.IsUnitPriceNull() && product.UnitPrice < 20)
        {
            // TODO: Highlight the product's name and price
        }
    }
}

Bien que le concept et la sémantique derrière le gestionnaire d’événements ItemDataBound DataList soient identiques à ceux utilisés par le gestionnaire d’événements RowDataBound GridView dans le didacticiel sur la 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 seul lié aux données est passé dans le gestionnaire d’événements correspondant via e.Item (au lieu de e.Row, comme avec le gestionnaire d’événements RowDataBound GridView). Le gestionnaire d’événements ItemDataBound DataList se déclenche pour chaque ligne ajoutée à 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, lors de l’utilisation de 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 Item et AlternatingItem``DataListItem constituent les éléments de données de DataList. En supposant que nous travaillons avec un Item ou AlternatingItem, nous accédons à l’instance réelle ProductsRow liée à l’actuel DataListItem. La DataListItem propriété s DataItem contient une référence à l’objetDataRowView, dont Row la propriété fournit une référence à l’objet réelProductsRow.

Ensuite, nous vérifions la ProductsRow propriété de l’instance UnitPrice . Étant donné que le champ UnitPrice de la table Products autorise les valeurs NULL, il est nécessaire de vérifier d'abord s'il a une valeur UnitPrice en utilisant la méthode NULL avant de tenter d'accéder à la propriété IsUnitPriceNull(). Si la UnitPrice valeur n’est pas NULL, nous vérifions ensuite si elle est inférieure à 20,00 $. S’il est en effet 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 qu’un prix d’un produit est inférieur à 20,00 $, tout ce qui reste est de mettre en évidence son nom et son prix. Pour ce faire, nous devons d'abord référencer par programmation les contrôles d'étiquette dans le ItemTemplate qui affichent le nom et le prix du produit. Ensuite, nous devons les 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, 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 didacticiel sur la mise en forme personnalisée basée sur les données .

Pour appliquer la mise en forme, définissez simplement les propriétés des deux contrôles Web Label CssClass 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
Label ProductNameLabel = (Label)e.Item.FindControl("ProductNameLabel");
Label UnitPriceLabel = (Label)e.Item.FindControl("UnitPriceLabel");
// Next, set their CssClass properties
if (ProductNameLabel != null)
    ProductNameLabel.CssClass = "AffordablePriceEmphasis";
if (UnitPriceLabel != null)
    UnitPriceLabel.CssClass = "AffordablePriceEmphasis";

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

Figure 2 : Ces produits inférieurs à 20,00 $ sont mis en surbrillance (cliquez pour afficher l’image de taille complète)

Remarque

É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’ensemble de l’élément. Par exemple, si nous voulions mettre en surbrillance l’élément entier jaune lorsque son prix était inférieur à 20,00 $, nous aurions pu remplacer le code qui a référencé les étiquettes et définir leurs CssClass propriétés avec la ligne de code suivante : e.Item.CssClass = "AffordablePriceEmphasis" (voir la figure 3).

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

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

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

Dans le didacticiel Utilisation de TemplateFields dans le didacticiel 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 basée sur les données liées aux lignes de 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 ê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, supposons que le prix soit mis en surbrillance jaune s’il est inférieur à 20,00 $ (comme nous l’avons fait dans l’exemple du ItemDataBound gestionnaire d’événements) ; si le prix est de 20,00 $ ou supérieur, n’affichons pas le prix réel, mais plutôt le texte, veuillez appeler 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.

Figure 4 : Pour les produits coûteux, le prix est remplacé par le texte, veuillez appeler un devis de prix (cliquez pour afficher l’image de taille complète)

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

Pour cet exemple, nous avons besoin de deux fonctions de mise en forme, une qui affiche le nom du produit avec le texte [DISCONTINUED], si nécessaire, et une autre qui affiche un prix mis en surbrillance s’il est inférieur à 20,00 $, ou le texte, veuillez appeler une devis de prix dans le cas contraire. Nous allons créer ces fonctions dans la classe code-behind de la page ASP.NET et les nommer DisplayProductNameAndDiscontinuedStatus et DisplayPrice. Les deux méthodes doivent retourner le code HTML pour effectuer un rendu sous forme de chaîne, et les 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 suit :

protected string DisplayProductNameAndDiscontinuedStatus
    (string productName, bool discontinued)
{
    // Return just the productName if discontinued is false
    if (!discontinued)
        return productName;
    else
        // otherwise, return the productName appended with the text "[DISCONTINUED]"
        return string.Concat(productName, " [DISCONTINUED]");
}
protected string DisplayPrice(Northwind.ProductsRow product)
{
    // If price is less than $20.00, return the price, highlighted
    if (!product.IsUnitPriceNull() && product.UnitPrice < 20)
        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>";
}

Notez que la méthode DisplayProductNameAndDiscontinuedStatus accepte les valeurs des champs de données productName et discontinued sous forme de valeurs scalaires, tandis que la méthode DisplayPrice accepte une instance ProductsRow (plutôt qu'une valeur scalaire unitPrice). L’une ou l’autre approche fonctionne ; toutefois, si la fonction de mise en forme travaille avec des valeurs scalaires qui peuvent contenir des valeurs de base de données NULL (telles que UnitPrice ; ni ProductName ni Discontinued n’autorisent les valeurs NULL), il faut prendre un soin particulier pour gérer ces entrées scalaires.

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

protected string DisplayPrice(object unitPrice)
{
    // If price is less than $20.00, return the price, highlighted
    if (!Convert.IsDBNull(unitPrice) && ((decimal) unitPrice) < 20)
        return string.Concat("<span class=\"AffordablePriceEmphasis\">",
                              ((decimal) unitPrice).ToString("C"), "</span>");
    else
        // Otherwise return the text, "Please call for a price quote"
        return "<span>Please call for a price quote</span>";
}

Notez que le unitPrice paramètre d’entrée est de type Object et que l’instruction conditionnelle a été modifiée pour déterminer si unitPrice elle 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 page ASP.NET, tout ce qui reste est d’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 le DataList sItemTemplate, le contrôle ProductNameLabel Label Web affiche actuellement le nom du produit en assignant le résultat de Text à sa propriété <%# Eval("ProductName") %>. Pour qu'il affiche le nom suivi du texte [DISCONTINUED], si nécessaire, mettez à jour la syntaxe déclarative afin d'attribuer à la propriété Text la valeur retournée par la méthode DisplayProductNameAndDiscontinuedStatus. Dans ce cas, nous devons transmettre le nom du produit et les valeurs interrompues à l’aide de la syntaxe Eval("columnName"). Eval retourne une valeur de type Object, mais la DisplayProductNameAndDiscontinuedStatus méthode attend des paramètres d’entrée de type String et Boolean, par conséquent, nous devons convertir 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 DisplayPrice méthode, comme nous l’avons fait pour afficher le nom du produit et le texte [DISCONTINUED]. Toutefois, au lieu de passer le UnitPrice paramètre d’entrée scalaire, nous transmettons à la place l’intégralité ProductsRow de l’instance :

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

Avec les appels aux fonctions de mise en forme en place, prenez un moment pour afficher notre progression dans un navigateur. Votre écran doit ressembler à la figure 5, avec les produits supprimés, y compris le texte [DISCONTINUED] et ces produits coûtant plus de 20,00 $ ayant leur prix remplacé par le texte S’il vous plaît appeler un devis de prix .

Figure 5 : Pour les produits coûteux, le prix est remplacé par le texte, veuillez appeler un devis de prix (cliquez pour afficher l’image de taille complète)

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 à mesure que 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 actuel 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 réaliser une mise en forme personnalisée par le biais de fonctions de mise en forme. Une fonction de mise en forme est une méthode qui peut être appelée depuis les modèles de DataList ou Repeater et retourne le code HTML à générer à 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 actuel. Ces valeurs peuvent être passées dans la fonction de mise en forme, soit en tant que valeurs scalaires, soit en passant l’objet entier lié à l’élément (par exemple, l’instance ProductsRow ).

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.

Merci spécial à

Cette série de tutoriels a été examinée par de nombreux réviseurs utiles. Les réviseurs principaux pour 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édent Suivant