DataList Web 服务器控件声明性语法

更新:2007 年 11 月

通过使用模板显示数据源中的项。通过操作组成 DataList 控件的不同组件的模板(如 ItemTemplateHeaderTemplate),可以自定义该控件的外观和内容。

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

备注

通过定义模板,可以操作控件的布局和内容。下表列出了 DataList 控件的各种模板。

AlternatingItemTemplate

ItemTemplate 元素类似,但在 DataList 控件中隔行(交替项)呈现一次。通过设置 AlternatingItemTemplate 元素的样式属性,可以为其指定不同的外观。

EditItemTemplate

项在设置为编辑模式后的布局。此模板通常包含一些编辑控件,例如 TextBox 控件。当 EditItemIndex 设置为 DataList 控件中某一行的序号时,将为该行调用 EditItemTemplate

FooterTemplate

DataList 控件的底部(脚注)呈现的文本和控件。

FooterTemplate 不能是数据绑定的。

HeaderTemplate

DataList 控件顶部(标头)呈现的文本和控件。

HeaderTemplate 不能是数据绑定的。

ItemTemplate

为数据源中的每一行呈现一次的元素。

SelectedItemTemplate

当用户选择 DataList 控件中的某一项时将呈现的元素。通常的用法是增加所显示的数据字段的个数并以可视形式突出标记该行。

SeparatorTemplate

在各项之间呈现的元素。

SeparatorTemplate 项不能是数据绑定的。

通过为 DataList 控件的各个部分指定样式,可以自定义该控件的外观。下表列出用于控制 DataList 控件不同部分的外观的样式属性。

样式属性

说明

Style 类

AlternatingItemStyle

隔项(交替项)的样式。

TableItemStyle

EditItemStyle

正在编辑的项的样式。

TableItemStyle

FooterStyle

列表结尾处的脚注(如果有的话)的样式。

TableItemStyle

HeaderStyle

列表开始处的标头(如果有的话)的样式。

TableItemStyle

ItemStyle

单个项的样式。

Style

SelectedItemStyle

选定项的样式。

TableItemStyle

SeparatorStyle

各项之间的分隔符的样式。

TableItemStyle

说明:

DataList 控件与 Repeater 控件的不同之处在于,前者支持定向呈现(通过使用 RepeatColumnsRepeatDirection 属性),并且具有用于在 HTML 表内呈现的选项。

Items 集合包含 DataList 控件的数据绑定成员。当在 DataList 控件上调用 DataBind 方法时该集合将被填充。首先添加标头(如果有的话),然后为每个数据行添加一个 Item 对象。如果存在 SeparatorTemplate,将在各项之间创建和添加 Separators,但不会将它们添加到 Items 集合。

为 DataSource 中的行创建所有项之后,Footer 即添加到控件中,但不会添加到 Items 集合中。最后,该控件为每一项(包括标头、脚注和分隔符)引发 ItemCreated 事件。与大多数集合不同,Items 集合不公开 Add 或 Remove 方法。但是,可以通过为 ItemCreated 事件提供处理程序来修改项内的内容。

警告:

文本在 DataList 控件中显示之前并非 HTML 编码形式。这使得可以在文本中的 HTML 标记中嵌入脚本。如果控件的值是由用户输入的,请务必要对输入值进行验证以防止出现安全漏洞。

有关 DataList Web 服务器控件的属性和事件的详细信息,请参见 DataList 类文档。

示例

下面的示例演示如何使用 DataList 控件来显示数据源中的项。

<%@ 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>

请参见

概念

ASP.NET 服务器控件

参考

DataList

其他资源

Web 服务器控件语法