ASP.NET Web Forms - Contrôle Repeater
Le contrôle Repeater est utilisé pour afficher une liste répétée d'éléments liés au contrôle.
Lier un DataSet à un contrôle Repeater
Le contrôle Repeater est utilisé pour afficher une liste répétée d'éléments liés au contrôle. Le contrôle Repeater peut être lié à une table de base de données, à un fichier XML ou à une autre liste d'éléments. Ici, nous allons montrer comment lier un fichier XML au contrôle Repeater.
Dans notre exemple, nous utiliserons le fichier XML suivant ("cdcatalog.xml") :
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
<cd>
<title>Greatest Hits</title>
<artist>Dolly Parton</artist>
<country>USA</country>
<company>RCA</company>
<price>9.90</price>
<year>1982</year>
</cd>
<cd>
<title>Still got the blues</title>
<artist>Gary Moore</artist>
<country>UK</country>
<company>Virgin records</company>
<price>10.20</price>
<year>1990</year>
</cd>
<cd>
<title>Eros</title>
<artist>Eros Ramazzotti</artist>
<country>EU</country>
<company>BMG</company>
<price>9.90</price>
<year>1997</year>
</cd>
</catalog>
Afficher ce fichier XML :
Tout d'abord, importez l'espace de noms "System.Data". Nous avons besoin de cet espace de noms pour travailler avec l'objet DataSet. Incluez la directive suivante en haut de la page .aspx :
Ensuite, créez un DataSet pour le fichier XML et chargez le fichier XML dans le DataSet lors du premier chargement de la page :
sub Page_Load
if Not Page.IsPostBack then
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
end if
end sub
Ensuite, nous créons un contrôle Repeater dans la page .aspx. Le contenu de l'élément <HeaderTemplate> est rendu en premier et n'apparaît qu'une seule fois dans la sortie, tandis que le contenu de l'élément <ItemTemplate> est répété pour chaque « enregistrement » du DataSet. Enfin, le contenu de l'élément <FooterTemplate> n'apparaît qu'une seule fois dans la sortie :
<body>
<form runat="server">
<asp:Repeater id="cdcatalog" runat="server">
<HeaderTemplate>
...
</HeaderTemplate>
<ItemTemplate>
...
</ItemTemplate>
<FooterTemplate>
...
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
Ensuite, nous ajoutons le script qui crée le DataSet et lie le DataSet mycdcatalog au contrôle Repeater. Ensuite, nous utilisons des balises HTML pour remplir le contrôle Repeater et lier les éléments de données aux cellules dans la zone <ItemTemplate> à l'aide de <%#Container.DataItem("fieldname")%> :
Exemple
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
cdcatalog.DataSource=mycdcatalog
cdcatalog.DataBind()
end if
end sub
</script>
<html>
<body>
<form runat="server">
<asp:Repeater id="cdcatalog" runat="server">
<HeaderTemplate>
<table border="1" width="100%">
<tr>
<th>Titre</th>
<th>Artiste</th>
<th>Paese</th>
<th>Compagnie</th>
<th>Prix</th>
<th>Année</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Container.DataItem("title")%></td>
<td><%#Container.DataItem("artist")%></td>
<td><%#Container.DataItem("country")%></td>
<td><%#Container.DataItem("company")%></td>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
Voir l'exemple »
Utilisation de <AlternatingItemTemplate>
Vous pouvez ajouter un élément <AlternatingItemTemplate> après l'élément <ItemTemplate> pour décrire l'apparence des lignes alternées dans la sortie. Dans l'exemple ci-dessous, une ligne sur deux du tableau aura un fond gris clair :
Exemple
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
cdcatalog.DataSource=mycdcatalog
cdcatalog.DataBind()
end if
end sub
</script>
<html>
<body>
<form runat="server">
<asp:Repeater id="cdcatalog" runat="server">
<HeaderTemplate>
<table border="1" width="100%">
<tr>
<th>Titre</th>
<th>Artiste</th>
<th>Paese</th>
<th>Compagnie</th>
<th>Prix</th>
<th>Année</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Container.DataItem("title")%></td>
<td><%#Container.DataItem("artist")%></td>
<td><%#Container.DataItem("country")%></td>
<td><%#Container.DataItem("company")%></td>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr bgcolor="#e8e8e8">
<td><%#Container.DataItem("title")%></td>
<td><%#Container.DataItem("artist")%></td>
<td><%#Container.DataItem("country")%></td>
<td><%#Container.DataItem("company")%></td>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
Voir l'exemple »
Utilisation de <SeparatorTemplate>
L'élément <SeparatorTemplate> est utilisé pour décrire le séparateur entre chaque enregistrement. Dans l'exemple ci-dessous, une ligne horizontale est insérée entre chaque ligne du tableau :
Exemple
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
cdcatalog.DataSource=mycdcatalog
cdcatalog.DataBind()
end if
end sub
</script>
<html>
<body>
<form runat="server">
<asp:Repeater id="cdcatalog" runat="server">
<HeaderTemplate>
<table border="0" width="100%">
<tr>
<th>Titre</th>
<th>Artiste</th>
<th>Paese</th>
<th>Compagnie</th>
<th>Prix</th>
<th>Année</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Container.DataItem("title")%></td>
<td><%#Container.DataItem("artist")%></td>
<td><%#Container.DataItem("country")%></td>
<td><%#Container.DataItem("company")%></td>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</ItemTemplate>
<SeparatorTemplate>
<tr>
<td colspan="6"><hr /></td>
</tr>
</SeparatorTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
Voir l'exemple »
Autres extensions