ASP.NET - Contrôle DataList

Le contrôle DataList, similaire au contrôle Repeater, est utilisé pour afficher une liste répétée de éléments limités par ce contrôle. Cependant, le contrôle DataList ajoute 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 de éléments limités par ce contrôle. Cependant, le contrôle DataList ajoute par défaut un tableau aux éléments de données. Le contrôle DataList 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 à un contrôle DataList.

Nous allons utiliser le fichier XML suivant dans cet exemple ("cdcatalog.xml") :

<?xml version="1.0" encoding="ISO-8859-1"?>
<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>

Veuillez consulter ce fichier XML :cdcatalog.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 l'instruction suivante en haut de la page .aspx :

<%@ Import Namespace="System.Data" %>

Ensuite, créez un DataSet pour ce fichier XML et chargez ce fichier XML au chargement de la page pour la première fois :

<script runat="server">
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> n'apparaît qu'une seule fois dans la sortie, tandis que le contenu de l'élément <ItemTemplate> apparaît en correspondance avec le "record" du DataSet, et enfin, le contenu de <FooterTemplate> n'apparaît qu'une seule fois dans la sortie :

<html>
<body>
<form runat="server">
<asp:DataList id="cdcatalog" runat="server">
<HeaderTemplate>
...
</HeaderTemplate>
<ItemTemplate>
...
</ItemTemplate>
<FooterTemplate>
...
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Ensuite, nous ajoutons un script capable de créer un DataSet et nous lions ce DataSet mycdcatalog au contrôle DataList. Nous utilisons également ces éléments pour remplir le contrôle DataList : le <HeaderTemplate> contenant l'en-tête, le <ItemTemplate> contenant les éléments à afficher, et le <FooterTemplate> contenant du texte. Notez que l'attribut gridlines de DataList est réglé sur "both" pour afficher les bordures de tableau :

<%@ Import Namespace="System.Data" %>
<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 codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Afficher cet exemple

Utilisation des styles

Vous pouvez également ajouter des styles au contrôle DataList pour le rendre plus élégant :

<%@ Import Namespace="System.Data" %>
<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 codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Afficher cet exemple

Utilisation de <AlternatingItemTemplate>

Vous pouvez ajouter l'élément <AlternatingItemTemplate> après l'élément <ItemTemplate> pour décrire l'apparence des lignes alternées. Vous pouvez appliquer des styles à la partie <AlternatingItemTemplate> à l'intérieur du contrôle DataList :

<%@ Import Namespace="System.Data" %>
<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>
© codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Afficher cet exemple