Affichage de plusieurs enregistrements par ligne avec le contrôle DataList (VB)

par Scott Mitchell

Télécharger le PDF

Dans ce tutoriel court, nous allons découvrir comment personnaliser la disposition de DataList via ses propriétés RepeatColumns et RepeatDirection.

Présentation

Les exemples DataList que nous avons vus dans les deux derniers didacticiels ont rendu chaque enregistrement de sa source de données sous forme de ligne dans un code HTML <table>à une seule colonne . Bien qu’il s’agit du comportement de DataList par défaut, il est très facile de personnaliser l’affichage DataList afin que les éléments de source de données soient répartis sur une table à plusieurs colonnes et à plusieurs lignes. De plus, il est possible d’avoir tous les éléments de source de données affichés dans une seule ligne, une liste de données à plusieurs colonnes.

Nous pouvons personnaliser la disposition de DataList via ses RepeatColumns propriétés RepeatDirection , qui, respectivement, indiquent le nombre de colonnes affichées et si ces éléments sont disposés verticalement ou horizontalement. La figure 1, par exemple, montre une DataList qui affiche des informations sur le produit dans une table avec trois colonnes.

Figure 1 : DataList affiche trois produits par ligne (cliquez pour afficher l’image de taille complète)

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 de produit dans une liste de données

Avant d'examiner les propriétés RepeatColumns et RepeatDirection, nous allons d'abord créer une liste de données sur notre page qui liste les informations produit à l'aide de la disposition de table avec une seule colonne et plusieurs lignes. 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 DataList 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 une DataList depuis la boîte à outils vers l’interface de conception. À partir de la balise active DataList, choisissez de créer un nouvel ObjectDataSource et configurez-le pour extraire ses données de la méthode de la classe ProductsBLL, en choisissant l’option (None) dans les onglets INSERT, UPDATE et DELETE de l’Assistant.

Après avoir créé et lié le nouvel ObjectDataSource au DataList, Visual Studio créera automatiquement un ItemTemplate qui affiche le nom et la valeur de chacun des champs de données du produit. Ajustez directement le ItemTemplate soit par le biais du balisage déclaratif, soit à partir de l'option Modifier les modèles dans la balise intelligente DataList, afin d'utiliser le balisage indiqué ci-dessus. Remplacez le texte Nom du produit, Nom de catégorie, et Prix par des contrôles d'étiquette qui utilisent la syntaxe de liaison de données appropriée pour attribuer des valeurs à leurs propriétés Text. Après avoir mis à jour le 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 syntaxe de liaison des données Eval pour le UnitPrice, afin de formater la valeur renvoyée en devise - Eval("UnitPrice", "{0:C}").

Prenez un moment pour visiter votre page dans un navigateur. Comme le montre la figure 2, DataList s’affiche sous la forme d’une table de produits à plusieurs lignes à une seule colonne.

Figure 2 : Par défaut, la liste de données s’affiche sous la forme d’une table à une seule colonne et à plusieurs lignes (cliquez pour afficher l’image de taille complète)

Étape 2 : Modification du sens de disposition de la liste de données

Même si le comportement par défaut de DataList consiste à mettre en place ses éléments verticalement dans une table à une seule colonne et à plusieurs lignes, ce comportement peut facilement être modifié par le biais de la propriété DataListRepeatDirection. La RepeatDirection propriété peut accepter l’une des deux valeurs possibles : Horizontal ou Vertical (valeur par défaut).

En modifiant la propriété RepeatDirection de Vertical à Horizontal, le DataList affiche ses enregistrements dans une seule rangée, créant une colonne par élément de la source de données. Pour illustrer cet effet, cliquez sur la Liste de données dans le Concepteur, puis, dans la fenêtre Propriétés, remplacez la propriété RepeatDirection de Vertical par Horizontal. Immédiatement lors de cette opération, le Concepteur ajuste la disposition de DataList, en 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 la liste de données sont disposés (cliquez pour afficher l’image de taille complète)

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 d'écran. Toutefois, pour les volumes de données plus volumineux, une seule ligne nécessite de nombreuses colonnes, ce qui envoie (push) ces éléments qui ne peuvent pas s’adapter à l’écran à droite. La figure 4 montre les produits lorsqu'ils sont rendus sur une Liste de données en 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 de taille complète)

Étape 3 : affichage des données dans une table à plusieurs colonnes et à plusieurs lignes

Pour créer une DataList à plusieurs colonnes et à plusieurs lignes, nous devons définir la RepeatColumns propriété sur la valeur correspondant au 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 (selon la valeur de la RepeatDirection propriété).

Pour notre exemple, affichons trois produits par ligne de table. Par conséquent, définissez la RepeatColumns propriété sur 3. Après avoir apporté 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 de taille complète)

La RepeatDirection propriété affecte la façon dont les éléments de la DataList 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 Aniseed Sirop sont disposés de gauche à droite, en haut en bas. Les trois produits suivants (à partir du Chef Anton s Cajun Seasoning) apparaissent dans une ligne sous les trois premiers. En revanche, la modification de la RepeatDirection propriété repositionne ces produits de haut en bas, de gauche à droite, comme l'illustre la figure 6.

Figure 6 : Ici, les produits sont disposés verticalement (cliquez pour afficher l’image de taille complète)

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 le Products tableau comporte actuellement 84 produits, qui sont divisibles par 3, il y a 28 lignes. Si le nombre d’éléments dans la source de données et la valeur de propriété RepeatColumns ne sont pas divisibles, la dernière ligne ou colonne aura des cellules vides. Si RepeatDirection est réglé sur Vertical, alors la dernière colonne aura des cellules vides ; si RepeatDirection est réglé sur Horizontal, alors la dernière ligne aura des cellules vides.

Résumé

DataList, par défaut, répertorie ses éléments dans une table à une seule colonne, à plusieurs lignes, qui imite la disposition d’un GridView avec un seul TemplateField. Bien que cette disposition par défaut soit acceptable, nous pouvons maximiser l'espace disponible à l'écran en affichant plusieurs éléments de source de données par ligne. Pour ce faire, il suffit de définir la propriété DataList RepeatColumns sur le nombre de colonnes à afficher par ligne. En outre, la propriété DataList RepeatDirection peut être utilisée pour indiquer si le contenu de la table à plusieurs colonnes, à 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 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. Le réviseur principal de ce didacticiel était John Suru. Vous souhaitez consulter mes prochains articles MSDN ? Si c’est le cas, déposez-moi une ligne à mitchell@4GuysFromRolla.com.

PrécédentSuivant