ASP.NET AJAX 刪除功能失效？ID 衝突與參數傳遞正確姿勢

在 ASP.NET WebForms 中使用 AJAX 刪除資料時，常見錯誤是前端用 document.getElementById('hid_id') 取得隱藏欄位值，但頁面有多筆資料導致 ID 重複，getElementById 僅回傳第一個元素，造成刪除錯誤或無反應。

錯誤程式碼

// 前端 JS
function del_Data() {
    var id = document.getElementById('hid_id').value; // ❌ 只抓第一筆
    // AJAX 呼叫後端刪除
}

// Repeater/GridView 產生多筆
<asp:HiddenField ID="hid_id" runat="server" Value='<%# Eval("Id") %>' />
<a href="#" onclick="del_Data()">刪除</a>

正確做法：直接傳遞參數

// 前端 JS 接收參數
function del_Data(id) {
    // 直接使用傳入的 id
    $.post('/api/delete', { id: id }, function(res) {
        if (res.success) location.reload();
    });
}

// 後端繫結時輸出參數
<a href="#" onclick='del_Data(<%# Eval("Id") %>)'>刪除</a>
// 或使用 data-* 屬性
<a href="#" class="btn-delete" data-id='<%# Eval("Id") %>'>刪除</a>
<script>
$('.btn-delete').click(function() {
    del_Data($(this).data('id'));
});
</script>

後端 WebMethod 範例

[WebMethod]
public static string DeleteData(int id) {
    // 執行刪除邏輯
    return new JavaScriptSerializer().Serialize(new { success = true });
}

核心原則

• 不要在重複項目中使用固定 ID，改用 data-* 屬性或直接在事件綁定時傳參。
• 前端邏輯與後端資料綁定解耦，提升可維護性。
• 若使用 UpdatePanel，確保 ClientIDMode="Static" 或正確取得 ClientID。