ASP.NET中如何通过DataTable为Ajax绑定的GridView添加按钮列

嘿，我太懂你这个头疼的点了！你现在的问题核心在于：你是用前端的DataTable.js来动态渲染数据，而不是依赖ASP.NET服务器端的GridView控件自身的绑定机制——这就导致你加的<asp:TemplateField>根本不会生效，因为页面加载完成后，GridView已经变成了一个普通的HTML表格容器，所有的行和列都是后端返回JSON后，由前端JS生成的，服务器端的控件标记早已经被解析成静态HTML了。

给你一套直接能用的解决方案，分两步走：

第一步：调整服务器端GridView代码 #

你可以把原来的GridView里的BoundField保留或者清空，因为前端DataTable会完全接管列的渲染。比如这样写就够了：

<asp:GridView ID="gv_productdetail" runat="server" AutoGenerateColumns="false" CssClass="table table-bordered table-condensed">
    <Columns>
        <!-- 这里可以留空，让前端DataTable控制所有列；如果想保留服务器端的列结构，也可以继续留BoundField，但前端会对应绑定 -->
    </Columns>
</asp:GridView>

第二步：修改前端DataTable配置，添加按钮列 #

在你的OnSuccess函数里，给DataTable的columns数组新增一个列，用render函数来生成按钮。这里给你做个示例，添加编辑和删除按钮，还附带了点击事件的绑定：

function OnSuccess(response) {
    // 初始化DataTable
    const productTable = $('#<%=gv_productdetail.ClientID%>').DataTable({
        paging: false,
        destroy: true,
        bLengthChange: true,
        lengthMenu: [[5, 10, -1], [5, 10, "All"]],
        bFilter: true,
        bSort: true,
        bPaginate: true,
        data: response.d,
        columns: [
            { 'data': 'ProductId', title: 'Id' }, // 对应原来的MortageID/ProductId列
            { 'data': 'ProductType', title: 'Type' }, // 对应原来的Type/ProductType列
            // 新增操作按钮列
            {
                data: null, // 不需要绑定特定字段，用row数据生成按钮
                title: '操作',
                render: function (data, type, row) {
                    // row参数就是当前行的完整数据，你可以用row.ProductId拿到主键
                    return `
                        <button class="btn btn-sm btn-primary edit-btn" data-id="${row.ProductId}">编辑</button>
                        <button class="btn btn-sm btn-danger delete-btn" data-id="${row.ProductId}">删除</button>
                    `;
                }
            }
        ]
    });

    // 给动态生成的按钮绑定点击事件（必须在DataTable初始化之后）
    $('#<%=gv_productdetail.ClientID%>').on('click', '.edit-btn', function() {
        const productId = $(this).data('id');
        // 这里写你的编辑逻辑，比如打开模态框、跳转到编辑页或者发起编辑请求
        alert(`准备编辑产品ID：${productId}`);
    });

    $('#<%=gv_productdetail.ClientID%>').on('click', '.delete-btn', function() {
        const productId = $(this).data('id');
        if (confirm('确定要删除这个产品吗？')) {
            // 这里写删除的Ajax请求逻辑，比如调用后端的删除接口
            alert(`准备删除产品ID：${productId}`);
        }
    });
};

为什么之前的TemplateField没用？ #

再给你捋清楚逻辑：当页面第一次加载时，ASP.NET会把GridView解析成一个空的<table>标签；之后你用Ajax拿到数据，是直接通过DataTable.js把JSON数据渲染成表格的行和列——整个过程和服务器端的GridView控件已经没关系了，所以你在服务器端加的TemplateField根本不会被前端解析，自然看不到按钮。

用前端DataTable的render函数生成按钮，才是这种场景下的正确做法，因为所有的内容都是前端动态生成的，必须用前端JS来控制。

内容的提问来源于stack exchange，提问作者s.k.Soni