使用SQL连接时为DataTable每行加按钮并传递ID至C#函数

看起来你遇到的核心问题是：动态生成的带runat="server"的按钮无法触发后端事件，也没法传递行ID。这是因为ASP.NET的页面生命周期在页面渲染前就完成了，你在后端拼接的HTML按钮没有被注册到ASP.NET的控件树中，所以onServerClick事件根本不会被识别。结合你用DataTable的场景，我给你两种实用的解决方案：

方法一：用普通HTML按钮+QueryString传递ID（快速实现） #

这种方式不需要复杂的AJAX，适合快速验证功能：

1. 修改后端拼接按钮的代码 #

把原来的服务器端按钮改成普通HTML链接，把ID作为参数放在URL里：

// 替换你原来的Add按钮代码
UnreadText += " <a class=\"btn btn-info\" href=\"" + Request.RawUrl + "?action=add&id=" + user["id"] + "\">";
UnreadText += " <i class=\"icon-edit icon-white\"></i> Add ";
UnreadText += " </a>";

// Delete按钮同理修改
UnreadText += " <a class=\"btn btn-default\" href=\"" + Request.RawUrl + "?action=delete&id=" + user["id"] + "\">";
UnreadText += " <i class=\"icon-edit icon-white\"></i> Delete ";
UnreadText += " </a>";

2. 在后端Page_Load中处理请求 #

在页面的Page_Load方法里捕获URL参数，调用对应的处理逻辑：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 你的表格初始化逻辑
        LoadTableData();
    }

    // 处理添加请求
    if (Request.QueryString["action"] == "add" && !string.IsNullOrEmpty(Request.QueryString["id"]))
    {
        string targetId = Request.QueryString["id"];
        ExecuteAddProspect(targetId);
        // 重定向防止刷新重复提交
        Response.Redirect(Request.RawUrl);
    }

    // 处理删除请求（同理）
    if (Request.QueryString["action"] == "delete" && !string.IsNullOrEmpty(Request.QueryString["id"]))
    {
        string targetId = Request.QueryString["id"];
        ExecuteDeleteProspect(targetId);
        Response.Redirect(Request.RawUrl);
    }
}

// 封装添加逻辑的方法
private void ExecuteAddProspect(string id)
{
    using (SqlConnection cn = new SqlConnection("你的连接字符串"))
    {
        string insertSql = "INSERT INTO 目标表(id, name, country) VALUES (@id, @name, @country)";
        // 这里可以根据需要查询原表的其他字段，或者直接传递你需要的值
        SqlCommand cmd = new SqlCommand(insertSql, cn);
        cmd.Parameters.AddWithValue("@id", id);
        // 补充其他参数
        cn.Open();
        cmd.ExecuteNonQuery();
    }
}

// 封装删除逻辑的方法
private void ExecuteDeleteProspect(string id)
{
    // 类似添加的逻辑，写删除SQL即可
}

方法二：用AJAX传递ID（无刷新体验，更适配DataTable） #

这种方式符合DataTable的前端交互风格，不需要页面回发，用户体验更好：

1. 修改前端DataTable代码 #

监听按钮点击事件，获取行ID后用AJAX发送到后端：

$(document).ready(function() {
    // 初始化DataTable
    var table = $('#invSearch').DataTable();

    // 监听添加按钮点击
    $('#invSearch tbody').on('click', '.btn-info', function() {
        // 获取当前行的数据
        var rowData = table.row($(this).parents('tr')).data();
        var targetId = rowData[0]; // 你的第一列是ID，所以取data[0]

        // 发送AJAX请求
        $.ajax({
            url: '你的页面.aspx/AddProspect',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ id: targetId }),
            success: function(response) {
                alert('添加成功！');
                // 可选：刷新表格
                table.draw();
            },
            error: function(xhr, status, err) {
                alert('添加失败：' + err);
            }
        });
        return false; // 阻止默认跳转
    });

    // 监听删除按钮点击（同理）
    $('#invSearch tbody').on('click', '.btn-default', function() {
        var rowData = table.row($(this).parents('tr')).data();
        var targetId = rowData[0];
        $.ajax({
            url: '你的页面.aspx/DeleteProspect',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ id: targetId }),
            success: function() {
                alert('删除成功！');
                table.draw();
            }
        });
        return false;
    });

    // 你的搜索逻辑保持不变
    $('#invSearch tfoot th').each(function() {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Search '+title+'" />');
    });

    table.columns().every(function() {
        var that = this;
        $('input', this.footer()).on('keyup change', function() {
            if (that.search() !== this.value) {
                that.search(this.value).draw();
            }
        });
    });
});

2. 在后端添加WebMethod #

需要用[WebMethod]标记静态方法，接收AJAX传递的参数：

using System.Web.Services;

public partial class 你的页面 : System.Web.UI.Page
{
    // 其他代码...

    [WebMethod]
    public static void AddProspect(string id)
    {
        // 这里写插入到目标SQL表的逻辑
        using (SqlConnection cn = new SqlConnection("你的连接字符串"))
        {
            string insertSql = "INSERT INTO 目标表(id) VALUES (@id)";
            SqlCommand cmd = new SqlCommand(insertSql, cn);
            cmd.Parameters.AddWithValue("@id", id);
            cn.Open();
            cmd.ExecuteNonQuery();
        }
    }

    [WebMethod]
    public static void DeleteProspect(string id)
    {
        // 这里写删除逻辑
        using (SqlConnection cn = new SqlConnection("你的连接字符串"))
        {
            string deleteSql = "DELETE FROM 目标表 WHERE id = @id";
            SqlCommand cmd = new SqlCommand(deleteSql, cn);
            cmd.Parameters.AddWithValue("@id", id);
            cn.Open();
            cmd.ExecuteNonQuery();
        }
    }
}

为什么你原来的方法行不通？ #

你在后端拼接的<a>标签带runat="server"和onServerClick，但这些元素是在页面渲染完成后才被添加到DOM中的，ASP.NET的页面生命周期在渲染前就已经结束了，所以这些动态生成的服务器控件没有被注册到ASP.NET的控件树中，点击时自然不会触发后端事件。再加上DataTable会重新渲染表格DOM，进一步打乱了服务器控件的绑定逻辑。

内容的提问来源于stack exchange，提问作者jroyce