Repeater 實現編輯、更新、刪除功能完整範例

需求背景

Repeater 不像 GridView 內建編輯模板，但透過 ItemTemplate 切換顯示/編輯面板，配合 ItemCommand 事件，即可實現完整的 CRUD 操作。

核心架構

1. 兩個 Panel：plItem（唯讀檢視）、plEdit（編輯模式），互斥顯示。
2. ItemDataBound：依據 id 變數決定哪一列顯示編輯面板。
3. ItemCommand：處理 Edit、Cancel、Update、Delete 四種命令。

後台完整程式碼

private int editId = -1; // 記錄正在編輯的列 UserId

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

private void BindGrid()
{
    string sql = "SELECT * FROM [User]";
    using (var conn = new OleDbConnection(GetStrConnection()))
    using (var cmd = new OleDbCommand(sql, conn))
    {
        conn.Open();
        rptUser.DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection);
        rptUser.DataBind();
    }
}

protected void rptUser_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        var record = (System.Data.Common.DbDataRecord)e.Item.DataItem;
        int userId = int.Parse(record["UserId"].ToString());

        var plItem = (Panel)e.Item.FindControl("plItem");
        var plEdit = (Panel)e.Item.FindControl("plEdit");

        if (userId != editId)
        {
            plItem.Visible = true;
            plEdit.Visible = false;
        }
        else
        {
            plItem.Visible = false;
            plEdit.Visible = true;
        }
    }
}

protected void rptUser_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    switch (e.CommandName)
    {
        case "Edit":
            editId = int.Parse(e.CommandArgument.ToString());
            break;
        case "Cancel":
            editId = -1;
            break;
        case "Update":
            var txtName = (TextBox)rptUser.Items[e.Item.ItemIndex].FindControl("txtName");
            var txtEmail = (TextBox)rptUser.Items[e.Item.ItemIndex].FindControl("txtEmail");
            var txtQQ = (TextBox)rptUser.Items[e.Item.ItemIndex].FindControl("txtQQ");
            int uid = int.Parse(e.CommandArgument.ToString());

            string sql = "UPDATE [User] SET Name=@Name, Email=@Email, QQ=@QQ WHERE UserId=@UserId";
            using (var conn = new OleDbConnection(GetStrConnection()))
            using (var cmd = new OleDbCommand(sql, conn))
            {
                cmd.Parameters.Add("@Name", OleDbType.VarWChar).Value = txtName.Text.Trim();
                cmd.Parameters.Add("@Email", OleDbType.VarWChar).Value = txtEmail.Text.Trim();
                cmd.Parameters.Add("@QQ", OleDbType.VarWChar).Value = txtQQ.Text.Trim();
                cmd.Parameters.Add("@UserId", OleDbType.Integer).Value = uid;
                conn.Open();
                cmd.ExecuteNonQuery();
            }
            editId = -1;
            break;
        case "Delete":
            int delId = int.Parse(e.CommandArgument.ToString());
            string delSql = "DELETE FROM [User] WHERE UserId=@UserId";
            using (var conn = new OleDbConnection(GetStrConnection()))
            using (var cmd = new OleDbCommand(delSql, conn))
            {
                cmd.Parameters.Add("@UserId", OleDbType.Integer).Value = delId;
                conn.Open();
                cmd.ExecuteNonQuery();
            }
            break;
    }
    BindGrid();
}

private string GetStrConnection()
{
    return "Provider=Microsoft.Jet.OleDb.4.0;data source=" + Server.MapPath("~/Database/test.mdb");
}

前台 .aspx 關鍵片段

<asp:Repeater ID="rptUser" runat="server" 
    OnItemCommand="rptUser_ItemCommand" 
    OnItemDataBound="rptUser_ItemDataBound">
    <HeaderTemplate>
        <table><thead><tr>
            <th>用戶ID</th><th>用戶名</th><th>郵件</th><th>QQ</th><th>操作</th>
        </tr></thead><tbody>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td><%# Eval("UserId") %></td>
            <td><%# Eval("Name") %></td>
            <td><%# Eval("Email") %></td>
            <td><%# Eval("QQ") %></td>
            <td>
                <asp:Panel ID="plItem" runat="server">
                    <asp:LinkButton CommandName="Edit" CommandArgument='<%# Eval("UserId") %>' Text="編輯" />
                    <asp:LinkButton CommandName="Delete" CommandArgument='<%# Eval("UserId") %>' Text="刪除" OnClientClick="return confirm('確定刪除？');" />
                </asp:Panel>
                <asp:Panel ID="plEdit" runat="server" Visible="false">
                    <asp:TextBox ID="txtName" runat="server" Text='<%# Eval("Name") %>' />
                    <asp:TextBox ID="txtEmail" runat="server" Text='<%# Eval("Email") %>' />
                    <asp:TextBox ID="txtQQ" runat="server" Text='<%# Eval("QQ") %>' />
                    <asp:LinkButton CommandName="Update" CommandArgument='<%# Eval("UserId") %>' Text="更新" />
                    <asp:LinkButton CommandName="Cancel" Text="取消" />
                </asp:Panel>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate></tbody></table></FooterTemplate>
</asp:Repeater>

安全性補充

• 實務上請務必使用參數化查詢（如範例所示）防止 SQL Injection。
• 刪除操作建議加上 OnClientClick="return confirm(...)" 二次確認。
• 若資料量大，建議改用 GridView 或 ListView 內建編輯功能，減少手寫程式碼。