Sintassi dichiarativa per il controllo server Web DataList
Aggiornamento: novembre 2007
Visualizza gli elementi di un'origine dati utilizzando diversi modelli. Modificando i modelli che compongono i diversi componenti del controllo DataList, ad esempio ItemTemplate e HeaderTemplate, è possibile personalizzarne l'aspetto e i contenuti.
<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>
Note
È possibile modificare il layout e il contenuto del controllo tramite la definizione di modelli. Nella tabella riportata di seguito sono elencati i diversi modelli del controllo DataList.
Analogo all'elemento ItemTemplate, con la differenza che nel controllo DataList viene eseguito il rendering a righe alterne. È possibile specificare un aspetto diverso per l'elemento AlternatingItemTemplate impostandone le proprietà di stile. |
|
Layout di un elemento in modalità di modifica. In questo modello sono in genere contenuti controlli di modifica, quali i controlli TextBox. Il modello EditItemTemplate viene richiamato per una riga del controlloDataList quando EditItemIndex è impostato sul numero ordinale di tale riga. |
|
Testo e controlli di cui eseguire il rendering nel piè di pagina del controllo DataList. Il modello FooterTemplate non può essere associato a dati. |
|
Testo e controlli di cui eseguire il rendering nell'intestazione del controllo DataList. Il modello HeaderTemplate non può essere associato a dati. |
|
Elementi di cui eseguire il rendering una volta per ogni riga inclusa nell'origine dati. |
|
Elementi di cui eseguire il rendering quando l'utente seleziona un elemento nel controllo DataList. Viene generalmente utilizzato per espandere il numero dei campi dati visualizzati e per evidenziare la riga. |
|
Elementi di cui deve essere eseguito il rendering tra ciascun elemento. L'elemento SeparatorTemplate non può essere associato a dati. |
Specificando uno stile per le diverse parti del controllo DataList, è possibile personalizzarne l'aspetto. Nella tabella riportata di seguito sono elencate le diverse proprietà di stile per il controllo dell'aspetto delle diverse parti del controllo DataList.
Proprietà di stile |
Descrizione |
Classe di stile |
|---|---|---|
Stile di elementi alternati. |
||
Stile dell'elemento in corso di modifica. |
||
Stile del piè di pagina al termine dell'elenco (se presente). |
||
Stile dell'intestazione all'inizio dell'elenco (se presente). |
||
Stile di singoli elementi. |
||
Stile dell'elemento selezionato. |
||
Stile del separatore tra ogni elemento. |
Nota
Il controllo DataList è diverso dal controllo Repeater, poiché supporta il rendering direzionale, tramite le proprietà RepeatColumns e RepeatDirection, e la possibilità di eseguire il rendering in una tabella HTML.
L'insieme Items contiene i membri associati a dati del controllo DataList. L'insieme viene compilato quando viene richiamato il metodo DataBind per il controllo DataList. L'eventuale intestazione viene aggiunta per prima, seguita da un oggetto Item per ogni riga di dati. Se esiste un SeparatorTemplate, vengono creati dei Separators che vengono aggiunti tra ciascun elemento ma non all'insieme Items.
Al termine della creazione di tutti gli elementi per le righe di DataSource, l'elemento Footer viene aggiunto al controllo, ma non all'insieme Items. Infine, il controllo genera l'evento ItemCreated per ogni elemento, inclusi l'intestazione, il piè di pagina e i separatori. A differenza di molti insiemi, l'insieme Items non espone metodi Add o Remove. Se, tuttavia, si fornisce un gestore per l'evento ItemCreated, è possibile modificare i contenuti di un elemento.
.gif "Nota di avviso") Attenzione: |
|---|
Il testo non viene codificato in formato HTML prima di essere visualizzato nel controllo DataList. È pertanto possibile incorporare script all'interno dei tag HTML presenti nel testo. Se i valori del controllo provengono dall'input dell'utente, assicurarsi di convalidare tali valori per evitare problemi di protezione. |
Per informazioni dettagliate sulle proprietà e sugli eventi del controllo server Web DataList, vedere la documentazione relativa alla classe DataList.
Esempio
Nell'esempio riportato di seguito viene illustrato come utilizzare il controllo DataList per visualizzare gli elementi di un'origine dati.
<%@ 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>