Derniers tutoriels de développement web
 

ASP.NET Web Forms - Le contrôle DataList


Le contrôle DataList est, comme la commande de répéteur, utilisé pour afficher une liste d'éléments répétés qui sont liés à la commande. Cependant, le contrôle DataList ajoute une table autour des éléments de données par défaut.


Liez un DataSet à un contrôle DataList

Le contrôle DataList est, comme la commande de répéteur, utilisé pour afficher une liste d'éléments répétés qui sont liés à la commande. Cependant, le contrôle DataList ajoute une table autour des éléments de données par défaut. Le contrôle DataList peut être lié à une table de base de données, un fichier XML, ou d'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 nos exemples ("cdcatalog.xml") le ("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>

Jetez un coup d' oeil au fichier XML: cdcatalog.xml

Tout d' abord, importer le "System.Data" espace de noms. Nous avons besoin de cet espace de noms pour travailler avec des objets DataSet. Inclure la directive suivante en haut d'une page .aspx:

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

Ensuite, créez un DataSet pour le fichier XML et charger le fichier XML dans le DataSet lorsque la page est chargé en premier lieu:

<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 DataList dans une page .aspx. Le contenu du <HeaderTemplate> élément sont rendus d' abord et une seule fois à l' intérieur de la sortie, le contenu du <ItemTemplate> élément sont répétés pour chaque "record" dans le DataSet, et enfin, le contenu du <FooterTemplate> élément sont rendu une fois à l'intérieur de 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 le script qui crée le DataSet et lie le DataSet mycdcatalog au contrôle DataList. Nous remplissons également le contrôle DataList avec un <HeaderTemplate> qui contient l' en- tête de la table, un <ItemTemplate> qui contient les éléments de données à afficher, et un <FooterTemplate> qui contient un texte. Notez que l' gridlines attribut du DataList est réglé sur "both" les "both" pour afficher les bordures du tableau:

Exemple

<%@ 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>
My CD Catalog
</HeaderTemplate>

<ItemTemplate>
"<%#Container.DataItem("title")%>" of
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>

<FooterTemplate>
Copyright Hege Refsnes
</FooterTemplate>

</asp:DataList>
</form>

</body>
</html>
Afficher un exemple »

Utilisation des styles

Vous pouvez également ajouter des styles au contrôle DataList pour rendre la sortie plus de fantaisie:

Exemple

<%@ 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>
My CD Catalog
</HeaderTemplate>

<ItemTemplate>
"<%#Container.DataItem("title")%>" of
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>

<FooterTemplate>
Copyright Hege Refsnes
</FooterTemplate>

</asp:DataList>
</form>

</body>
</html>
Afficher un exemple »

Utilisation de la <AlternatingItemTemplate>

Vous pouvez ajouter un <AlternatingItemTemplate> élément après la <ItemTemplate> élément pour décrire l'apparition de lignes de sortie alternatif. Vous pouvez le style des données dans la <AlternatingItemTemplate> section dans le contrôle DataList:

Exemple

<%@ 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>
My CD Catalog
</HeaderTemplate>

<ItemTemplate>
"<%#Container.DataItem("title")%>" of
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>

<AlternatingItemTemplate>
"<%#Container.DataItem("title")%>" of
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</AlternatingItemTemplate>

<FooterTemplate>
&copy; Hege Refsnes
</FooterTemplate>

</asp:DataList>
</form>

</body>
</html>
Afficher un exemple »