Vue d'ensemble du contrôle serveur Web DataList

Article
10/22/2014

Mise à jour : novembre 2007

Le contrôle serveur Web DataList affiche les lignes d'informations de base de données dans un format personnalisable. Le format d'affichage des données est défini dans les modèles que vous créez. Vous pouvez créer des modèles pour les éléments, les éléments de remplacement, les éléments sélectionnés et les éléments de modification. Il existe également des modèles d'en-tête, de pied de page et de séparateur qui vous permettent de personnaliser l'apparence globale de DataList. En incluant des contrôles serveur Web Button dans les modèles, vous pouvez lier des éléments de liste à du code qui permet aux utilisateurs de basculer entre les modes d'affichage, de sélection ou de modification.

Cette rubrique contient les sections suivantes :

Contexte
Exemples de code
Référence de classe

Contexte

Le contrôle serveur Web DataList affiche les données dans un format que vous pouvez définir à l'aide de modèles et de styles. Le contrôle DataList est utile pour les données contenues dans une structure à répétition, par exemple un tableau. Le contrôle DataList peut afficher les lignes dans des dispositions différentes, par exemple les agencer en colonnes ou lignes.

Remarque :
Le contrôle DataList restitue des éléments dans une liste à l'aide d'éléments de tableau HTML. Pour contrôler avec précision la commande HTML utilisée pour restituer une liste, utilisez le contrôle serveur Web Repeater au lieu du contrôle DataList.

Vous pouvez éventuellement configurer le contrôle DataList pour que les utilisateurs puissent modifier ou supprimer des informations. Vous pouvez également personnaliser le contrôle afin qu'il prenne en charge d'autres fonctionnalités comme la sélection de lignes.

Vous utilisez des modèles pour définir la disposition des éléments de données en incluant des contrôles et du texte HTML. Vous pouvez, par exemple, utiliser un contrôle serveur Web Label dans un élément afin d'afficher un champ de la source de données.

Les rubriques suivantes présentent les fonctionnalités du contrôle DataList.

Liaison de données au contrôle

Le contrôle serveur Web DataList doit être lié à une source de données. La source de données la plus courante est un contrôle de source de données, par exemple un contrôle SqlDataSource ou ObjectDataSource. Vous pouvez lier également un contrôle DataList à toute classe qui implémente l'interface IEnumerable qui inclut les groupes de données ADO.NET (la classe DataSet), les lecteurs de données (les classes SqlDataReader ou OleDbDataReader) ou la plupart des collections. Lors de la liaison de données, vous spécifiez une source de données pour le contrôle DataList dans son ensemble. Lorsque vous ajoutez d'autres contrôles à celui-ci, par exemple des étiquettes ou des zones de texte dans des éléments de liste, vous liez les propriétés des contrôles enfants aux champs de l'élément de données actuel.

Définition de modèles pour les éléments DataList

Dans le contrôle DataList, vous pouvez définir la disposition de vos informations à l'aide de modèles.

Remarque :
Pour une vue d'ensemble de l'utilisation des modèles, consultez Modèles de contrôles serveur Web ASP.NET.

Le tableau suivant décrit les modèles pris en charge par le contrôle DataList.

Propriété du modèle	Description
ItemTemplate	Contient les éléments et les contrôles HTML à rendre une fois pour chaque ligne de la source de données.
AlternatingItemTemplate	Contient les éléments et les contrôles HTML à rendre une fois pour toutes les lignes de la source de données. En général, vous utilisez ce modèle pour donner une apparence différente aux lignes en alternance, par exemple une couleur d'arrière-plan autre que celle spécifiée dans la propriété ItemTemplate.
SelectedItemTemplate	Contient les éléments à rendre lorsque l'utilisateur sélectionne un élément dans le contrôle DataList. En général, vous utilisez ce modèle pour différencier visuellement la ligne sélectionnée avec une couleur de police ou un arrière-plan différent. Vous pouvez en outre développer l'élément en affichant d'autres champs de la source de données.
EditItemTemplate	Spécifie la disposition d'un élément lorsqu'il est en mode édition. Ce modèle contient généralement des contrôles d'édition comme les contrôles TextBox.
HeaderTemplate et FooterTemplate	Contient le texte et les contrôles à rendre en début et en fin de liste, respectivement.
SeparatorTemplate	Contient les éléments à rendre entre chaque élément. Une ligne (utilisant un élément HR) en est un exemple.

Styles

Pour spécifier l'apparence des éléments dans un modèle, vous pouvez définir le style du modèle. Par exemple, vous pouvez spécifier les éléments suivants :

la présentation des éléments avec une couleur de police noire et une couleur d'arrière-plan blanche ;
la présentation des éléments de remplacement avec une couleur de police noire et une couleur d'arrière-plan gris clair ;
la présentation de l'élément sélectionné avec un texte en gras, noir dans un arrière-plan jaune ;
la présentation des éléments en mode édition avec une couleur de police noire et une couleur d'arrière-plan bleu ciel.

Chaque modèle prend en charge son propre objet style dont vous pouvez définir les propriétés au moment du design et de l'exécution. Les styles que vous pouvez utiliser sont les suivants :

Pour plus d'informations, consultez Contrôles serveur Web ASP.NET et styles CSS.

Disposition des éléments

Le contrôle DataList utilise un tableau HTML pour exposer le rendu des éléments auxquels le modèle est appliqué. Vous pouvez contrôler l'ordre, le sens et le nombre de colonnes pour les cellules de tableau individuelles utilisées pour restituer les éléments DataList. Le tableau suivant décrit les options de présentation prises en charge par le contrôle DataList.

Option de présentation	Description
Mise en page fluide	Dans une mise en page fluide, les éléments de liste sont restitués en ligne sous la forme d'un document de traitement de texte.
Présentation tabulaire	Dans une présentation tabulaire, les éléments sont restitués dans un tableau HTML. Vous disposez ainsi de plus d'options pour spécifier l'apparence des éléments, car cette présentation permet de définir les propriétés des cellules de tableau, par exemple le quadrillage. Pour plus d'informations, consultez Comment : spécifier le format tabulaire ou de flux dans les contrôles serveur Web DataList.
Présentations verticale et horizontale	Par défaut, les éléments d'un contrôle DataList sont affichés dans une seule colonne verticale. Il est toutefois possible de spécifier plusieurs colonnes pour le contrôle. Dans ce cas, vous pouvez même spécifier si les éléments doivent être présentés verticalement (dans des colonnes de style journal) ou horizontalement (comme les jours d'un calendrier). Pour plus d'informations, consultez Comment : spécifier une disposition horizontale ou verticale dans des contrôles serveur Web DataList.
Nombre de colonnes	Quel que soit le type de présentation défini (horizontal ou vertical) pour les éléments du contrôle DataList, vous pouvez spécifier le nombre de colonnes que doit comporter la liste. Vous pouvez ainsi déterminer la largeur de la page Web rendue, notamment pour éviter le défilement horizontal.

Événements

Le contrôle DataList prend en charge plusieurs événements. L'un d'eux, l'événement ItemCreated, vous offre la possibilité de personnaliser le processus de création d'éléments au moment de l'exécution. L'événement ItemDataBound vous permet également de personnaliser le contrôle DataList, mais une fois que les données sont accessibles pour consultation. Par exemple, si vous utilisez le contrôle DataList pour afficher une liste de tâches, vous pouvez afficher les tâches en retard en rouge, les tâches terminées en noir et les autres tâches en vert. Vous pouvez utiliser l'un ou l'autre de ces événements pour substituer la mise en forme définie dans le modèle.

Les autres événements sont déclenchés en réponse à des clics de bouton dans les éléments de la liste. Ils sont conçus pour vous aider à répondre aux fonctionnalités les plus utilisées du contrôle DataList. Quatre événements de ce type sont pris en charge :

Pour déclencher ces événements, ajoutez les contrôles Button, LinkButton ou ImageButton aux modèles du contrôle DataList et affectez un mot clé, par exemple edit, delete, update ou cancel, à la propriété CommandName des boutons. Lorsqu'un utilisateur clique sur un bouton dans un élément, l'événement est envoyé au conteneur du bouton, en l'occurrence le contrôle DataList. L'événement précis déclenché par le bouton dépend de la propriété CommandName du bouton sur lequel un utilisateur a cliqué. Par exemple, si la propriété CommandName d'un bouton a la valeur edit, le bouton déclenche un événement EditCommand lorsqu'un utilisateur clique dessus. Si la propriété CommandName a la valeur delete, le bouton déclenche un événement DeleteCommand, et ainsi de suite.

Le contrôle DataList prend en charge également l'événement ItemCommand qui est déclenché lorsqu'un utilisateur clique sur un bouton qui ne présente pas de commande prédéfinie, par exemple edit ou delete. Vous pouvez utiliser cet événement pour disposer de fonctionnalités personnalisées, en configurant la valeur requise pour la propriété CommandName du bouton puis en le testant dans le gestionnaire d'événements ItemCommand. Par exemple, vous pouvez utiliser cette approche lors de la sélection d'un élément, comme décrit dans Comment : permettre aux utilisateurs de sélectionner des éléments dans des contrôles serveur Web DataList.

Pour plus d'informations sur les événements Web Forms, consultez Modèle d'événements du contrôle serveur Web ASP.NET.

Édition et sélection d'éléments

Vous pouvez offrir aux utilisateurs la possibilité de modifier des éléments individuels du contrôle. D'autres contrôles de données, tels que les contrôles GridView, DetailsView et FormView, peuvent interagir avec les contrôles de source de données pour prendre en charge les mises à jour et la pagination automatiques. En revanche, le contrôle DataList ne peut pas tirer automatiquement parti des fonctions de mise à jour des contrôles de source de données, ou encore de la pagination ou du tri automatique. Pour exécuter les mises à jour, la pagination et le tri à l'aide du contrôle DataList, vous devez exécuter la tâche de mise à jour dans le code que vous écrivez.

La stratégie classique consiste à créer un modèle EditItemTemplate qui fournit la disposition et les contrôles appropriés pour le mode édition. Vous devez également fournir aux utilisateurs un moyen d'indiquer qu'ils souhaitent modifier l'élément. La méthode la plus courante pour y parvenir consiste à inclure un bouton dans le modèle d'élément (et si vous l'utilisez, dans la propriété AlternatingItemTemplate), puis à affecter la valeur edit à la propriété CommandName du bouton. Dès lors, lorsque l'utilisateur clique sur le bouton, le contrôle DataList déclenche automatiquement l'événement EditCommand. Dans le code que vous écrivez pour le gestionnaire d'événements, activez le mode édition pour l'élément afin d'afficher le modèle EditItemTemplate.

Le modèle EditItemTemplate inclut généralement des boutons qui permettent aux utilisateurs d'enregistrer leurs modifications ou de les ignorer (par exemple les boutons Mettre à jour et Annuler). Ces boutons fonctionnent de la même façon que le bouton Modifier : ils envoient un message de commande prédéfini (update ou cancel) au contrôle DataList qui déclenche un événement UpdateCommand ou CancelCommand auquel vous pouvez répondre de manière appropriée. Pour plus d'informations, consultez Comment : permettre aux utilisateurs de modifier des éléments dans des contrôles serveur Web DataList.

Le processus de sélection d'un élément est similaire et utilise l'événement SelectedIndexChanged. Vous ajoutez un bouton au modèle ItemTemplate et vous affectez la valeur select à sa propriété CommandName. Vous écrivez ensuite un gestionnaire d'événements pour l'événement SelectedIndexChanged. L'événement SelectedIndexChanged est déclenché lorsque l'utilisateur clique sur le bouton Sélectionner. Pour plus d'informations, consultez Comment : permettre aux utilisateurs de sélectionner des éléments dans des contrôles serveur Web DataList. Pour plus d'informations, consultez Comment : permettre aux utilisateurs de sélectionner des éléments dans des contrôles serveur Web DataList.

Retour au début