Deklarative Syntax des DataList-Webserversteuerelements

Aktualisiert: November 2007

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: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>

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 festlegen.

EditItemTemplate

Das Layout eines Elements, nachdem es in den Bearbeitungsmodus geschaltet wurde. In dieser Vorlage sind vor allem Bearbeitungssteuerelemente enthalten, z. B. TextBox-Steuerelemente. EditItemTemplate wird für eine Zeile im DataList-Steuerelement aufgerufen, wenn für EditItemIndex die Ordinalzahl dieser Zeile festgelegt 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

Tipp

Das DataList-Steuerelement unterscheidet sich vom Repeater-Steuerelement darin, dass es die Darstellung in verschiedenen Schreibrichtungen (durch Verwendung der RepeatColumns-Eigenschaft und der RepeatDirection-Eigenschaft) 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 ein SeparatorTemplate vorhanden ist, werden Separators erstellt und zwischen den einzelnen Elementen hinzugefügt. Sie werden jedoch nicht der Items-Auflistung hinzugefügt.

Nachdem alle Elemente für die Zeilen in der DataSource erstellt wurden, wird die Footer dem Steuerelement hinzugefügt (jedoch nicht der Items-Auflistung). Zuletzt löst das Steuerelement das ItemCreated-Ereignis für jedes Element aus, einschließlich Kopfzeile, Fußzeile und Trennzeichen. Im Gegensatz zu den meisten Auflistungen macht die Items-Auflistung keine Add-Methode oder Remove-Methode verfügbar. Sie können jedoch den Inhalt eines Elements bearbeiten, indem Sie einen Handler für das ItemCreated-Ereignis bereitstellen.

Warnung

Text wird erst dann HTML-codiert, wenn 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 validiert werden, um die Sicherheit zu gewährleisten.

Ausführliche Informationen zu den Eigenschaften und Ereignissen von DataList-Webserversteuerelementen finden Sie in der Dokumentation zur 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" %>

<!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>

Siehe auch

Konzepte

ASP.NET-Serversteuerelemente

Referenz

DataList

Weitere Ressourcen

Syntax des Webserversteuerelements