ASP.NET Web Forms - Contrôle DataList
Le contrôle DataList, similaire au contrôle Repeater, est utilisé pour afficher une liste répétée d'éléments liés au contrôle. Toutefois, le contrôle DataList ajoutera, par défaut, un tableau aux éléments de données.
Lier DataSet au contrôle DataList
Le contrôle DataList, similaire au contrôle Repeater, est utilisé pour afficher une liste répétée d'éléments liés au contrôle. Toutefois, le contrôle DataList ajoutera, par défaut, un tableau aux éléments de données. Le contrôle DataList peut être lié à des tables de base de données, des fichiers XML ou d'autres listes d'éléments. Ici, nous allons montrer comment lier un fichier XML au contrôle DataList.
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 DataList 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> se répète 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:DataList id="cdcatalog" runat="server">
<HeaderTemplate>
...
</HeaderTemplate>
<ItemTemplate>
...
</ItemTemplate>
<FooterTemplate>
...
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>
Ensuite, nous ajoutons le script qui crée le DataSet et lie le DataSet mycdcatalog au contrôle DataList. Ensuite, remplissez le contrôle DataList avec <HeaderTemplate> contenant l'en-tête, <ItemTemplate> contenant les éléments de données à afficher, et <FooterTemplate> contenant le texte. Notez que vous pouvez définir la propriété gridlines du DataList sur "both" pour afficher les bordures 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:DataList id="cdcatalog"
gridlines="both" runat="server">
<HeaderTemplate>
Mon catalogue de CD
</HeaderTemplate>
<ItemTemplate>
"<%#Container.DataItem("title")%>" de
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<FooterTemplate>
Copyright Hege Refsnes
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>
Exemple de démonstration »
Utilisation des styles
Vous pouvez également ajouter des styles au contrôle DataList pour rendre le résultat plus attrayant :
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:DataList id="cdcatalog"
runat="server"
cellpadding="2"
cellspacing="2"
borderstyle="inset"
backcolor="#e8e8e8"
width="100%"
headerstyle-font-name="Verdana"
headerstyle-font-size="12pt"
headerstyle-horizontalalign="center"
headerstyle-font-bold="true"
itemstyle-backcolor="#778899"
itemstyle-forecolor="#ffffff"
footerstyle-font-size="9pt"
footerstyle-font-italic="true">
<HeaderTemplate>
Mon catalogue de CD
</HeaderTemplate>
<ItemTemplate>
"<%#Container.DataItem("title")%>" de
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<FooterTemplate>
Copyright Hege Refsnes
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>
Exemple de démonstration »
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. Vous pouvez ajouter des styles aux données dans la zone <AlternatingItemTemplate> du contrôle DataList :
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:DataList id="cdcatalog"
runat="server"
cellpadding="2"
cellspacing="2"
borderstyle="inset"
backcolor="#e8e8e8"
width="100%"
headerstyle-font-name="Verdana"
headerstyle-font-size="12pt"
headerstyle-horizontalalign="center"
headerstyle-font-bold="True"
itemstyle-backcolor="#778899"
itemstyle-forecolor="#ffffff"
alternatingitemstyle-backcolor="#e8e8e8"
alternatingitemstyle-forecolor="#000000"
footerstyle-font-size="9pt"
footerstyle-font-italic="True">
<HeaderTemplate>
Mon catalogue de CD
</HeaderTemplate>
<ItemTemplate>
"<%#Container.DataItem("title")%>" de
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<AlternatingItemTemplate>
"<%#Container.DataItem("title")%>" de
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</AlternatingItemTemplate>
<FooterTemplate>
© Hege Refsnes
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>
Exemple de démonstration »
Autres extensions