DataList-Webserversteuerelement
Zeigt die Elemente aus einer Datenquelle in Vorlagen an. Sie können das Erscheinungsbild und den Inhalt des Steuerelements ändern, indem Sie die Vorlagen bearbeiten, aus denen sich die verschiedenen Komponenten des DataList-Steuerelements zusammensetzen, z. B. ItemTemplate und HeaderTemplate.
<asp:DataListid="DataList1" CellPadding="pixels" CellSpacing="pixels" DataKeyField="DataSourceKeyField" DataSource='<%databindingexpression%>' ExtractTemplateRows="True|False" GridLines="None|Horizontal|Vertical|Both" RepeatColumns="ColumnCount" RepeatDirection="Vertical|Horizontal" RepeatLayout="Flow|Table" ShowFooter="True|False" ShowHeader="True|False" OnCancelCommand="OnCancelCommandMethod" OnDeleteCommand="OnDeleteCommandMethod" OnEditCommand="OnEditCommandMethod" OnItemCommand="OnItemCommandMethod" OnItemCreated="OnItemCreatedMethod" OnUpdateCommand="OnUpdateCommandMethod" runat="server"> <AlternatingItemStyle ForeColor="Blue"/>
<EditItemStyle BackColor="Yellow"/> <FooterStyle BorderColor="Gray"/> <HeaderStyle BorderColor="Gray"/> <ItemStyle Font-Bold="True"/> <PagerStyle Font-Name="Ariel"/> <SelectedItemStyle BackColor="Blue"/> <HeaderTemplate> Header template HTML </HeaderTemplate> <ItemTemplate> Item template HTML </ItemTemplate> <AlternatingItemTemplate> Alternating item template HTML </AlternatingItemTemplate> <EditItemTemplate> Edited item template HTML </EditItemTemplate> <SelectedItemTemplate> Selected item template HTML </SelectedItemTemplate> <SeparatorTemplate> Separator template HTML </SeparatorTemplate> <FooterTemplate> Footer template HTML </FooterTemplate></asp:DataList>
Hinweise
Sie können das Layout und den Inhalt des Steuerelements durch Definieren von Vorlagen bearbeiten. In der folgenden Tabelle sind die verschiedenen Vorlagen für das DataList-Steuerelement aufgelistet.
| AlternatingItemTemplate | Entspricht dem ItemTemplate-Element, wird jedoch für jede zweite Zeile (alternierende Zeilen) im DataList-Steuerelement dargestellt. Sie können ein anderes Erscheinungsbild für das AlternatingItemTemplate-Element angeben, indem Sie dessen Formateigenschaften setzen. |
| EditItemTemplate | Das Layout eines Elements, nachdem es in den Bearbeitungsmodus geschaltet wurde. Diese Vorlage enthält typischerweise Bearbeitungssteuerelemente (z. B. TextBox-Steuerelemente). EditItemTemplate wird für eine Zeile im DataList-Steuerelement aufgerufen, wenn EditItemIndex auf die Ordnungszahl dieser Zeile gesetzt ist. |
| FooterTemplate | Der Text und die Steuerelemente, die am unteren Rand (der Fußzeile) des DataList-Steuerelements dargestellt werden sollen.
FooterTemplate kann nicht datengebunden sein. |
| HeaderTemplate | Der Text und die Steuerelemente, die am oberen Rand (der Kopfzeile) des DataList-Steuerelements dargestellt werden sollen.
HeaderTemplate kann nicht datengebunden sein. |
| ItemTemplate | Die Elemente, die einmal für jede Zeile in der Datenquelle dargestellt werden sollen. |
| SelectedItemTemplate | Die Elemente, die dargestellt werden sollen, wenn der Benutzer ein Element im DataList-Steuerelement auswählt. Dies wird typischerweise verwendet, um die Anzahl der angezeigten Datenfelder zu erweitern und die betreffende Zeile optisch hervorzuheben. |
| SeparatorTemplate | Die Elemente, die zwischen den einzelnen Elementen dargestellt werden sollen.
Das SeparatorTemplate-Element kann nicht datengebunden sein. |
Sie können die Darstellung des DataList-Steuerelements anpassen, indem Sie ein Format für die verschiedenen Teile des Steuerelements angeben. In der folgenden Tabelle werden die Formateigenschaften aufgelistet, die das Erscheinungsbild der verschiedenen Teile des DataList-Steuerelements steuern.
| Style-Eigenschaft | Beschreibung | Style-Klasse |
|---|---|---|
| AlternatingItemStyle | Das Format für jedes zweite Element (alternierende Elemente). | TableItemStyle |
| EditItemStyle | Das Format für das Element, das bearbeitet wird. | TableItemStyle |
| FooterStyle | Das Format für die Fußzeile am unteren Ende der Liste (falls vorhanden). | TableItemStyle |
| HeaderStyle | Das Format für die Kopfzeile am oberen Ende der Liste (falls vorhanden). | TableItemStyle |
| ItemStyle | Das Format für die einzelnen Elemente. | Style |
| SelectedItemStyle | Das Format für das ausgewählte Element. | TableItemStyle |
| SeparatorStyle | Das Format für das Trennzeichen zwischen den einzelnen Elementen. | TableItemStyle |
Hinweis Das DataList-Steuerelement unterscheidet sich vom Repeater-Steuerelement darin, dass es die Darstellung in verschiedenen Schreibrichtungen (durch Verwendung der Eigenschaften RepeatColumns und RepeatDirection) und die Option für die Darstellung innerhalb einer HTML-Tabelle unterstützt.
Die Items-Auflistung enthält die datengebundenen Member des DataList-Steuerelements. Die Auflistung wird aufgefüllt, wenn die DataBind-Methode im DataList-Steuerelement aufgerufen wird. Zuerst wird die Kopfzeile (falls vorhanden) hinzugefügt, dann ein Item-Objekt für jede Datenzeile. Wenn eine SeparatorTemplate vorhanden ist, werden Trennzeichen erstellt und zwischen den einzelnen Elementen eingefügt, diese werden jedoch nicht der Items-Auflistung hinzugefügt.
Nachdem alle Elemente für die Zeilen in der DataSource erstellt worden sind, wird dem Steuerelement (aber nicht der Items-Auflistung) das Footer-Element hinzugefügt. Zum Schluss löst das Steuerelement das ItemCreated-Ereignis für jedes Element aus, einschließlich Kopfzeile, Fußzeile und Trennzeichen. Anders als die meisten Auflistungen legt die Items-Auflistung keine Add- oder Remove-Methode offen. Sie können jedoch den Inhalt eines Elements bearbeiten, indem Sie einen Handler für das ItemCreated-Ereignis bereitstellen.
Vorsicht Text wird nicht in HTML codiert, bevor er im DataList-Steuerelement angezeigt wird. Auf diese Weise können Skripts in HTML-Tags in den Text eingebunden werden. Wenn die Werte in diesem Steuerelement aus Benutzereingaben stammen, müssen die Werte unbedingt geprüft werden, um die Sicherheit zu gewährleisten.
Weitere Informationen zu den Eigenschaften und Ereignissen des DataList-Webserversteuerelements finden Sie unter DataList-Klasse.
Beispiel
Das folgende Beispiel veranschaulicht, wie mit einem DataList-Steuerelement die Elemente einer Datenquelle angezeigt werden.
<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<html>
<script runat="server">
Function CreateDataSource() As ICollection
Dim dt As New DataTable()
Dim dr As DataRow
dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
Dim i As Integer
For i = 0 To 9
dr = dt.NewRow()
dr(0) = "Item " & i.ToString()
dt.Rows.Add(dr)
Next i
Dim dv As New DataView(dt)
Return dv
End Function 'CreateDataSource
Sub Page_Load(sender As Object, e As EventArgs)
If Not IsPostBack Then
DataList1.DataSource = CreateDataSource()
DataList1.DataBind()
End If
End Sub 'Page_Load
Sub Button1_Click(sender As Object, e As EventArgs)
If DropDown1.SelectedIndex = 0 Then
DataList1.RepeatDirection = RepeatDirection.Horizontal
Else
DataList1.RepeatDirection = RepeatDirection.Vertical
End If
If DropDown2.SelectedIndex = 0 Then
DataList1.RepeatLayout = RepeatLayout.Table
Else
DataList1.RepeatLayout = RepeatLayout.Flow
End If
DataList1.RepeatColumns = DropDown3.SelectedIndex + 1
If Check1.Checked = True And DataList1.RepeatLayout = RepeatLayout.Table Then
DataList1.BorderWidth = Unit.Pixel(1)
DataList1.GridLines = GridLines.Both
Else
DataList1.BorderWidth = Unit.Pixel(0)
DataList1.GridLines = GridLines.None
End If
End Sub 'Button1_Click
</script>
<body>
<form runat="server">
<h3>DataList Example</h3>
<asp:DataList id="DataList1" runat="server"
BorderColor="black"
CellPadding="3"
Font-Name="Verdana"
Font-Size="8pt">
<HeaderStyle BackColor="#aaaadd">
</HeaderStyle>
<AlternatingItemStyle BackColor="Gainsboro">
</AlternatingItemStyle>
<HeaderTemplate>
Items
</HeaderTemplate>
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "StringValue") %>
</ItemTemplate>
</asp:DataList>
<p>
<hr noshade align="left" width="300px">
RepeatDirection:
<asp:DropDownList id=DropDown1 runat="server">
<asp:ListItem>Horizontal</asp:ListItem>
<asp:ListItem>Vertical</asp:ListItem>
</asp:DropDownList><br>
RepeatLayout:
<asp:DropDownList id=DropDown2 runat="server">
<asp:ListItem>Table</asp:ListItem>
<asp:ListItem>Flow</asp:ListItem>
</asp:DropDownList><br>
RepeatColumns:
<asp:DropDownList id=DropDown3 runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList><br>
Show Borders:
<asp:CheckBox id=Check1 runat="server" /><p>
<asp:LinkButton id=Button1
Text="Refresh DataList"
OnClick="Button1_Click"
runat="server"/>
</form>
</body>
</html>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<html>
<script runat="server">
ICollection CreateDataSource()
{
DataTable dt = new DataTable();
DataRow dr;
dt.Columns.Add(new DataColumn("StringValue", typeof(string)));
for (int i = 0; i < 10; i++)
{
dr = dt.NewRow();
dr[0] = "Item " + i.ToString();
dt.Rows.Add(dr);
}
DataView dv = new DataView(dt);
return dv;
}
void Page_Load(Object Sender, EventArgs e)
{
if (!IsPostBack)
{
DataList1.DataSource = CreateDataSource();
DataList1.DataBind();
}
}
void Button1_Click(Object Sender, EventArgs e)
{
if (DropDown1.SelectedIndex == 0)
DataList1.RepeatDirection = RepeatDirection.Horizontal;
else
DataList1.RepeatDirection = RepeatDirection.Vertical;
if (DropDown2.SelectedIndex == 0)
DataList1.RepeatLayout = RepeatLayout.Table;
else
DataList1.RepeatLayout = RepeatLayout.Flow;
DataList1.RepeatColumns=DropDown3.SelectedIndex+1;
if ((Check1.Checked ==true) &&
(DataList1.RepeatLayout == RepeatLayout.Table))
{
DataList1.BorderWidth = Unit.Pixel(1);
DataList1.GridLines = GridLines.Both;
}
else
{
DataList1.BorderWidth = Unit.Pixel(0);
DataList1.GridLines = GridLines.None;
}
}
</script>
<body>
<form runat="server">
<h3>DataList Sample</h3>
<asp:DataList id="DataList1"
BorderColor="black"
CellPadding="3"
Font-Name="Verdana"
Font-Size="8pt"
runat="server">
<HeaderStyle BackColor="#aaaadd"/>
<AlternatingItemStyle BackColor="Gainsboro"/>
<HeaderTemplate>
Items
</HeaderTemplate>
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "StringValue") %>
</ItemTemplate>
</asp:DataList>
<p>
<hr noshade align="left" width="300px">
RepeatDirection:
<asp:DropDownList id=DropDown1 runat="server">
<asp:ListItem>Horizontal</asp:ListItem>
<asp:ListItem>Vertical</asp:ListItem>
</asp:DropDownList><br>
RepeatLayout:
<asp:DropDownList id=DropDown2 runat="server">
<asp:ListItem>Table</asp:ListItem>
<asp:ListItem>Flow</asp:ListItem>
</asp:DropDownList><br>
RepeatColumns:
<asp:DropDownList id=DropDown3 runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList><br>
Show Borders:
<asp:CheckBox id=Check1 runat="server" />
<p>
<asp:LinkButton id=Button1
Text="Refresh DataList"
OnClick="Button1_Click"
runat="server"/>
</font>
</form>
</body>
</html>