Share via

方法 : Web フォーム ページに Repeater Web サーバー コントロールを追加する

  • [アーティクル]

更新 : 2007 年 11 月

Repeater Web サーバー コントロールは、個別の項目の一覧を作成するデータ連結されたコンテナです。テンプレートを使用して、Web ページにおける個別の項目のレイアウトを定義します。ページを実行すると、コントロールはデータ ソースの各項目に対して、定義されたレイアウトを繰り返し適用します。Repeater Web サーバー コントロールを Web フォーム ページに追加するにはいくつかの手順があります。これらは最後まで実行する必要があります。動作する Repeater コントロールを作成するための必要最小限の手順を次に示します。

Web フォーム ページに Repeater Web サーバー コントロールを追加するには

  1. デザイン ビューで、ツールボックスの [データ] タブから、データ ソース コントロール (SqlDataSource コントロール、ObjectDataSource コントロールなど) をページにドラッグします。

  2. データ ソースの構成ウィザードを使用して、データ ソース コントロールの接続とクエリ、つまりデータ取得方法を定義します。データ ソースの構成ウィザードは、SiteMapDataSource コントロール以外のすべてのデータ ソースで使用できます。このコントロールのみ、データを取得するのにサイト マップを必要とします。データ ソースの構成ウィザードを開くには、次の手順を実行します。

    1. データ ソース コントロールを右クリックし、[スマート タグの表示] をクリックします。

    2. データ ソース タスクのウィンドウで、[データ ソースの構成] をクリックします。

  3. ツールボックスの [データ] タブから、Repeater コントロールをページにドラッグします。

  4. Repeater コントロールを右クリックし、[スマート タグの表示] をクリックします。

  5. [データ ソースの選択] の一覧で、手順 1 と 2 で作成したデータ ソース コントロールの名前をクリックします。

    これでコントロールの DataSourceID プロパティが設定されます。クエリに主キーが含まれている場合は、コントロールの DataKeyField プロパティも設定されます。

  6. [ソース] をクリックして、ソース ビューに切り替えます。

    テンプレートを定義するには、ソース ビューで操作する必要があります。

  7. Repeater コントロールの子項目として、ページに <ItemTemplate> 要素を追加します。構文については、「Repeater Web サーバー コントロールの宣言構文」を参照してください。

    x4s0xktt.alert_note(ja-jp,VS.90).gifメモ :

    実行時にレンダリングするには、Repeater コントロールに、<%# Eval("field name") %> 形式のデータ バインド式を含む ItemTemplate が含まれている必要があります。field name はデータベースのフィールド名です。テンプレートの使用に関する背景情報については、「ASP.NET Web サーバー コントロール テンプレート」を参照してください。

  8. HTML、およびその他の Web サーバー コントロールまたは HTML サーバー コントロールを ItemTemplate に追加します。

  9. オプションとして、AlternatingItemTemplate、SeparatorTemplate、HeaderTemplate、および FooterTemplate の各テンプレートを定義します。

    データを HTML テーブルに表示する Repeater コントロールの使用方法のコード例を次に示します。table 要素は HeaderTemplate で始まり FooterTemplate で終わります。Repeater コントロールの本文では、テーブル セルを使用してデータ ソースの列が表示されます。AlternatingItemTemplate 要素は、テーブル セルの背景色が違う点を除けば ItemTemplate 項目と同じです。

    <%@ Page Language="VB" %>

<!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">
<head id="Head1" runat="server">
  <title>ASP.NET Repeater Example</title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
        <HeaderTemplate>
          <table>
            <tr>
              <th>
                Name</th>
              <th>
                Description</th>
            </tr>
        </HeaderTemplate>
        <ItemTemplate>
          <tr>
            <td style="background-color:#CCFFCC">
              <asp:Label runat="server" ID="Label1" Text='<%# Eval("CategoryName") %>' />
            </td>
            <td style="background-color:#CCFFCC">
              <asp:Label runat="server" ID="Label2" Text='<%# Eval("Description") %>' />
            </td>
          </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
          <tr>
            <td>
              <asp:Label runat="server" ID="Label3" Text='<%# Eval("CategoryName") %>' />
            </td>
            <td>
              <asp:Label runat="server" ID="Label4" Text='<%# Eval("Description") %>' />
            </td>
          </tr>
        </AlternatingItemTemplate>
        <FooterTemplate>
          </table>
        </FooterTemplate>
      </asp:Repeater>
      <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ID="SqlDataSource1" runat="server" SelectCommand="SELECT [CategoryID], [CategoryName], 
            [Description] FROM [Categories]"></asp:SqlDataSource>
    </div>
  </form>
</body>
</html>

    <%@ Page Language="C#" %>

<!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">
<head id="Head1" runat="server">
  <title>ASP.NET Repeater Example</title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
        <HeaderTemplate>
          <table>
            <tr>
              <th>
                Name</th>
              <th>
                Description</th>
            </tr>
        </HeaderTemplate>
        <ItemTemplate>
          <tr>
            <td style="background-color:#CCFFCC">
              <asp:Label runat="server" ID="Label1" Text='<%# Eval("CategoryName") %>' />
            </td>
            <td style="background-color:#CCFFCC">
              <asp:Label runat="server" ID="Label2" Text='<%# Eval("Description") %>' />
            </td>
          </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
          <tr>
            <td>
              <asp:Label runat="server" ID="Label3" Text='<%# Eval("CategoryName") %>' />
            </td>
            <td>
              <asp:Label runat="server" ID="Label4" Text='<%# Eval("Description") %>' />
            </td>
          </tr>
        </AlternatingItemTemplate>
        <FooterTemplate>
          </table>
        </FooterTemplate>
      </asp:Repeater>
      <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ID="SqlDataSource1" runat="server" SelectCommand="SELECT [CategoryID], [CategoryName], 
              [Description] FROM [Categories]"></asp:SqlDataSource>
    </div>
  </form>
</body>
</html>

参照

参照

Repeater Web サーバー コントロールの概要