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

[アーティクル]
03/28/2008

データソースの項目をテンプレートを使用して表示します。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 クラス

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

解説

例

参照

その他のリソース

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