Поделиться через

Декларативный синтаксис серверного веб-элемента управления DataList

  • Статья

Обновлен: Ноябрь 2007

Отображает элементы из источника данных с помощью шаблонов. Можно настраивать внешний вид и содержимое элемента управления с помощью управления шаблонами, составляющими различные компоненты элемента управления DataList, например, ItemTemplate и 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>

Заметки

Определяя шаблоны, можно менять структуру и содержимое элемента управления. В следующей таблице представлен перечень шаблонов элемента управления DataList.

AlternatingItemTemplate

Похож на элемент ItemTemplate, но воспроизводится для каждой второй строки (чередующиеся строки) в элементе управления DataList. Внешний вид элемента AlternatingItemTemplate задается с помощью установки его свойств стилей.

EditItemTemplate

Структура элемента, установленного в режим редактирования. Обычно этот шаблон содержит элементы управления для редактирования, например, TextBox. EditItemTemplate вызывается для строки в элементе управления DataList, когда для EditItemIndex устанавливается порядковый номер этой строки.

FooterTemplate

Текст, а также элементы управления, воспроизводимые в нижней части (нижнем колонтитуле) элемента управления DataList.

Элемент FooterTemplate не может иметь привязки к данным.

HeaderTemplate

Текст, а также элементы управления, воспроизводимые в верхней части (верхнем колонтитуле) элемента управления DataList.

Элемент HeaderTemplate не может иметь привязки к данным.

ItemTemplate

Элементы, воспроизводимые однократно для каждой строки источника данных.

SelectedItemTemplate

Элементы, отображаемые при выделении пользователем элемента в элементе управления DataList. Обычно используется для увеличения числа отображаемых полей данных и для визуального выделения строки.

SeparatorTemplate

Элементы, отображаемые между всеми элементами.

Элемент SeparatorTemplate не может иметь привязки к данным.

Внешний вид элемента управления DataListможно настроить, задав стиль его составных частей. Следующая таблица перечисляет свойства стилей, определяющих внешний вид составных частей элемента управления DataList.

Свойство стиля

Описание

Класс стиля

AlternatingItemStyle

Стиль для каждого второго элемента (чередующегося элемента).

TableItemStyle

EditItemStyle

Стиль для редактируемого элемента.

TableItemStyle

FooterStyle

Стиль для нижнего колонтитула в конце списка (если он задан).

TableItemStyle

HeaderStyle

Стиль для заголовка в начале списка (если он задан).

TableItemStyle

ItemStyle

Стиль для отдельных элементов.

Style

SelectedItemStyle

Стиль для выбранного элемента.

TableItemStyle

SeparatorStyle

Стиль для разделителя элементов.

TableItemStyle
yfx4t9t7.alert_note(ru-ru,VS.90).gifПримечание.

Элемент управления DataList отличается от элемента управления Repeater поддержкой направленного воспроизведения (использованием свойств RepeatColumns и RepeatDirection), а также возможностью воспроизведения в таблице HTML.

В коллекции Items содержатся элементы элемента управления DataList с привязкой к данным. Заполнение коллекции происходит при вызове метода DataBind для элемента управления DataList. Сначала добавляется заголовок (если он задан), после чего следуют объекты Item по одному для каждой строки данных. Если существует SeparatorTemplate, создаются Separators (разделители), которые вставляются между элементами, но не добавляются в коллекцию Items.

После того, как созданы все элементы для строк в DataSource, в элемент управления (но не в коллекцию Items) добавляется Footer (нижний колонтитул). Наконец, элемент управления инициирует событие ItemCreated для каждого элемента, включая заголовок, нижний колонтитул и разделители. В отличие от большинства коллекций, коллекция Items не предоставляет методы Add или Remove. Однако содержимое в элементе можно изменить с помощью предоставления обработчика событий для события ItemCreated.

yfx4t9t7.alert_caution(ru-ru,VS.90).gifВнимание!

Перед отображением в элементе управления DataList текст не преобразуется в формат HTML. Это дает возможность внедрять в текст сценарии, заключенные в теги HTML. Если значения элемента управления вводятся пользователем, следует проверить их на допустимость, чтобы избежать появления уязвимых мест в системе безопасности.

Подробные сведения о свойствах и событиях серверного веб-элемента управления DataList см. в документации по классу 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

Другие ресурсы

Синтаксис серверного веб-элемента управления