Repeater 分欄橫向佈局：ItemDataBound 動態換行實作每列 4 項

需求：Repeater 以 Table 佈局，每列顯示 4 個項目（商品圖片、名稱、價格、數量輸入、訂購按鈕）。利用 ItemDataBound 事件，每 4 筆資料插入 </tr><tr> 斷行標記，達成橫向流式佈局。

前端 Repeater 結構

<table><tr>
  <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
    <ItemTemplate>
      <td>
        <table>
          <tr><td colspan="2"><img src='images/<%# Eval("FoodPicture") %>' /></td></tr>
          <tr><td colspan="2"><asp:Label Text='<%# Eval("FoodName") %>' /></td></tr>
          <tr><td><asp:Label Text='<%# Eval("FoodPrice") %>' /></td>
              <td><img src="images/product_add.png" /> <asp:TextBox Text="1" Width="15" ReadOnly="true" /> <img src="images/product_reduce.png" /></td></tr>
          <tr><th colspan="2"><asp:ImageButton ImageUrl="images/btn_order.gif" /></th></tr>
        </table>
      </td>
    </ItemTemplate>
  </asp:Repeater>
</tr></table>

後置換行邏輯

public int i = 1;
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e) {
    if (i % 4 == 0) // 每 4 項換行
        e.Item.Controls.Add(new LiteralControl("</tr><tr>"));
    i++;
}

關鍵點

• LiteralControl 直接輸出原始 HTML，不經編碼
• 計數器 i 需為欄位變數，跨多次 ItemDataBound 保持狀態
• 若資料筆數非 4 的倍數，最後一列會有空 <td>，可配合 CSS :empty 隱藏或補齊

現代替代方案

• ListView + GroupTemplate/ItemTemplate 內建分組佈局
• 前端 CSS Flexbox/Grid：display: flex; flex-wrap: wrap; 由瀏覽器自動換行，無需伺服器端計算
• Bootstrap 卡片網格：col-md-3 自動 4 欄

此法為 WebForms 時代經典技巧，理解其原理有助於維護舊專案；新專案優先採用 CSS 佈局分離關注點。