使用 Repeater 建立 HTML 表

當 Repeater 繫結時，對於資料中的每個專案，將新增一個新的表格行。

<asp:Repeater ID="repeaterID" runat="server" OnItemDataBound="repeaterID_ItemDataBound">
    <HeaderTemplate>
        <table>
            <thead>
                <tr>
                    <th style="width: 10%">Column 1 Header</th>
                    <th style="width: 30%">Column 2 Header</th>
                    <th style="width: 30%">Column 3 Header</th>
                    <th style="width: 30%">Column 4 Header</th>
                </tr>
            </thead>
    </HeaderTemplate>
    <ItemTemplate>
        <tr runat="server" id="rowID">
            <td>
                <asp:Label runat="server" ID="mylabel">You can add ASP labels if you want</asp:Label>
            </td>
            <td>
                <label>Or you can add HTML labels.</label>
            </td>
            <td>
                You can also just type plain text like this.
            </td>
            <td>
                <button type="button">You can even add a button to the table if you want!</button>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

ItemDataBound 方法是可選的，但對於格式化或填充更復雜的資料非常有用。在該示例中，該方法用於動態地為每個 <tr> 提供唯一 ID。然後，可以在 JavaScript 中使用此 ID 來訪問或修改特定行。注意，tr 不會在 PostBack 上保留其動態 ID 值。每行的 <asp:Label> 的文字也在此方法中設定。

protected void repeaterID_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        MyItem item = (MyItem)e.Item.DataItem;

        var row = e.Item.FindControl("rowID");
        row.ClientIDMode = ClientIDMode.Static;
        row.ID = "rowID" + item.ID;

        Label mylabel = (Label)e.Item.FindControl("mylabel");
        mylabel.Text = "The item ID is: " + item.ID;
    }
}

如果你計劃與 CodeBehind 進行大量通訊，則可能需要考慮使用 GridView。但是，中繼器通常比 GridView 具有更少的開銷，並且通過基本 ID 操作，可以執行與 GridView 相同的功能。