HOW TO：將 Repeater Web 伺服器控制項加入至 Web Form 網頁

發行項
10/22/2014

更新：2007 年 11 月

Repeater Web 伺服器控制項是產生個別項目清單的資料繫結容器 (Container) 控制項。您可使用樣板 (Template) 來定義 Web 網頁上個別項目的配置。當執行網頁時，這個控制項會為資料來源中的每個項目重複配置。您必須完成數個步驟，以便將 Repeater Web 伺服器控制項加入至 Web Form 網頁。下列程序描述在建立可用的 Repeater 控制項時，您至少應該執行的步驟。

若要將 Repeater Web 伺服器控制項加入至 Web Form 網頁

在設計檢視中，將資料來源控制項從 [工具箱] 的 [資料] 索引標籤拖曳至網頁，例如 SqlDataSource 控制項或 ObjectDataSource 控制項。
請使用 [設定資料來源] 精靈，定義資料來源控制項的連接和查詢，或資料擷取方法。除了 SiteMapDataSource 控制項以外的所有資料來源都可使用 [設定資料來源] 精靈，只需要有網站導覽即可填入 (Populate) 控制項。若要開啟 [設定資料來源] 精靈，請遵循下列步驟：
1. 以滑鼠右鍵按一下資料來源控制項，再按一下 [顯示智慧標籤]。
2. 在資料來源工作視窗中，按一下 [設定資料來源]。
從 [工具箱] 的 [資料] 索引標籤，將 Repeater 控制項拖曳到網頁上。
以滑鼠右鍵按一下 Repeater 控制項，再按一下 [顯示智慧標籤]。
在 [選擇資料來源] 清單中，按一下您在步驟 1 和步驟 2 中建立的資料來源控制項名稱。

這樣會設定控制項的 DataSourceID 屬性。如果查詢包含主索引鍵，則也會設定控制項的 DataKeyField 屬性。
按一下 [原始碼]，以切換至原始碼檢視。

若要定義樣板，您必須在原始碼檢視中。

將 <ItemTemplate> 項目加入至網頁，做為 Repeater 控制項的子控制項。如需語法資訊，請參閱 Repeater Web 伺服器控制項宣告式語法。

注意事項：
若要在執行階段呈現，Repeater 控制項必須包含 ItemTemplate，其中必須再包含 <%# Eval("field name") %> 格式的資料繫結運算式，此處的 field name 是資料庫中的欄位名稱。如需使用範本的背景資訊，請參閱 ASP.NET Web 伺服器控制項樣板。

將 HTML 和其他 Web 伺服器控制項或 HTML 伺服器控制項加入至 ItemTemplate。

選項性的定義下列樣板：AlternatingItemTemplate SeparatorTemplate、HeaderTemplate、FooterTemplate。

在下列程式碼範例中，示範如何使用 Repeater 控制項在 HTML 資料表中顯示資料。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" >
  <title>ASP.NET Repeater Example</title>
</head>
<body>
  <form id="form1" >
    <div>
      <asp:Repeater ID="Repeater1"  DataSourceID="SqlDataSource1">
        <HeaderTemplate>
          <table>
            <tr>
              <th>
                Name</th>
              <th>
                Description</th>
            </tr>
        </HeaderTemplate>
        <ItemTemplate>
          <tr>
            <td style="background-color:#CCFFCC">
              <asp:Label  ID="Label1" Text='<%# Eval("CategoryName") %>' />
            </td>
            <td style="background-color:#CCFFCC">
              <asp:Label  ID="Label2" Text='<%# Eval("Description") %>' />
            </td>
          </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
          <tr>
            <td>
              <asp:Label  ID="Label3" Text='<%# Eval("CategoryName") %>' />
            </td>
            <td>
              <asp:Label  ID="Label4" Text='<%# Eval("Description") %>' />
            </td>
          </tr>
        </AlternatingItemTemplate>
        <FooterTemplate>
          </table>
        </FooterTemplate>
      </asp:Repeater>
      <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ID="SqlDataSource1"  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" >
  <title>ASP.NET Repeater Example</title>
</head>
<body>
  <form id="form1" >
    <div>
      <asp:Repeater ID="Repeater1"  DataSourceID="SqlDataSource1">
        <HeaderTemplate>
          <table>
            <tr>
              <th>
                Name</th>
              <th>
                Description</th>
            </tr>
        </HeaderTemplate>
        <ItemTemplate>
          <tr>
            <td style="background-color:#CCFFCC">
              <asp:Label  ID="Label1" Text='<%# Eval("CategoryName") %>' />
            </td>
            <td style="background-color:#CCFFCC">
              <asp:Label  ID="Label2" Text='<%# Eval("Description") %>' />
            </td>
          </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
          <tr>
            <td>
              <asp:Label  ID="Label3" Text='<%# Eval("CategoryName") %>' />
            </td>
            <td>
              <asp:Label  ID="Label4" Text='<%# Eval("Description") %>' />
            </td>
          </tr>
        </AlternatingItemTemplate>
        <FooterTemplate>
          </table>
        </FooterTemplate>
      </asp:Repeater>
      <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ID="SqlDataSource1"  SelectCommand="SELECT [CategoryID], [CategoryName], 
              [Description] FROM [Categories]"></asp:SqlDataSource>
    </div>
  </form>
</body>
</html>

請參閱

參考

Repeater Web 伺服器控制項概觀

共用方式為

HOW TO：將 Repeater Web 伺服器控制項加入至 Web Form 網頁

若要將 Repeater Web 伺服器控制項加入至 Web Form 網頁

請參閱

參考

其他資源