ASP.NET GridView重载后重新应用jQuery过滤器的问题求助

Hey there! I totally get where you're coming from—this postback behavior in ASP.NET can be super frustrating when you've got your jQuery filter working perfectly, only to have it vanish the second you click an Edit button. Let's break down why this happens and walk through the fixes step by step.

Why This Happens #

ASP.NET postbacks (like clicking an Edit, Delete, or Update button on a GridView) rebuild the page's DOM (or just the content inside an UpdatePanel). That means any jQuery event bindings you set up on page load, plus the filtered state of your GridView rows, get wiped out when the new DOM elements are rendered.

Solutions to Restore the Filter After Postbacks #

1. Save Your Filter State #

First, we need to keep track of the search text the user entered so we can reapply it after the postback. The most reliable way to do this in ASP.NET is with a hidden field that persists its value across postbacks:

Add this to your ASPX markup:

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

Then, update your search button click handler to save the search text to this hidden field:

$('#searchBtn').click(function() {
    var searchText = $('#searchInput').val();
    // Save the search text to the hidden field
    $('#<%= hfSearchText.ClientID %>').val(searchText);
    // Run your existing filter logic
    filterGridViewRows(searchText);
});

2. Reapply the Filter on Page Load (and Postbacks) #

Next, we need to make sure the filter runs automatically whenever the page finishes loading—whether it's the first load or a postback.

First, let's wrap your filter logic in a reusable function:

function filterGridViewRows(searchText) {
    // Target your GridView rows (skip the header row)
    $('#<%= YourGridViewID.ClientID %> tr:not(:first)').each(function() {
        var rowContent = $(this).text().toLowerCase();
        if (rowContent.indexOf(searchText.toLowerCase()) === -1) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
}

For Full Page Postbacks

Use $(document).ready() to check for the saved search text and reapply the filter:

$(document).ready(function() {
    var savedSearch = $('#<%= hfSearchText.ClientID %>').val();
    if (savedSearch) {
        // Restore the search text to the input box
        $('#searchInput').val(savedSearch);
        // Re-run the filter
        filterGridViewRows(savedSearch);
    }

    // Rebind the search button click event
    $('#searchBtn').click(function() {
        var searchText = $('#searchInput').val();
        $('#<%= hfSearchText.ClientID %>').val(searchText);
        filterGridViewRows(searchText);
    });
});

For UpdatePanel (Partial Postbacks)

If you're using an UpdatePanel for partial page updates, the $(document).ready() event won't fire after postbacks. Instead, use ASP.NET's PageRequestManager to hook into the end of the asynchronous postback:

// Check if we're using an UpdatePanel
if (typeof Sys !== 'undefined' && Sys.WebForms && Sys.WebForms.PageRequestManager) {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    
    // This runs after every partial postback completes
    prm.add_endRequest(function() {
        var savedSearch = $('#<%= hfSearchText.ClientID %>').val();
        if (savedSearch) {
            $('#searchInput').val(savedSearch);
            filterGridViewRows(savedSearch);
        }

        // Rebind the search button (since UpdatePanel re-renders elements)
        $('#searchBtn').off('click').on('click', function() {
            var searchText = $('#searchInput').val();
            $('#<%= hfSearchText.ClientID %>').val(searchText);
            filterGridViewRows(searchText);
        });
    });
}

3. Extra Tips #

• Make sure your HiddenField has ViewStateEnabled="true" (this is the default) so its value persists across postbacks.
• If you don't want to use a HiddenField, you could also store the search text in localStorage, but HiddenFields are more reliable for postback scenarios since they're tied to the page's server-side state.
• Always re-bind your jQuery events after postbacks—any elements inside the UpdatePanel get recreated, so old event bindings won't work anymore.

That should do it! Now when you click an Edit button (or any other postback trigger), your GridView will automatically reapply the last search filter without needing to click the search button again.

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