Affichage de plusieurs enregistrements par ligne avec le contrôle DataList (VB)
par Scott Mitchell
Dans ce court tutoriel, nous allons découvrir comment personnaliser la disposition du DataList à l’aide de ses propriétés RepeatColumns et RepeatDirection.
Introduction
Les exemples DataList que nous avons vus dans les deux derniers didacticiels ont rendu chaque enregistrement de sa source de données sous la forme d’une ligne dans une seule colonne HTML <table>. Bien qu’il s’agit du comportement DataList par défaut, il est très facile de personnaliser l’affichage DataList de sorte que les éléments de source de données soient répartis sur une table à plusieurs colonnes et plusieurs lignes. En outre, il est possible d’afficher tous les éléments de source de données dans une liste datalist à une seule ligne et à plusieurs colonnes.
Nous pouvons personnaliser la disposition de DataList à l’aide de ses RepeatColumns propriétés et RepeatDirection , qui, respectivement, indiquent le nombre de colonnes rendues et si ces éléments sont disposés verticalement ou horizontalement. La figure 1, par exemple, montre une liste de données qui affiche des informations sur le produit dans une table de trois colonnes.
Figure 1 : La liste de données affiche trois produits par ligne (cliquer pour afficher l’image en taille réelle)
En affichant plusieurs éléments de source de données par ligne, datalist peut utiliser plus efficacement l’espace d’écran horizontal. Dans ce court tutoriel, nous allons explorer ces deux propriétés DataList.
Étape 1 : Affichage des informations sur le produit dans une liste de données
Avant d’examiner les RepeatColumns propriétés et RepeatDirection , nous allons d’abord créer un DataList sur notre page qui répertorie les informations sur le produit à l’aide de la disposition de table à colonne unique et multiligne standard. Pour cet exemple, affichons le nom, la catégorie et le prix du produit à l’aide du balisage suivant :
<h4>Product Name</h4>
Available in the Category Name store for Price
Nous avons vu comment lier des données à une liste de données dans les exemples précédents. Je vais donc passer rapidement à ces étapes. Commencez par ouvrir la RepeatColumnAndDirection.aspx page dans le DataListRepeaterBasics dossier et faites glisser un DataList de la boîte à outils vers le Designer. À partir de la balise active de DataList, choisissez de créer un objet ObjectDataSource et de le configurer pour extraire ses données de la méthode de classe ProductsBLL , GetProducts en choisissant l’option (Aucun) dans les onglets INSERT, UPDATE et DELETE de l’Assistant.
Après avoir créé et lier le nouvel ObjetDataSource au DataList, Visual Studio crée automatiquement un ItemTemplate qui affiche le nom et la valeur de chacun des champs de données de produit. Ajustez le ItemTemplate directement via le balisage déclaratif ou à partir de l’option Modifier les modèles dans la balise active de DataList afin qu’elle utilise le balisage indiqué ci-dessus, en remplaçant le texte Product Name, Category Name et Price par les contrôles Label qui utilisent la syntaxe de liaison de données appropriée pour affecter des valeurs à leurs Text propriétés. Après la mise à jour de ItemTemplate, le balisage déclaratif de votre page doit ressembler à ce qui suit :
<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
DataSourceID="ObjectDataSource1" EnableViewState="False">
<ItemTemplate>
<h4>
<asp:Label runat="server" ID="ProductNameLabel"
Text='<%# Eval("ProductName") %>'></asp:Label>
</h4>
Available in the
<asp:Label runat="server" ID="CategoryNameLabel"
Text='<%# Eval("CategoryName") %>' />
store for
<asp:Label runat="server" ID="UnitPriceLabel"
Text='<%# Eval("UnitPrice", "{0:C}") %>' />
</ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
OldValuesParameterFormatString="original_{0}"
SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>
Notez que j’ai inclus un spécificateur de format dans la Eval syntaxe de liaison de données pour le UnitPrice, en mettant en forme la valeur retournée en tant que devise - Eval("UnitPrice", "{0:C}").
Prenez un moment pour visiter votre page dans un navigateur. Comme le montre la figure 2, le DataList s’affiche sous la forme d’une table de produits à colonne unique et à plusieurs lignes.
Figure 2 : Par défaut, la liste de données s’affiche sous la forme d’une table multiligne à colonne unique (cliquer pour afficher l’image en taille réelle)
Étape 2 : Modification du sens de disposition de DataList
Bien que le comportement par défaut du DataList consiste à disposer ses éléments verticalement dans une table à colonne unique et à plusieurs lignes, ce comportement peut facilement être modifié par le biais de la propriété DataList.RepeatDirection La RepeatDirection propriété peut accepter l’une des deux valeurs possibles : Horizontal ou Vertical (valeur par défaut).
En modifiant la RepeatDirection propriété de Vertical en Horizontal, le DataList restitue ses enregistrements dans une seule ligne, créant ainsi une colonne par élément de source de données. Pour illustrer cet effet, cliquez sur datalist dans le Designer, puis, à partir du Fenêtre Propriétés, remplacez la RepeatDirection propriété par VerticalHorizontal. Immédiatement après cela, l’Designer ajuste la disposition de la DataList, créant une interface à une seule ligne et plusieurs colonnes (voir la figure 3).
Figure 3 : La RepeatDirection propriété détermine la façon dont les éléments de datalist sont disposés (cliquez pour afficher l’image en taille réelle)
Lorsque vous affichez de petites quantités de données, une table à une seule ligne et à plusieurs colonnes peut être un moyen idéal pour optimiser l’espace de l’écran. Toutefois, pour des volumes de données plus importants, une seule ligne nécessite de nombreuses colonnes, ce qui pousse vers la droite les éléments qui ne peuvent pas tenir sur l’écran. La figure 4 montre les produits lorsqu’ils sont affichés dans une liste de données à une seule ligne. Étant donné qu’il existe de nombreux produits (plus de 80), l’utilisateur devra faire défiler l’écran vers la droite pour afficher des informations sur chacun des produits.
Figure 4 : Pour les sources de données suffisamment volumineuses, une liste de données à colonne unique nécessite un défilement horizontal (cliquez pour afficher l’image en taille réelle)
Étape 3 : Affichage des données dans une table à plusieurs colonnes et plusieurs lignes
Pour créer un DataList multi-colonnes et plusieurs lignes, nous devons définir la RepeatColumns propriété sur le nombre de colonnes à afficher. Par défaut, la RepeatColumns propriété est définie sur 0, ce qui entraîne l’affichage de tous ses éléments dans une seule ligne ou une colonne (en fonction de la valeur de la RepeatDirection propriété).
Pour notre exemple, nous allons afficher trois produits par ligne de tableau. Par conséquent, définissez la propriété sur RepeatColumns 3. Après avoir effectué cette modification, prenez un moment pour afficher les résultats dans un navigateur. Comme le montre la figure 5, les produits sont désormais répertoriés dans une table à trois colonnes et à plusieurs lignes.
Figure 5 : Trois produits sont affichés par ligne (cliquez pour afficher l’image en taille réelle)
La RepeatDirection propriété affecte la façon dont les éléments de la liste de données sont disposés. La figure 5 montre les résultats avec la RepeatDirection propriété définie sur Horizontal. Notez que les trois premiers produits Chai, Chang et Sirop Anised sont disposés de gauche à droite, de haut en bas. Les trois produits suivants (en commençant par l’assaisonnement cajun du Chef Anton) apparaissent dans une rangée sous les trois premiers. La modification de la RepeatDirection propriété en Vertical, toutefois, dispose ces produits de haut en bas, de gauche à droite, comme l’illustre la figure 6.
Figure 6 : Ici, les produits sont disposés verticalement (cliquer pour afficher l’image en taille réelle)
Le nombre de lignes affichées dans la table résultante dépend du nombre total d’enregistrements liés à datalist. Précisément, il s’agit du plafond du nombre total d’éléments de source de données divisé par la valeur de propriété RepeatColumns . Étant donné que la Products table comporte actuellement 84 produits, ce qui est divisible par 3, il y a 28 lignes. Si le nombre d’éléments dans la source de données et la valeur de la RepeatColumns propriété ne sont pas divisibles, la dernière ligne ou colonne aura des cellules vides. Si a la RepeatDirection valeur Vertical, la dernière colonne aura des cellules vides ; si RepeatDirection a Horizontalla valeur , la dernière ligne aura les cellules vides.
Résumé
Le DataList, par défaut, répertorie ses éléments dans une table à plusieurs lignes à colonne unique, qui imite la disposition d’un GridView avec un seul TemplateField. Bien que cette disposition par défaut soit acceptable, nous pouvons optimiser l’espace de l’écran en affichant plusieurs éléments de source de données par ligne. Pour ce faire, il s’agit simplement de définir la propriété de RepeatColumns DataList sur le nombre de colonnes à afficher par ligne. En outre, la propriété DataList peut RepeatDirection être utilisée pour indiquer si le contenu de la table à plusieurs colonnes et plusieurs lignes doit être disposé horizontalement de gauche à droite, de haut en bas ou verticalement de haut en bas, de gauche à droite.
À 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.
Remerciements spéciaux à
Cette série de tutoriels a été examinée par de nombreux réviseurs utiles. Le réviseur principal de ce tutoriel était John Suru. Vous souhaitez consulter mes prochains articles MSDN ? Si c’est le cas, déposez-moi une ligne à mitchell@4GuysFromRolla.com.