Repeater 每 N 列插入分隔符的實作技巧

情境

需求：在 Repeater 產生的列表中，每 5 筆資料插入一條水平分隔線（或空白區塊），但最後一組不足 5 筆時不顯示分隔。

核心邏輯

於 ItemDataBound 事件中，判斷 (e.Item.ItemIndex + 1) % 5 == 0 且非最後一筆，動態加入 LiteralControl 渲染 `

完整程式碼

後台

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        rptList.DataSource = GetTable();
        rptList.DataBind();
    }
}

protected void rptList_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        var drv = (DataRowView)e.Item.DataItem;
        var ltlTitle = (Literal)e.Item.FindControl("ltlTitle");
        ltlTitle.Text = drv.Row["title"].ToString();

        // 每 5 筆插入分隔，但總筆數 15 時最後一組不插入
        if ((e.Item.ItemIndex + 1) % 5 == 0 && (e.Item.ItemIndex + 1) < 15)
        {
            var separator = new LiteralControl("
");
            e.Item.Controls.Add(separator);
        }
    }
}

private DataTable GetTable()
{
    var dt = new DataTable();
    dt.Columns.Add("title", typeof(string));
    for (int i = 1; i <= 15; i++)
    {
        var row = dt.NewRow();
        row["title"] = $"這是文章標題 {i}";
        dt.Rows.Add(row);
    }
    return dt;
}

前台

<asp:Repeater ID="rptList" runat="server" OnItemDataBound="rptList_ItemDataBound">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
        <li><asp:Literal ID="ltlTitle" runat="server" /></li>
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

擴充應用

• 若分隔樣式複雜，可改用 `` 配合 `` 靜態定義於 ItemTemplate，於 `ItemDataBound` 控制 `Visible`。
• 搭配 CSS `:nth-child(5n)` 也能在前端純樣式實現，無需後台邏輯。