ASP.NET Core Razor Pages浏览器返回时表单数据异常问题

这是浏览器**后退缓存（BF Cache）**引发的行为，并非代码操作错误。当点击浏览器后退按钮时，浏览器会直接从本地缓存中恢复页面的DOM状态（包括下拉框的选中值），而非重新向服务器请求渲染页面，这就导致下拉框显示的是离开该页面时的最后选中值，而页面文本是服务器之前渲染的历史状态，出现不一致。

解决方法 #

方法1：监听pageshow事件同步状态 #

在页面中添加JavaScript代码，监听pageshow事件，当页面从缓存恢复时，根据页面显示的选中年份同步下拉框值：

<script>
window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
        const selectedYearText = document.querySelector('p').textContent;
        const selectedYear = selectedYearText.replace('You selected year ', '');
        document.getElementById('Year').value = selectedYear;
    }
});
</script>

方法2：禁用BF Cache（不推荐，影响性能） #

在PageModel中设置响应头，禁止浏览器缓存页面：

public IActionResult OnGet(int? year)
{
    // 原有业务逻辑
    Response.Headers["Cache-Control"] = "no-store";
    return Page();
}

这种方式会强制浏览器每次后退时重新请求服务器，虽能解决状态不一致，但会降低后退操作的加载速度。

方法3：改用AJAX提交表单（推荐，优化用户体验） #

将表单提交改为异步请求，避免页面刷新，让页面状态始终保持同步，后退时也不会出现缓存问题：

1. 修改Index.cshtml的表单提交逻辑：

<form id="yearForm">
    <select id="Year" name="year">
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
    </select>
    <button type="submit">Select</button>
</form>
<p id="result"></p>

<script>
document.getElementById('yearForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const year = document.getElementById('Year').value;
    const response = await fetch(`?handler=SelectYear&year=${year}`);
    const result = await response.text();
    document.getElementById('result').textContent = result;
    history.pushState({year: year}, '', `?year=${year}`);
});

window.addEventListener('popstate', async function(event) {
    if (event.state?.year) {
        document.getElementById('Year').value = event.state.year;
        const response = await fetch(`?handler=SelectYear&year=${event.state.year}`);
        const result = await response.text();
        document.getElementById('result').textContent = result;
    }
});
</script>

2. 在Index.cshtml.cs中添加对应的Handler：

public IActionResult OnGetSelectYear(int year)
{
    SelectedYear = year;
    return Content($"You selected year {year}");
}

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