Syntaxe déclarative du contrôle serveur Web DataList
Mise à jour : novembre 2007
Affiche les éléments provenant d'une source de données à l'aide de modèles. Vous pouvez personnaliser l'apparence et le contenu du contrôle en manipulant les modèles qui constituent les différents composants du contrôle DataList, tels que ItemTemplate et HeaderTemplate.
<asp:DataList
AccessKey="string"
BackColor="color name|#dddddd"
BorderColor="color name|#dddddd"
BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|
Inset|Outset"
BorderWidth="size"
Caption="string"
CaptionAlign="NotSet|Top|Bottom|Left|Right"
CellPadding="integer"
CellSpacing="integer"
CssClass="string"
DataKeyField="string"
DataMember="string"
DataSource="string"
DataSourceID="string"
EditItemIndex="integer"
Enabled="True|False"
EnableTheming="True|False"
EnableViewState="True|False"
ExtractTemplateRows="True|False"
Font-Bold="True|False"
Font-Italic="True|False"
Font-Names="string"
Font-Overline="True|False"
Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|
Large|X-Large|XX-Large"
Font-Strikeout="True|False"
Font-Underline="True|False"
ForeColor="color name|#dddddd"
GridLines="None|Horizontal|Vertical|Both"
Height="size"
HorizontalAlign="NotSet|Left|Center|Right|Justify"
ID="string"
OnCancelCommand="CancelCommand event handler"
OnDataBinding="DataBinding event handler"
OnDeleteCommand="DeleteCommand event handler"
OnDisposed="Disposed event handler"
OnEditCommand="EditCommand event handler"
OnInit="Init event handler"
OnItemCommand="ItemCommand event handler"
OnItemCreated="ItemCreated event handler"
OnItemDataBound="ItemDataBound event handler"
OnLoad="Load event handler"
OnPreRender="PreRender event handler"
OnSelectedIndexChanged="SelectedIndexChanged event handler"
OnUnload="Unload event handler"
OnUpdateCommand="UpdateCommand event handler"
RepeatColumns="integer"
RepeatDirection="Horizontal|Vertical"
RepeatLayout="Table|Flow"
runat="server"
SelectedIndex="integer"
ShowFooter="True|False"
ShowHeader="True|False"
SkinID="string"
Style="string"
TabIndex="integer"
ToolTip="string"
UseAccessibleHeader="True|False"
Visible="True|False"
Width="size"
>
<AlternatingItemStyle />
<AlternatingItemTemplate>
<!-- child controls -->
</AlternatingItemTemplate>
<EditItemStyle />
<EditItemTemplate>
<!-- child controls -->
</EditItemTemplate>
<FooterStyle />
<FooterTemplate>
<!-- child controls -->
</FooterTemplate>
<HeaderStyle />
<HeaderTemplate>
<!-- child controls -->
</HeaderTemplate>
<ItemStyle />
<ItemTemplate>
<!-- child controls -->
</ItemTemplate>
<SelectedItemStyle />
<SelectedItemTemplate>
<!-- child controls -->
</SelectedItemTemplate>
<SeparatorStyle />
<SeparatorTemplate>
<!-- child controls -->
</SeparatorTemplate>
</asp:DataList>
Notes
Vous pouvez manipuler la présentation et le contenu du contrôle en définissant des modèles. Le tableau suivant répertorie les différents modèles du contrôle DataList.
Similaire à l'élément ItemTemplate mais rendu une ligne sur deux (lignes alternées) dans le contrôle DataList. Vous pouvez spécifier une apparence différente pour l'élément AlternatingItemTemplate en définissant ses propriétés de style. |
|
Aspect d'un élément quand il a été défini pour être utilisé en mode édition. Ce modèle contient généralement des contrôles d'édition (tels que les contrôles TextBox). Le modèle EditItemTemplate est appelé pour une ligne dans le contrôle DataList lorsque EditItemIndex a pour valeur le nombre ordinal de cette ligne. |
|
Texte et contrôles à restituer dans le bas (pied de page) du contrôle DataList. FooterTemplate ne peut pas être lié aux données. |
|
Texte et contrôles à restituer en haut (en-tête) du contrôle DataList. HeaderTemplate ne peut pas être lié aux données. |
|
Éléments à rendre une seule fois pour chaque ligne de la source de données. |
|
Éléments à restituer lorsque l'utilisateur sélectionne un élément dans le contrôle DataList. Principales utilisations : augmenter le nombre de champs de données affichés et mettre la ligne en surbrillance. |
|
Éléments à rendre entre chaque élément. L'élément SeparatorTemplate ne peut pas être lié aux données. |
Vous pouvez personnaliser l'apparence du contrôle DataList en spécifiant un style pour les différentes parties du contrôle. Le tableau suivant répertorie les propriétés de style qui contrôlent l'apparence des différentes parties du contrôle DataList.
Propriété de style |
Description |
Classe de style |
|---|---|---|
Style des autres éléments (éléments de remplacement). |
||
Style de l'élément en cours d'édition. |
||
Style du pied de page éventuel en fin de liste. |
||
Style de l'en-tête éventuel en début de liste. |
||
Style des éléments individuels. |
||
Style de l'élément sélectionné. |
||
Style du séparateur entre chaque élément. |
.gif "Remarque") Remarque : |
|---|
Le contrôle DataList diffère du contrôle Repeater en cela qu'il prend en charge le rendu directionnel (en utilisant les propriétés RepeatColumns et RepeatDirection) et qu'il offre la possibilité de restituer le contenu dans un tableau HTML. |
La collection Items contient les membres liés aux données du contrôle DataList. La collection est remplie quand la méthode DataBind est appelée sur le contrôle DataList. L'en-tête éventuel est ajouté en premier, suivi d'un seul objet Item pour chaque ligne de données. S'il existe une propriété SeparatorTemplate, des éléments Separators sont créés et ajoutés entre chaque élément, mais ils ne sont pas ajoutés à la collection Items.
Après avoir créé tous les éléments des lignes dans DataSource, l'élément Footer est ajouté au contrôle (mais pas à la collection Items). Enfin, le contrôle déclenche l'événement ItemCreated pour chaque élément, y compris l'en-tête, le pied de page et les séparateurs. Contrairement à la plupart des collections, la collection Items n'expose pas de méthodes Add ou Remove. Cependant, vous pouvez modifier le contenu d'un élément en fournissant un gestionnaire pour l'événement ItemCreated.
.gif "Remarque Attention") Attention : |
|---|
Le texte n'est pas codé au format HTML avant d'être affiché dans le contrôle DataList. Il est ainsi possible d'incorporer du script dans les balises HTML dans le texte. Si les valeurs du contrôle proviennent des entrées d'utilisateur, veillez à valider les valeurs pour permettre d'empêcher les failles en matière de sécurité. |
Pour plus d'informations sur les propriétés et événements du contrôle serveur Web DataList, consultez la documentation de la classe DataList.
Exemple
L'exemple suivant montre comment utiliser le contrôle DataList pour afficher les éléments d'une source de données.
<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!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" >
<script runat="server">
Function CreateDataSource() As ICollection
' Create sample data for the DataList control.
Dim dt As DataTable = New DataTable()
dim dr As DataRow
' Define the columns of the table.
dt.Columns.Add(New DataColumn("IntegerValue", GetType(Int32)))
dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
dt.Columns.Add(New DataColumn("CurrencyValue", GetType(Double)))
dt.Columns.Add(New DataColumn("ImageValue", GetType(String)))
' Populate the table with sample values.
Dim i As Integer
For i = 0 To 8
dr = dt.NewRow()
dr(0) = i
dr(1) = "Description for item " & i.ToString()
dr(2) = 1.23 * (i + 1)
dr(3) = "Image" & i.ToString() & ".jpg"
dt.Rows.Add(dr)
Next i
Dim dv As DataView = New DataView(dt)
Return dv
End Function
Sub Page_Load(sender As Object, e As EventArgs)
' Load sample data only once, when the page is first loaded.
If Not IsPostBack Then
ItemsList.DataSource = CreateDataSource()
ItemsList.DataBind()
End If
End Sub
</script>
<head runat="server">
<title>DataList Example</title>
</head>
<body>
<form id="form1" runat="server">
<h3>DataList Example</h3>
<asp:DataList id="ItemsList"
BorderColor="black"
CellPadding="5"
CellSpacing="5"
RepeatDirection="Vertical"
RepeatLayout="Table"
RepeatColumns="3"
runat="server">
<HeaderStyle BackColor="#aaaadd">
</HeaderStyle>
<AlternatingItemStyle BackColor="Gainsboro">
</AlternatingItemStyle>
<HeaderTemplate>
List of items
</HeaderTemplate>
<ItemTemplate>
Description: <br />
<%# DataBinder.Eval(Container.DataItem, "StringValue") %>
<br />
Price: <%# DataBinder.Eval(Container.DataItem, "CurrencyValue", "{0:c}") %>
<br />
<asp:Image id="ProductImage" AlternateText="Product picture"
ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ImageValue") %>'
runat="server"/>
</ItemTemplate>
</asp:DataList>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!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" >
<script runat="server">
ICollection CreateDataSource()
{
// Create sample data for the DataList control.
DataTable dt = new DataTable();
DataRow dr;
// Define the columns of the table.
dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32)));
dt.Columns.Add(new DataColumn("StringValue", typeof(String)));
dt.Columns.Add(new DataColumn("CurrencyValue", typeof(double)));
dt.Columns.Add(new DataColumn("ImageValue", typeof(String)));
// Populate the table with sample values.
for (int i = 0; i < 9; i++)
{
dr = dt.NewRow();
dr[0] = i;
dr[1] = "Description for item " + i.ToString();
dr[2] = 1.23 * (i + 1);
dr[3] = "Image" + i.ToString() + ".jpg";
dt.Rows.Add(dr);
}
DataView dv = new DataView(dt);
return dv;
}
void Page_Load(Object sender, EventArgs e)
{
// Load sample data only once, when the page is first loaded.
if (!IsPostBack)
{
ItemsList.DataSource = CreateDataSource();
ItemsList.DataBind();
}
}
</script>
<head runat="server">
<title>DataList Example</title>
</head>
<body>
<form id="form1" runat="server">
<h3>DataList Example</h3>
<asp:DataList id="ItemsList"
BorderColor="black"
CellPadding="5"
CellSpacing="5"
RepeatDirection="Vertical"
RepeatLayout="Table"
RepeatColumns="3"
runat="server">
<HeaderStyle BackColor="#aaaadd">
</HeaderStyle>
<AlternatingItemStyle BackColor="Gainsboro">
</AlternatingItemStyle>
<HeaderTemplate>
List of items
</HeaderTemplate>
<ItemTemplate>
Description: <br />
<%# DataBinder.Eval(Container.DataItem, "StringValue") %>
<br />
Price: <%# DataBinder.Eval(Container.DataItem, "CurrencyValue", "{0:c}") %>
<br />
<asp:Image id="ProductImage" AlternateText="Product picture"
ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ImageValue") %>'
runat="server"/>
</ItemTemplate>
</asp:DataList>
</form>
</body>
</html>