前言

Repeater 是 ASP.NET 最輕量的資料繫結控制項，**不產生任何預設 HTML**，完全由開發者透過模板控制輸出，適合大量資料、高度客製化呈現。本文系統整理五大模板、資料繫結屬性、ItemDataBound 事件、分頁整合與巢狀繫結實戰。

一、五大模板詳解

模板	用途	必要性
ItemTemplate	每筆資料項呈現	✅ 必須
AlternatingItemTemplate	隔行樣式（覆蓋 ItemTemplate）	可選
HeaderTemplate	表頭/清單開始標籤	可選
FooterTemplate	表尾/清單結束標籤	可選
SeparatorTemplate	項目間分隔符（<hr>、<li> 等）	可選

二、核心屬性

• DataSource：資料來源（DataTable、List、IEnumerable...）
• DataMember：指定 DataSet 中的表名
• Items：RepeaterItemCollection，程式碼端存取已繫結項目

三、基本使用範例

前端標記

<asp:Repeater ID="Repeater1" runat="server">
  <HeaderTemplate>
    <table class="table"><thead><tr>
      <th>編號</th><th>姓名</th><th>年齡</th><th>班級</th><th>零用錢</th>
    </tr></thead><tbody>
  </HeaderTemplate>
  <ItemTemplate>
    <tr>
      <td><%# Eval("Id") %></td>
      <td><%# Eval("Name") %></td>
      <td><%# Eval("Age") %></td>
      <td><%# Eval("ClassId") %></td>
      <td><%# Eval("Salary", "{0:C}") %></td>
    </tr>
  </ItemTemplate>
  <AlternatingItemTemplate>
    <tr class="alt-row">
      <td><%# Eval("Id") %></td> ... <!-- 同 ItemTemplate -->
    </tr>
  </AlternatingItemTemplate>
  <FooterTemplate></tbody></table></FooterTemplate>
</asp:Repeater>

後端繫結

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string sql = "SELECT * FROM Person";
        DataTable dt = SqlHelper.ExecuteQuery(sql);
        Repeater1.DataSource = dt;
        Repeater1.DataBind();
    }
}

四、ItemDataBound 事件：行級邏輯與巢狀繫結

protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        // 1. 取得當前資料項
        DataRowView row = (DataRowView)e.Item.DataItem;
        int userId = Convert.ToInt32(row["Id"]);

        // 2. 尋找巢狀控制項（如內層 Repeater/GridView）
        var nestedRepeater = (Repeater)e.Item.FindControl("rptChildren");
        
        // 3. 依條件查詢子資料並繫結
        nestedRepeater.DataSource = GetChildData(userId);
        nestedRepeater.DataBind();

        // 4. 條件式顯示/隱藏
        var btnDelete = (Button)e.Item.FindControl("btnDelete");
        btnDelete.Visible = User.IsInRole("Admin");
    }
}

五、整合 AspNetPager 分頁

註冊控制項

<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>

前端分頁控制項

<webdiyer:AspNetPager ID="AspNetPager1" runat="server"
    PageSize="10"
    OnPageChanging="AspNetPager1_PageChanging"
    ShowCustomInfoSection="Left"
    CustomInfoHTML="第 %CurrentPageIndex% 頁，共 %PageCount% 頁，每頁 %PageSize% 條"
    FirstPageText="首頁" PrevPageText="上一頁" NextPageText="下一頁" LastPageText="尾頁"
    LayoutType="Table" PagingButtonLayoutType="Span"
    PageIndexBoxType="DropDownList" ShowPageIndexBox="Always"
    TextBeforePageIndexBox="轉到" TextAfterPageIndexBox="頁"
    SubmitButtonText="Go" Width="450px">
</webdiyer:AspNetPager>

後端分頁邏輯

private void BindData(int pageIndex = 1)
{
    int totalRecords;
    var dt = GetPagedData(pageIndex, AspNetPager1.PageSize, out totalRecords);
    
    AspNetPager1.RecordCount = totalRecords;
    AspNetPager1.CurrentPageIndex = pageIndex;
    
    Repeater1.DataSource = dt;
    Repeater1.DataBind();
}

protected void AspNetPager1_PageChanging(object src, Wuqi.Webdiyer.PageChangingEventArgs e)
{
    BindData(e.NewPageIndex);
}

六、效能優化建議

• 啟用 ViewState=false：<asp:Repeater EnableViewState="false" ...>，大幅減少頁面大小。
• 避免在 ItemTemplate 內呼叫方法：<%# FormatName(Eval("Name")) %> 每行都會呼叫，改用 ItemDataBound 預處理。
• 大量資料分頁必做：資料庫端分頁（ROW_NUMBER() / OFFSET FETCH），不可全撈再分頁。
• 考慮 ListView：內建分頁、編輯、排序、群組模板，功能更完整。

結語

Repeater 以「輕量、完全掌控 HTML」著稱，掌握五大模板、ItemDataBound 行級邏輯、分頁元件整合，即可應付大多數清單呈現需求。現代專案建議改用前端框架（Vue/React/Blazor）配合 Web API，將 HTML 渲染移至客戶端，伺服器僅提供純 JSON 資料。