ASP.NET Repeater 數據綁定完整教程：從數據庫到模板渲染

Repeater 控件特點

• 無預設 HTML，完全由模板控制輸出，極輕量、靈活。
• 不支持內建分頁/排序/編輯，需手動實現。
• 適合高度定制化的只讀數據列表（菜單、新聞、產品展示）。

分步實現流程

1. 數據庫連接與類型化 DataSet

使用 Visual Studio 「添加新項」→ 「DataSet」，拖入表生成 TableAdapter，自動創建強類型 DataTable 與查詢方法。

2. 配置 ObjectDataSource

<asp:ObjectDataSource ID="odsCategories" runat="server"
    TypeName="Repeater.DataSetEmployeesTableAdapters.CategoriesTableAdapter"
    SelectMethod="GetData" />

3. 綁定 Repeater 並編寫模板

<asp:Repeater ID="rptCategories" runat="server" DataSourceID="odsCategories"
    OnItemDataBound="rptCategories_ItemDataBound">

    <HeaderTemplate>
        <table border="1"><thead><tr>
            <th>ID</th><th>名稱</th><th>描述</th><th>圖片</th>
        </tr></thead><tbody>
    </HeaderTemplate>

    <ItemTemplate>
        <tr>
            <td><%# Eval("CategoryID") %></td>
            <td><asp:TextBox ID="txtName" runat="server" Text='<%# Eval("CategoryName") %>' /></td>
            <td><%# Eval("Description") %></td>
            <td><img src='<%# Eval("Picture") %>' alt="圖片" /></td>
        </tr>
    </ItemTemplate>

    <AlternatingItemTemplate>
        <tr style="background-color: #E0E0E0;">
            <td><%# Eval("CategoryID") %></td>
            <td><asp:TextBox ID="txtName" runat="server" Text='<%# Eval("CategoryName") %>' /></td>
            <td><%# Eval("Description") %></td>
            <td><img src='<%# Eval("Picture") %>' alt="圖片" /></td>
        </tr>
    </AlternatingItemTemplate>

    <FooterTemplate>
        </tbody></table>
    </FooterTemplate>
</asp:Repeater>

4. ItemDataBound 事件動態控制

protected void rptCategories_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
    {
        TextBox txt = (TextBox)e.Item.FindControl("txtName");
        if (txt != null && txt.Text.Contains("o"))
            txt.BackColor = System.Drawing.Color.Red;
    }
}

關鍵語法詳解

性能優化建議

• 避免在模板中調用方法（每行都會執行），預先在數據層計算好顯示值。
• 大數據量分頁：配合 PagedDataSource 或自定義分頁存儲過程。
• 緩存數據源：ObjectDataSource.EnableCaching="true"。

現代替代

ASP.NET Core Razor Pages / MVC：@foreach (var item in Model) { <tr>...</tr> }，完全掌控 HTML，無 ViewState、無命名容器查找控件的痛苦。