ASP.NET Web Forms Repeater 控制項極致客製化：HTML 完全控制、SeparatorTemplate、巢狀繫結與效能優化

Repeater 是 ASP.NET 最輕量的資料繫結控制項，**完全不產生預設 HTML 結構**，給予開發者 100% 的標記輸出控制權。無 ViewState、無預設樣式、無內建編輯功能，純粹專注於「重複渲染模板」，是高效能、高客製化需求的首選。

Repeater 核心模板架構

<asp:Repeater ID="rptData" runat="server">
    <HeaderTemplate>          <!-- 整個清單渲染前一次 --> </HeaderTemplate>
    <ItemTemplate>            <!-- 每筆資料重複渲染 --> </ItemTemplate>
    <AlternatingItemTemplate> <!-- 交替項目（偶數行） --> </AlternatingItemTemplate>
    <SeparatorTemplate>       <!-- 項目之間分隔 --> </SeparatorTemplate>
    <FooterTemplate>          <!-- 整個清單渲染後一次 --> </FooterTemplate>
</asp:Repeater>

XML 繫結完整範例：建立表格清單

後端程式碼

<%@ Import Namespace="System.Data" %>
<script runat="server">
    void Page_Load() {
        if (!IsPostBack) {
            DataSet ds = new DataSet();
            ds.ReadXml(Server.MapPath("~/App_Data/cdcatalog.xml"));
            rptCatalog.DataSource = ds;
            rptCatalog.DataBind();
        }
    }
</script>

前端模板：標準 HTML 表格

<asp:Repeater ID="rptCatalog" runat="server">
    <HeaderTemplate>
        <table class="data-table">
            <thead>
                <tr>
                    <th>標題</th>
                    <th>藝人</th>
                    <th>國家</th>
                    <th>唱片公司</th>
                    <th>價格</th>
                    <th>年份</th>
                </tr>
            </thead>
            <tbody>
    </HeaderTemplate>
    
    <ItemTemplate>
        <tr>
            <td><%# Eval("title") %></td>
            <td><%# Eval("artist") %></td>
            <td><%# Eval("country") %></td>
            <td><%# Eval("company") %></td>
            <td>$<%# Eval("price") %></td>
            <td><%# Eval("year") %></td>
        </tr>
    </ItemTemplate>
    
    <FooterTemplate>
            </tbody>
        </table>
    </FooterTemplate>
</asp:Repeater>

AlternatingItemTemplate 實作斑馬紋

<AlternatingItemTemplate>
    <tr class="alt-row">
        <td><%# Eval("title") %></td>
        <td><%# Eval("artist") %></td>
        <td><%# Eval("country") %></td>
        <td><%# Eval("company") %></td>
        <td>$<%# Eval("price") %></td>
        <td><%# Eval("year") %></td>
    </tr>
</AlternatingItemTemplate>

CSS：.alt-row { background-color: #f2f2f2; }

SeparatorTemplate：項目分隔符的創意應用

Repeater 獨有的 SeparatorTemplate 在每兩個 ItemTemplate 之間渲染，不包含 Header/Footer：

應用 1：表格列之間加入分隔線

<SeparatorTemplate>
    <tr><td colspan="6"><hr class="separator" /></td></tr>
</SeparatorTemplate>

應用 2：非表格版面的分隔符（如卡片式佈局）

<ItemTemplate>
    <div class="card">
        <h3><%# Eval("title") %></h3>
        <p><%# Eval("artist") %></p>
    </div>
</ItemTemplate>

<SeparatorTemplate>
    <div class="card-divider"></div>
</SeparatorTemplate>

應用 3：JavaScript 操作的資料分隔標記

<SeparatorTemplate>
    <script>dataSections.push('<%# Container.ItemIndex %>');</script>
</SeparatorTemplate>

巢狀 Repeater：主從關係資料呈現

典型場景：分類清單 → 每個分類下的產品清單

資料結構

<catalog>
  <category name="Rock">
    <cd><title>...</title></cd>
    <cd><title>...</title></cd>
  </category>
  <category name="Pop">
    <cd><title>...</title></cd>
  </category>
</catalog>

外層 Repeater 繫結分類

<asp:Repeater ID="rptCategories" runat="server">
    <ItemTemplate>
        <h2><%# Eval("@name") %></h2>
        
        <!-- 內層 Repeater 繫結該分類下的 CD -->
        <asp:Repeater ID="rptCDs" runat="server" 
            DataSource='<%# XPathSelect("cd") %>'>
            <HeaderTemplate><ul></HeaderTemplate>
            <ItemTemplate>
                <li><%# XPath("title") %> - <%# XPath("artist") %></li>
            </ItemTemplate>
            <FooterTemplate></ul></FooterTemplate>
        </asp:Repeater>
    </ItemTemplate>
</asp:Repeater>

後端：使用 XmlDataSource 簡化巢狀繫結

<asp:XmlDataSource ID="xdsCatalog" runat="server" 
    DataFile="~/App_Data/cdcatalog_nested.xml" 
    XPath="catalog/category" />

<asp:Repeater ID="rptCategories" runat="server" DataSourceID="xdsCatalog">
    <ItemTemplate>
        <h2><%# XPath("@name") %></h2>
        <asp:Repeater ID="rptCDs" runat="server" DataSource='<%# XPathSelect("cd") %>'>
            <!-- 模板定義 -->
        </asp:Repeater>
    </ItemTemplate>
</asp:Repeater>

效能優化：為何 Repeater 最快？

效能最佳實務

• 大量資料**務必使用 Repeater** 配合資料庫分頁查詢
• 避免在 ItemTemplate 中進行複雜運算，改用後端預處理或 ItemDataBound 事件
• 關閉不需要的 ViewState：<%@ Page EnableViewState="false" %> 或控制項層級 EnableViewState="false"
• 使用 Eval() 而非 DataBinder.Eval()（內部已優化）
• 考慮輸出快取：<%@ OutputCache Duration="60" VaryByParam="none" %>

ItemDataBound 事件：伺服器端動態調整渲染

<asp:Repeater ID="rptCatalog" runat="server" OnItemDataBound="rptCatalog_ItemDataBound">
    <ItemTemplate>
        <tr>
            <td><asp:Literal ID="litTitle" runat="server" /></td>
            <td><%# Eval("artist") %></td>
        </tr>
    </ItemTemplate>
</asp:Repeater>

<script runat="server">
    void rptCatalog_ItemDataBound(object sender, RepeaterItemEventArgs e) {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) {
            DataRowView drv = (DataRowView)e.Item.DataItem;
            Literal lit = (Literal)e.Item.FindControl("litTitle");
            string title = drv["title"].ToString();
            
            // 依條件動態調整輸出
            if (title.Length > 20) {
                lit.Text = title.Substring(0, 20) + "...";
            } else {
                lit.Text = title;
            }
            
            // 依價格設定樣式
            decimal price = Convert.ToDecimal(drv["price"]);
            if (price > 15) {
                e.Item.FindControl("litTitle").Controls.Clear();
                lit.Text = "<strong>" + lit.Text + "</strong>";
            }
        }
    }
</script>

Repeater 進階技巧總結

• 零 HTML 干擾：適合產生精確 HTML5 語意標記、AMP 頁面、郵件模板
• 模板靈活度最高：可輸出 table、ul/ol、div/card、JSON、CSV、XML 任意格式
• 無內建功能即是優勢：無 ViewState 包袱、無生命週期複雜度、易於除錯
• 搭配 CssClass 而非內建樣式屬性：分離關注點，利於前端維護
• 大量資料首選：配合資料庫分頁、虛擬滾動、無限捲軸

Repeater 以極簡架構提供最大彈性，是追求效能與前端控制權的專業開發者利器。下一節將介紹 XML 資料直接繫結至清單控制項的簡化寫法。