ASP.NET中GridView选择项后保留JavaScript搜索条件的方法

问题核心是CheckBox的AutoPostBack="true"触发整页回发，导致DataTables重新初始化，搜索状态未被保留。以下是两种实用解决方案：

方案1：回发时保存并恢复搜索条件 #

通过隐藏字段存储搜索值，回发后重新加载DataTables时恢复搜索状态：

步骤1：添加隐藏字段到ASPX页面 #

<asp:HiddenField ID="hdnSearchValue" runat="server" />

步骤2：修改DataTables初始化脚本 #

$(document).ready(function () {
    // 初始化DataTables
    var table = $('#gridViewArtifacts').DataTable({
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        searching: true,
        ordering: true,
        paging: true
    });

    // 回发后恢复之前的搜索条件
    var savedSearch = $('#<%= hdnSearchValue.ClientID %>').val();
    if (savedSearch) {
        table.search(savedSearch).draw();
    }

    // 实时保存搜索框内容到隐藏字段
    $('.dataTables_filter input').on('keyup change', function () {
        $('#<%= hdnSearchValue.ClientID %>').val($(this).val());
    });

    // 回发前强制保存当前搜索值
    window.onbeforeunload = function () {
        $('#<%= hdnSearchValue.ClientID %>').val(table.search());
    };
});

后端无需额外代码，隐藏字段的值会自动通过ViewState保留。

方案2：用AJAX替代AutoPostBack（推荐） #

取消整页回发，通过AJAX提交选中状态，完全保留DataTables的客户端状态：

步骤1：修改CheckBox控件 #

移除AutoPostBack="true"和服务器端事件绑定：

<asp:CheckBox ID="chkSelect" runat="server" />

步骤2：添加AJAX处理脚本 #

$(document).ready(function () {
    var table = $('#gridViewArtifacts').DataTable({
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        searching: true,
        ordering: true,
        paging: true
    });

    // 处理CheckBox勾选事件
    $('#gridViewArtifacts input[type="checkbox"]').on('change', function () {
        var $checkbox = $(this);
        var rowID = $checkbox.closest('tr').find('td:eq(1)').text(); // 替换为你存储行标识的列索引
        var isChecked = $checkbox.is(':checked');

        // AJAX提交到后端方法
        $.ajax({
            type: "POST",
            url: "你的页面名.aspx/UpdateRowSelection",
            data: JSON.stringify({ rowID: rowID, isChecked: isChecked }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (res) {
                // 可选：更新页面上的选中计数等UI元素
            },
            error: function (xhr) {
                console.error('提交失败：' + xhr.responseText);
            }
        });
    });
});

步骤3：后端添加WebMethod处理逻辑 #

using System.Web.Services;

public partial class 你的页面名 : System.Web.UI.Page
{
    [WebMethod]
    public static void UpdateRowSelection(string rowID, bool isChecked)
    {
        // 这里实现选中状态的保存逻辑，比如存入Session或数据库
        var selectedItems = Session["SelectedArtifacts"] as List<string> ?? new List<string>();
        if (isChecked)
        {
            if (!selectedItems.Contains(rowID)) selectedItems.Add(rowID);
        }
        else
        {
            selectedItems.Remove(rowID);
        }
        Session["SelectedArtifacts"] = selectedItems;
    }
}

方案对比 #

• 方案1适合必须保留服务器端回发逻辑的场景，代码改动小
• 方案2更优，避免整页刷新，用户体验更好，同时完全保留DataTables的搜索、排序状态

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