DataList Web サーバー コントロール

  • [アーティクル]

データ ソースの項目をテンプレートを使用して表示します。ItemTemplate や HeaderTemplate など、DataList コントロールのさまざまなコンポーネントを構成するテンプレートを操作することによって、このコントロールの外観および内容をカスタマイズできます。

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

解説

テンプレートを定義することによって、コントロールのレイアウトと内容を操作できます。DataList コントロールに適用できる各種テンプレートを次の表に一覧表示します。

AlternatingItemTemplate ItemTemplate 要素に似ていますが、DataList コントロール内の 1 行おきの行 (交互の項目) に適用されます。スタイル プロパティを設定して、AlternatingItemTemplate 要素に別の外観を指定できます。
EditItemTemplate 編集モードに設定されている項目のレイアウト。このテンプレートには、通常、編集するコントロール (TextBox コントロールなど) が含まれます。EditItemTemplate は、EditItemIndex に DataList コントロールの行の序数が設定されたときに、その行に対して呼び出されます。
FooterTemplate DataList コントロールの下端に表示されるテキストおよびコントロール (フッター)。

FooterTemplate はデータに連結できません。
HeaderTemplate DataList コントロールの上端に表示されるテキストおよびコントロール (ヘッダー)。

HeaderTemplate はデータに連結できません。
ItemTemplate データ ソースの行ごとに 1 回表示される要素。
SelectedItemTemplate DataList コントロールの項目が選択されたときに表示される要素。通常、表示するデータ フィールドの数を増やし、行を強調表示するために使用されます。
SeparatorTemplate 各項目の間に表示される要素。

SeparatorTemplate 項目はデータに連結できません。

コントロールのさまざまな部分のスタイル プロパティを設定することによって、DataList コントロールの外観をカスタマイズできます。DataList コントロールのさまざまな部分の外観を制御するスタイル プロパティを次の表に一覧表示します。

スタイル プロパティ 説明 スタイル クラス
AlternatingItemStyle 1 つおきの項目 (交互の項目) のスタイル。 TableItemStyle
EditItemStyle 編集中の項目のスタイル。 TableItemStyle
FooterStyle リストの末尾のフッターのスタイル (フッターがある場合)。 TableItemStyle
HeaderStyle リストの先頭のヘッダーのスタイル (ヘッダーがある場合)。 TableItemStyle
ItemStyle 個別の項目のスタイル。 Style
SelectedItemStyle 選択されている項目のスタイル。 TableItemStyle
SeparatorStyle 各項目間の区分線のスタイル。 TableItemStyle

メモ   DataList コントロールは Repeater コントロールとは異なり、RepeatColumns プロパティと RepeatDirection プロパティを使用した表示方向の指定や、HTML テーブル内に表示するためのオプションをサポートしています。

Items コレクションには、DataList コントロールのデータ連結メンバが含まれています。このコレクションには、DataList コントロールに対して DataBind メソッドが呼び出されたときにメンバが読み込まれます。ヘッダーがある場合はまずヘッダーが追加され、次にデータ行ごとに 1 つの 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" %>
 
<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>

参照

Web サーバー コントロール | DataList クラス