C# DataGrid 行双击删除事件实现

实现原理与目标

DataGrid 是 WebForms 早期常用的数据展示控件。要在不引入复杂客户端框架的前提下实现点击交互，最佳方式是在服务器端渲染 HTML 时直接嵌入 <td> 或 <tr> 标签的属性。本方案的目标是在鼠标双击某一行时，触发浏览器的 confirm() 弹窗，显示该行特定列的内容（如 ID 或名称），并根据用户选择决定是否执行后续跳转或操作。

准备条件

1. 环境要求：ASP.NET WebForms 项目，已存在配置好的 <asp:DataGrid> 控件。
2. 关键事件：需要引用或处理控件的 ItemDataBound 事件。该事件在每一行数据被绑定到行对象时触发，适合在此阶段注入动态属性。
3. 依赖库：System.Web.UI.WebControls 命名空间。

第1步：注册事件处理程序

确保你的后台代码（CodeBehind）或 .aspx 页面头部的 Runat="server" 块中注册了 OnItemDataBound 处理器。如果没有注册，双击逻辑将不会生效。

<asp:DataGrid ID="DataGrid1" runat="server" OnItemDataBound="DataGrid1_ItemDataBound">
</asp:DataGrid>

第2步：编写 ItemDataBound 逻辑

在后台 CS 文件中添加事件处理方法。该方法需过滤掉标题、脚注等非数据行，仅对普通数据和交替数据行（以及可选的选中行）进行操作。

1. 判断行类型：检查 e.Item.ItemType 是否为 ListItemType.Item、ListItemType.AlternatingItem 或 ListItemType.SelectedItem。
2. 注入脚本：使用 e.Item.Attributes.Add 方法向行对应的 HTML 元素添加 ondblclick 属性。
3. 构建字符串：拼接 JavaScript 调用，提取当前行的数据以展示给用户，例如 e.Item.Cells[1].Text 获取第二列文本。

private void DataGrid1_ItemDataBound(
    object sender,
    System.Web.UI.WebControls.DataGridItemEventArgs e
)
{
    // 仅处理数据项，跳过标题、分页导航等
    if ((e.Item.ItemType == ListItemType.Item) ||
        (e.Item.ItemType == ListItemType.AlternatingItem) ||
        (e.Item.ItemType == ListItemType.SelectedItem))
    {
        // 注入双击事件：弹出一个包含单元格文本的确认框
        e.Item.Attributes.Add("ondblclick",
            "javascript:return confirm('确定删除 ' + '" + e.Item.Cells[1].Text + "' ?');");
    }
}

第3步：验证与调试

编译运行项目后：

1. 检查渲染：在浏览器中右键查看源代码，找到 <table> 中的数据行，应能看到类似 <tr ondblclick=...> 的属性。
2. 测试交互：鼠标快速双击任意一行，观察是否弹出包含第二列数据的确认窗口。
3. 完善逻辑：上述代码仅实现了“确认”动作。实际业务中，若用户点击“确定”，通常需要通过 __doPostBack 触发服务器回发，或使用 AJAX 调用后端 API 进行实际删除。

注意事项与扩展

• 列索引：示例中使用 Cells[1] 表示第二列。请根据实际数据库结构和 Columns 集合调整索引，通常第一列为可见数据，索引从 0 开始。
• 性能影响：直接在 Attributes 中注入简单脚本对性能影响极小，但在数据量极大（成千上万行）时，建议评估是否应改用客户端虚拟列表或更轻量的现代 UI 组件库。
• XSS 防护：如果 e.Item.Cells[n].Text 中包含不可信的用户输入，直接拼接到 JavaScript 字符串中存在跨站脚本攻击（XSS）风险。生产环境中应对文本进行 HTML 编码处理后再拼接。

总结

通过利用 DataGrid 的 ItemDataBound 事件和 Attributes.Add 方法，可以灵活地在服务端控制客户端交互行为。这是一种经典的 WebForms 技巧，适用于需要在现有维护系统中快速增加双击功能的场景。以上就是 C# 实现给 DataGrid 单元行添加双击事件的详细内容，更多关于 C# WebForms 交互开发的资料请关注本站其它相关文章！