ASP.NET WebForms中GridView列头搜索框无法输入的问题

问题背景 #

开发ASP.NET WebForms应用时，在GridView列头模板中添加了TextBox作为搜索框，计划通过后台OnTextChanged事件和前端JavaScript实现列过滤功能，但搜索框显示正常却无法输入，附上相关JS代码求排查原因及解决方法。

现有JavaScript代码 #

$(document).ready(function () {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    function EndRequestHandler(sender, args) {
        var rows1 = $('table#<%= Table1.ClientID %> tr:last').index() + 1;

        if (rows1 > 1) {
            // Initialize DataTable with column-based search functionality
            var table = $(\"#<%=Table1.ClientID%>\").DataTable({
                stateSave: true,
                pagingType: \"full_numbers\",
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, \"All\"]],
                dom: '<\"top\"Bfl>rt<\"bottom\"ip><\"clear\">',
                buttons: [
                    { extend: 'copy', className: 'btn-sm btn-default' },
                    { extend: 'excel', className: 'btn-sm btn-success', filename: function () { return getExportFileName(); } },
                    { extend: 'print', className: 'btn-sm btn-danger' }
                ],
                responsive: false,
                retrieve: false,
                ordering: false,
            });

            // Apply search on each column
            $(\"#<%=Table1.ClientID%> thead input.search-column\").on('keyup change', function () {
                var colIndex = $(this).closest('th').index();  // Get the index of the column
                table.column(colIndex).search(this.value).draw();  // Perform search
            });
        }
    }

    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (evt, args) {
        var rows1 = $('table#<%= Table1.ClientID %> tr:last').index() + 1;

        if (rows1 > 1) {
            var table = $(\"#<%=Table1.ClientID%>\").DataTable({
                stateSave: true,
                pagingType: \"full_numbers\",
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, \"All\"]],
                dom: '<\"top\"Bfl>rt<\"bottom\"ip><\"clear\">',
                buttons: [
                    { extend: 'copy', className: 'btn-sm btn-default' },
                    { extend: 'excel', className: 'btn-sm btn-success', filename: function () { return getExportFileName(); } },
                    { extend: 'print', className: 'btn-sm btn-danger' }
                ],
                responsive: false,
                retrieve: false,
                ordering: false,
            });

            // Apply search on each column on initial load
            $(\"#<%=Table1.ClientID%> thead input.search-column\").on('keyup change', function () {
                var colIndex = $(this).closest('th').index();
                table.column(colIndex).search(this.value).draw();
            });
        }
    });
});

原因分析与解决方法 #

1. DataTable重复初始化导致DOM覆盖 #

• 问题：endRequest和pageLoaded事件中重复初始化DataTable，且retrieve: false会强制重新创建表格，原搜索框DOM被新生成的表格元素替换，失去交互能力。
• 解决：提取公共初始化方法，设置retrieve: true避免重复创建；仅在必要时重新绑定事件，而非重复初始化整个表格。

2. 转义字符使用错误 #

• 问题：代码中$(\"#<%=Table1.ClientID%>\")的多余转义符\会导致选择器解析失败，无法正确绑定事件或初始化DataTable，进而引发DOM异常。
• 解决：移除多余转义符，改为$("#<%=Table1.ClientID%>")。

3. 事件重复绑定引发的冲突 #

• 问题：每次回发都绑定一次keyup change事件，会导致事件叠加触发，同时可能干扰输入框的正常交互。
• 解决：绑定事件前先解绑原有事件，避免重复绑定。

修正后的代码示例 #

$(document).ready(function () {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(EndRequestHandler);
    prm.add_pageLoaded(PageLoadedHandler);

    // 公共初始化方法
    function initDataTable() {
        var tableSelector = "#<%=Table1.ClientID%>";
        var rowCount = $(tableSelector + " tr:last").index() + 1;
        
        if (rowCount <= 1) return;

        // 使用retrieve: true避免重复初始化表格
        var table = $(tableSelector).DataTable({
            stateSave: true,
            pagingType: "full_numbers",
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            dom: '<"top"Bfl>rt<"bottom"ip><"clear">',
            buttons: [
                { extend: 'copy', className: 'btn-sm btn-default' },
                { extend: 'excel', className: 'btn-sm btn-success', filename: getExportFileName },
                { extend: 'print', className: 'btn-sm btn-danger' }
            ],
            responsive: false,
            retrieve: true,
            ordering: false,
        });

        // 先解绑再绑定，防止事件重复触发
        $(tableSelector + " thead input.search-column")
            .off('keyup change')
            .on('keyup change', function () {
                var colIndex = $(this).closest('th').index();
                table.column(colIndex).search(this.value).draw();
            });
    }

    function EndRequestHandler(sender, args) {
        initDataTable();
    }

    function PageLoadedHandler(evt, args) {
        initDataTable();
    }
});

额外检查项 #

• 确认GridView列头模板中的TextBox已添加CssClass="search-column"，确保选择器能定位到元素。
• 打开浏览器控制台查看是否有JS错误（如DataTable未加载、选择器无效等），这些会直接导致功能异常。
• 检查UpdatePanel配置，避免回发时整个GridView被重新渲染，导致DOM元素丢失。

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