ASP.NET Repeater 控制項完整實作：資料綁定、刪除、編輯與狀態切換

前言

Repeater 是 ASP.NET 中最輕量、彈性最高的資料繫結控制項，不輸出預設 HTML 結構，完全由開發者透過模板掌控呈現。本文將示範完整的 CRUD 操作：資料綁定、刪除、編輯導向、啟用/停用狀態切換。

後端程式碼 (Default.aspx.cs)

1. 資料綁定方法

private void BindStudent()
{
    string connStr = ConfigurationManager.ConnectionStrings["stucnn"].ConnectionString;
    using (SqlConnection conn = new SqlConnection(connStr))
    using (SqlDataAdapter da = new SqlDataAdapter("SELECT * FROM student", conn))
    {
        DataSet ds = new DataSet();
        da.Fill(ds);
        Repeater1.DataSource = ds;
        Repeater1.DataBind();
    }
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) BindStudent();
}

2. ItemCommand 事件處理：刪除與編輯

protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    string connStr = ConfigurationManager.ConnectionStrings["stucnn"].ConnectionString;

    if (e.CommandName == "Delete")
    {
        using (SqlConnection conn = new SqlConnection(connStr))
        using (SqlCommand cmd = conn.CreateCommand())
        {
            conn.Open();
            cmd.CommandText = "DELETE FROM student WHERE sid = @sid";
            cmd.Parameters.AddWithValue("@sid", e.CommandArgument);
            cmd.ExecuteNonQuery();
        }
        BindStudent(); // 重新綁定更新畫面
    }
    else if (e.CommandName == "Edit")
    {
        // 導向編輯頁面，攜帶主鍵
        Server.Transfer($"Edit.aspx?sid={e.CommandArgument}");
    }
}

3. 啟用/停用狀態切換 (另一頁面 Default2.aspx)

protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    if (e.CommandName == "true" || e.CommandName == "false")
    {
        string connStr = ConfigurationManager.ConnectionStrings["stucnn"].ConnectionString;
        using (SqlConnection conn = new SqlConnection(connStr))
        using (SqlCommand cmd = conn.CreateCommand())
        {
            conn.Open();
            cmd.CommandText = "UPDATE student SET status = @status WHERE sid = @sid";
            cmd.Parameters.AddWithValue("@status", e.CommandName);
            cmd.Parameters.AddWithValue("@sid", e.CommandArgument);
            cmd.ExecuteNonQuery();
        }
        BindStudent();
    }
}

前端標記 (Default.aspx)

表格式樣板，含刪除/編輯按鈕

<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="Repeater1_ItemCommand">
    <HeaderTemplate>
        <table>
        <tr>
            <td style="width:100px">編號</td>
            <td style="width:100px">姓名</td>
            <td style="width:100px">圖片</td>
            <td></td><td></td>
        </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td><%# Eval("sid") %></td>
            <td><%# Eval("sname") %></td>
            <td><img width="60" height="60" src='<%# "images/" + Eval("photo") %>' /></td>
            <td><asp:LinkButton ID="btnDelete" runat="server" Text="刪除" CommandName="Delete" CommandArgument='<%# Eval("sid") %>'></asp:LinkButton></td>
            <td><asp:LinkButton ID="btnEdit" runat="server" Text="編輯" CommandName="Edit" CommandArgument='<%# Eval("sid") %>'></asp:LinkButton></td>
        </tr>
    </ItemTemplate>
    <AlternatingItemTemplate>
        <tr style="background-color:#f2f2f2">
            <td><%# Eval("sid") %></td>
            <td><%# Eval("sname") %></td>
            <td><img width="60" height="60" src='<%# "images/" + Eval("photo") %>' /></td>
            <td><asp:LinkButton ID="btnDelete" runat="server" Text="刪除" CommandName="Delete" CommandArgument='<%# Eval("sid") %>'></asp:LinkButton></td>
            <td><asp:LinkButton ID="btnEdit" runat="server" Text="編輯" CommandName="Edit" CommandArgument='<%# Eval("sid") %>'></asp:LinkButton></td>
        </tr>
    </AlternatingItemTemplate>
    <SeparatorTemplate><tr><td colspan="5"><hr /></td></tr></SeparatorTemplate>
    <FooterTemplate></table></FooterTemplate>
</asp:Repeater>

前端標記 (Default2.aspx) - 狀態切換

<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="Repeater1_ItemCommand">
    <HeaderTemplate><table><tr><th>編號</th><th>姓名</th><th>狀態</th><th></th></tr></HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td><%# Eval("SID") %></td>
            <td><%# Eval("sname") %></td>
            <td><%# Convert.ToBoolean(Eval("status")) ? "啟用" : "禁用" %></td>
            <td>
                <asp:LinkButton ID="btnSetStatus" runat="server"
                    CommandArgument='<%# Eval("sid") %>'
                    Text='<%# Convert.ToBoolean(Eval("status")) ? "禁用" : "啟用" %>'
                    CommandName='<%# Convert.ToBoolean(Eval("status")) ? "false" : "true" %>'>
                </asp:LinkButton>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate></table></FooterTemplate>
</asp:Repeater>

關鍵技巧總結

1. CommandArgument 傳遞主鍵：按鈕的 CommandArgument 綁定 Eval("sid")，後端透過 e.CommandArgument 取得。
2. CommandName 識別動作：同一 ItemCommand 事件依 CommandName 分流處理 Delete、Edit、狀態切換等邏輯。
3. 參數化查詢：所有 SQL 操作均使用 SqlParameter，防止注入攻擊。
4. AlternatingItemTemplate：隔列變色提升可讀性。
5. Server.Transfer vs Response.Redirect：編輯頁面使用 Server.Transfer 保持同一 Request，避免網址列暴露 QueryString (視需求選擇)。

進階建議

• 實際專案建議加入 OnItemDataBound 事件，依權限動態顯示/隱藏按鈕。
• 大量資料時搭配 PagedDataSource 實作分頁。
• 刪除前可透過 JavaScript confirm() 或 Bootstrap Modal 二次確認。