次の方法で共有


方法 : 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. オプションとして、AlternatingItemTemplateSeparatorTemplateHeaderTemplate、および 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 サーバー コントロールの概要