ASP.NET Core 6.0 Razor页面浏览器后退按钮失效问题求助

问题根源 #

你当前用AJAX POST请求加载搜索数据，POST请求不会被浏览器添加到历史栈，且搜索参数只存在前端内存里，后退时无法自动恢复。同时跳转到详情页的过程没有把搜索状态同步到URL，导致后退后无法还原之前的搜索结果。

具体解决办法 #

1. 将搜索请求改为GET，并同步搜索参数到URL #

把AJAX的请求类型从POST改成GET，同时把邮箱参数拼到URL的查询字符串里，这样浏览器会记录带参数的URL，后退时能直接读取参数。

修改Index.cshtml的AJAX代码：

"ajax": {
    "url": "Users/LoadUsersData",
    "type": "GET",
    "datatype": "json",
    data: {
        Email: $('#User_Email').val()
    },
    // 发送前更新浏览器URL，确保历史记录正确
    beforeSend: function() {
        const email = $('#User_Email').val();
        const newUrl = email ? `/Users/Index?Email=${encodeURIComponent(email)}` : '/Users/Index';
        window.history.pushState({ email: email }, '', newUrl);
    }
}

同时修改UsersController的对应方法，支持接收GET参数并回填页面：

public IActionResult Index(string email = null)
{
    ViewBag.SearchEmail = email;
    return View();
}

public IActionResult LoadUsersData(string email)
{
    // 原有搜索逻辑，根据email查询用户
    var users = _userService.SearchByEmail(email);
    return Json(new { data = users });
}

在Index.cshtml的邮箱输入框初始化时回填参数：

<input type="text" id="User_Email" value="@ViewBag.SearchEmail" placeholder="输入邮箱搜索">

2. 监听浏览器前进/后退事件，自动触发搜索 #

添加监听popstate事件，当用户点击后退/前进时，读取URL参数并自动恢复搜索状态：

$(document).ready(function() {
    // 页面加载时，若URL有Email参数则自动触发搜索
    const urlParams = new URLSearchParams(window.location.search);
    const savedEmail = urlParams.get('Email');
    if (savedEmail) {
        $('#User_Email').val(savedEmail);
        // 触发表格的AJAX重载（假设用DataTables）
        $('#yourTableId').DataTable().ajax.reload();
    }

    // 监听前进后退事件
    window.addEventListener('popstate', function(event) {
        if (event.state && event.state.email) {
            $('#User_Email').val(event.state.email);
            $('#yourTableId').DataTable().ajax.reload();
        } else {
            $('#User_Email').val('');
            $('#yourTableId').DataTable().ajax.reload();
        }
    });
});

3. 保持详情页跳转逻辑不变 #

网格中的姓名超链接无需修改，跳转到Users/Info/{userid}是正常GET请求，会被浏览器添加到历史栈，后退时会直接回到带搜索参数的Index页，此时上面的代码会自动恢复搜索状态。

原理说明 #

• 用GET请求传递搜索参数，让浏览器将带参数的页面状态存入历史栈
• 通过pushState更新URL，确保每次搜索都生成独立的历史记录
• 监听popstate事件，在后退/前进时自动读取参数并触发搜索

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