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

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

リストに表示する各項目に、指定したテンプレートを繰り返し適用することによって、レイアウトをカスタマイズできるデータ連結リストコントロールを作成します。

<asp:Repeaterid="Repeater1"      DataSource="<% databindingexpression %>"     runat=server>   <HeaderTemplate>      Header template HTML   </HeaderTemplate>   <ItemTemplate>Item template HTML   </ItemTemplate>   <AlternatingItemTemplate>      Alternating item template HTML   </AlternatingItemTemplate>   <SeparatorTemplate>      Separator template HTML   </SeparatorTemplate>   <FooterTemplate>      Footer template HTML   </FooterTemplate><asp:Repeater>

解説

Repeater コントロールを使用して、テンプレートを指定した基本的なデータ連結リストを作成します。Repeater コントロールには、組み込みのレイアウトやスタイルがありません。すべての HTML レイアウト、書式指定、およびスタイルタグをコントロールのテンプレート内で明示的に宣言する必要があります。

Repeater コントロールは、他のデータリストコントロールとは異なり、テンプレート内に HTML フラグメントを配置できます。これによって、テーブルなどの複雑な HTML 構造を作成できます。たとえば、HTML テーブルの中にリストを作成するには、まず HeaderTemplate に <table> タグを挿入してテーブルを作成します。次に、ItemTemplate に <tr> タグ、<td> タグ、およびデータ連結項目を挿入し、テーブルの行と列を作成します。テーブル内の項目の外観を交互に変更するには、内容は ItemTemplate と同じで、違うスタイルを指定した AlternatingItemTemplate を作成します。最後に、FooterTemplate に </table> タグを挿入して、テーブルを完成させます。

Repeater コントロールの各種テンプレートを次の表に一覧表示します。

テンプレート	説明
AlternatingItemTemplate	ItemTemplate 要素に似ていますが、Repeater コントロール内の 1 行おきの行 (交互の項目) に適用されます。スタイルプロパティを設定して、AlternatingItemTemplate 要素に別の外観を指定できます。
FooterTemplate	すべてのデータ連結行が表示された後で 1 回だけ表示される要素。一般的には、</table> などにより、HeaderTemplate 項目で開かれた要素を閉じるために使用します。メモ FooterTemplate はデータに連結できません。
HeaderTemplate	データ連結行を表示する前に 1 回だけ表示される要素。一般的には、テーブルなどのコンテナ要素を開始します。メモ HeaderTemplate 項目はデータに連結できません。
ItemTemplate	データソースの行ごとに 1 回表示される要素。ItemTemplate でデータを表示するには、1 つ以上の Web サーバーコントロールを宣言し、それらのデータ連結式を、Repeater コントロール (コンテナコントロール) の DataSource のフィールドに評価されるように設定します。名前が含まれているフィールドを Label コントロールに表示する宣言の例を次に示します。 `First Name: <asp:Label runat="server" Text="<%# Container.DataItem.FirstName %>" />`
SeparatorTemplate	行間に表示される要素。一般的には、改行 (<br> タグ)、水平線 (<hr> タグ) などです。メモ SeparatorTemplate 項目はデータに連結できません。

Repeater コントロールには、選択機能や編集機能は組み込まれていません。コントロールの ItemCommand イベントのハンドラを作成して、テンプレートからコントロールに送信されるコントロールイベントを処理できます。

Item テンプレートと AlternatingItem テンプレートは、コントロールの DataSource プロパティで参照されるデータ構造に連結されます。Header、Footer、Separator の各テンプレートは、データに連結できません。Repeater コントロールの DataSource プロパティが設定されているのにデータが返されなかった場合は、コントロールには Header テンプレートと Footer テンプレートだけが表示され、項目は表示されません。DataSource プロパティが設定されていない場合、Repeater コントロールは表示されません。

注意テキストは、Repeater コントロールに表示される前には HTML エンコードされません。これにより、テキストの HTML タグ内にスクリプトを埋め込むことができるようになります。コントロールの値がユーザーによって入力された場合は、セキュリティの脆弱性への対策として、入力された値を必ず検証してください。

Repeater Web サーバーコントロールのプロパティとイベントの詳細については、Repeater クラスのドキュメントを参照してください。

例

Repeater コントロールを使用して、データソースの項目を表示する方法を次の例に示します。

<%@ Page Language="VB" AutoEventWireup="True" %>
<html>
<head>
   <script runat="server">
      Sub Page_Load(Sender As Object, e As EventArgs)
         If Not IsPostBack Then
            Dim values As New ArrayList()
            
            values.Add(New PositionData("Microsoft", "Msft"))
            values.Add(New PositionData("Intel", "Intc"))
            values.Add(New PositionData("Dell", "Dell"))
            
            Repeater1.DataSource = values
            Repeater1.DataBind()
            
            Repeater2.DataSource = values
            Repeater2.DataBind()
         End If
      End Sub

      Public Class PositionData
         Private myName As String
         Private myTicker As String        
        
         Public Sub New(newName As String, newTicker As String)
            Me.myName = newName
            Me.myTicker = newTicker
         End Sub        
        
         Public ReadOnly Property Name() As String
            Get
               Return myName
            End Get
         End Property        
        
         Public ReadOnly Property Ticker() As String
            Get
               Return myTicker
            End Get
         End Property
      End Class
   </script>
</head>
<body>
   <form runat="server">
      <h3>Repeater Example</h3>
      <b>Repeater1:</b>
      <p>
      <asp:Repeater id=Repeater1 runat="server">
         <HeaderTemplate>
            <table border=1>
               <tr>
                  <td><b>Company</b></td>
                  <td><b>Symbol</b></td>
               </tr>
         </HeaderTemplate>
             
         <ItemTemplate>
            <tr>
               <td> 
                  <%# DataBinder.Eval(Container.DataItem, "Name") %> 
               </td>
               <td> 
                  <%# DataBinder.Eval(Container.DataItem, "Ticker") %>
               </td>
            </tr>
         </ItemTemplate>
             
         <FooterTemplate>
            </table>

         </FooterTemplate>
             
      </asp:Repeater>
      <p>
      <b>Repeater2:</b>
      <p>
      <asp:Repeater id=Repeater2 runat="server">
         <HeaderTemplate>
            Company data:
         </HeaderTemplate>
             
         <ItemTemplate>
            <%# DataBinder.Eval(Container.DataItem, "Name") %> 
            (<%# DataBinder.Eval(Container.DataItem, "Ticker") %>)
         </ItemTemplate>
             
         <SeparatorTemplate>
            , 
         </SeparatorTemplate>
      </asp:Repeater>
   </form>
</body>
</html>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>
<html>
<head>
   <script runat="server">
      void Page_Load(Object Sender, EventArgs e) 
      {
         if (!IsPostBack) 
         {
            ArrayList values = new ArrayList();
            values.Add(new PositionData("Microsoft", "Msft"));
            values.Add(new PositionData("Intel", "Intc"));
            values.Add(new PositionData("Dell", "Dell"));
            Repeater1.DataSource = values;
            Repeater1.DataBind();
                
            Repeater2.DataSource = values;
            Repeater2.DataBind();
         }
      }

      public class PositionData 
      {
         private string name;
         private string ticker;

         public PositionData(string name, string ticker) 
         {
            this.name = name;
            this.ticker = ticker;
         }

         public string Name 
         {
            get 
            {
               return name;
            }
         }

         public string Ticker 
         {
            get 
            {
               return ticker;
            }
         }
      } 
   </script>
</head>
<body>
   <form runat="server">
      <h3>Repeater Example</h3>
      <b>Repeater1:</b>
      <p>
      <asp:Repeater id=Repeater1 runat="server">
         <HeaderTemplate>
            <table border=1>
               <tr>
                  <td><b>Company</b></td> 
                  <td><b>Symbol</b></td>
               </tr>
         </HeaderTemplate>
         <ItemTemplate>
            <tr>
               <td> 
                  <%# DataBinder.Eval(Container.DataItem, "Name") %> 
               </td>
               <td> 
                  <%# DataBinder.Eval(Container.DataItem, "Ticker") %>
               </td>
            </tr>
         </ItemTemplate>
         <FooterTemplate>
            </table>

         </FooterTemplate>
      </asp:Repeater>
      <p>
      <b>Repeater2:</b>
      <p>
      <asp:Repeater id=Repeater2 runat="server">
         <HeaderTemplate>
            Company data:
         </HeaderTemplate> 
         <ItemTemplate>
            <%# DataBinder.Eval(Container.DataItem, "Name") %> 
            (<%# DataBinder.Eval(Container.DataItem, "Ticker") %>)
         </ItemTemplate>
         <SeparatorTemplate>
            , 
         </SeparatorTemplate>
      </asp:Repeater>
   </form>
</body>
</html>

参照

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

次の方法で共有

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

解説

例

参照

その他のリソース

次の方法で共有

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

解説

例

参照

その他のリソース

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