Comment : ajouter des contrôles serveur Web Repeater à une page Web Forms
Mise à jour : novembre 2007
Le contrôle serveur Web Repeater est un contrôle conteneur lié aux données qui génère une liste d'éléments individuels. Vous définissez la disposition des éléments individuels dans une page Web à l'aide de modèles. Lors de l'exécution de la page, le contrôle répète la disposition de chaque élément de la source de données. Plusieurs étapes sont nécessaires pour ajouter un contrôle serveur Web Repeater à une page Web Forms. La procédure ci-dessous décrit les étapes de base nécessaires à la création d'un contrôle Repeater opérationnel.
Pour ajouter un contrôle serveur Web Repeater à une page Web Forms
En mode Design, à partir de l'onglet Données de la boîte à outils, faites glisser sur la page un contrôle de source de données, tel que le contrôle SqlDataSource ou ObjectDataSource.
Utilisez l'Assistant Configuration de source de données pour définir la connexion et la requête, ou la méthode de récupération des données, pour le contrôle de source de données. L'Assistant Configurer la source de données est disponible pour toutes les sources de données, à l'exception du contrôle SiteMapDataSource, qui n'a besoin que de la présence d'un plan de site pour remplir le contrôle. Pour ouvrir l'Assistant Configurer la source de données, procédez comme suit :
Cliquez avec le bouton droit sur le contrôle de source de données, puis cliquez sur Afficher la balise active.
Dans la fenêtre Data Source Tasks, cliquez sur Configurer la source de données.
À partir de l'onglet Standard de la boîte à outils, faites glisser un contrôle Repeater sur la page.
Cliquez avec le bouton droit sur le contrôle Repeater, puis cliquez sur Afficher la balise active.
Sous la liste Choisir la source de données, cliquez sur le nom du contrôle de source de données que vous avez créé aux étapes 1 et 2.
Cela définit les propriétés DataSourceID du contrôle. Si la requête comprend une clé primaire, la propriété DataKeyField des contrôles est, elle aussi, définie.
Cliquez sur Source pour basculer en mode Source.
Pour définir des modèles, vous devez vous trouver en mode Source.
Ajoutez un élément <ItemTemplate> à la page en tant qu'enfant du contrôle Repeater. Pour obtenir la syntaxe, consultez Syntaxe déclarative du contrôle serveur Web Repeater
.gif "Remarque")
Remarque :Pour effectuer un rendu au moment de l'exécution, le contrôle Repeater doit contenir un ItemTemplate contenant lui-même des expressions de liaison de données sous la forme <%# Eval("nom de champ") %>, où nom de champ est le nom d'un champ de la base de données. Pour des informations générales sur l'utilisation des modèles, consultez Modèles de contrôles serveur Web ASP.NET.
Ajoutez du HTML et des contrôles serveur Web ou HTML au ItemTemplate.
Facultativement, définissez les modèles suivants : AlternatingItemTemplateSeparatorTemplate, HeaderTemplate, FooterTemplate.
L'exemple de code suivant montre comment utiliser un contrôle Repeater pour afficher des données dans un tableau HTML. L'élément table commence dans HeaderTemplate et finit dans FooterTemplate. Dans le corps du contrôle Repeater, les cellules du tableau servent à afficher les colonnes de la source de données. L'élément AlternatingItemTemplate est identique à l'élément ItemTemplate mais la couleur d'arrière-plan des cellules du tableau est différente.
<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" > <title>ASP.NET Repeater Example</title> </head> <body> <form id="form1" > <div> <asp:Repeater ID="Repeater1" DataSourceID="SqlDataSource1"> <HeaderTemplate> <table> <tr> <th> Name</th> <th> Description</th> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td style="background-color:#CCFFCC"> <asp:Label ID="Label1" Text='<%# Eval("CategoryName") %>' /> </td> <td style="background-color:#CCFFCC"> <asp:Label ID="Label2" Text='<%# Eval("Description") %>' /> </td> </tr> </ItemTemplate> <AlternatingItemTemplate> <tr> <td> <asp:Label ID="Label3" Text='<%# Eval("CategoryName") %>' /> </td> <td> <asp:Label ID="Label4" Text='<%# Eval("Description") %>' /> </td> </tr> </AlternatingItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" ID="SqlDataSource1" SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]"></asp:SqlDataSource> </div> </form> </body> </html><%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" > <title>ASP.NET Repeater Example</title> </head> <body> <form id="form1" > <div> <asp:Repeater ID="Repeater1" DataSourceID="SqlDataSource1"> <HeaderTemplate> <table> <tr> <th> Name</th> <th> Description</th> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td style="background-color:#CCFFCC"> <asp:Label ID="Label1" Text='<%# Eval("CategoryName") %>' /> </td> <td style="background-color:#CCFFCC"> <asp:Label ID="Label2" Text='<%# Eval("Description") %>' /> </td> </tr> </ItemTemplate> <AlternatingItemTemplate> <tr> <td> <asp:Label ID="Label3" Text='<%# Eval("CategoryName") %>' /> </td> <td> <asp:Label ID="Label4" Text='<%# Eval("Description") %>' /> </td> </tr> </AlternatingItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" ID="SqlDataSource1" SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]"></asp:SqlDataSource> </div> </form> </body> </html>