ASP.NET MVC（非Core）页面回退时Edge丢失表单数据问题咨询

这其实是不同浏览器对**后退/前进缓存（BF Cache，Back-Forward Cache）**的处理差异导致的，不算ASP.NET MVC框架的Bug，而是浏览器行为的区别。Chrome和Firefox会完整缓存页面的状态（包括表单输入值），当用户通过后退按钮返回时直接从缓存恢复页面；而Edge（哪怕是基于Chromium的新版）在某些场景下，对服务端渲染的ASP.NET MVC页面可能会跳过表单状态的缓存，导致返回时表单回到初始状态。

下面提供两种可行的代码解决思路，分别从前端和服务端层面处理：

前端方案：利用sessionStorage和pageshow事件恢复表单状态 #

浏览器的pageshow事件会在页面从BF Cache恢复时触发，我们可以在页面离开时把表单值存入sessionStorage，返回时再读取恢复：

// 搜索页的JavaScript（用jQuery示例，原生JS也可以实现）
$(function() {
    // 页面加载/恢复时，尝试从sessionStorage读取并填充表单
    window.addEventListener('pageshow', function(e) {
        if (e.persisted || sessionStorage.getItem('searchFormData')) {
            const formData = JSON.parse(sessionStorage.getItem('searchFormData'));
            $('#SearchText').val(formData.searchText);
            $('#Category').val(formData.category);
        }
    });

    // 页面即将离开时，保存当前表单值到sessionStorage
    window.addEventListener('beforeunload', function() {
        const formData = {
            searchText: $('#SearchText').val(),
            category: $('#Category').val()
        };
        sessionStorage.setItem('searchFormData', JSON.stringify(formData));
    });

    // 提交表单时清空缓存（可选，避免提交后返回仍保留旧值）
    $('#searchForm').on('submit', function() {
        sessionStorage.removeItem('searchFormData');
    });
});

这个方案的优势是纯前端实现，不需要修改服务端代码，兼容性好，能覆盖所有浏览器的BF Cache差异场景。

服务端方案：利用TempData保存搜索参数 #

ASP.NET MVC的TempData可以临时存储数据，并且默认会在读取后保留一次（可以用Keep()方法延长有效期），我们可以在结果页的Action中保存搜索参数，返回搜索页时再取出填充表单：

1. 结果页Action保存参数 #

public ActionResult SearchResults(string searchText, string category)
{
    // 保存搜索参数到TempData，调用Keep()确保后退时仍能读取
    TempData["SearchText"] = searchText;
    TempData["Category"] = category;
    TempData.Keep("SearchText");
    TempData.Keep("Category");

    // 执行搜索逻辑，返回结果视图
    var searchResults = _searchRepository.GetResults(searchText, category);
    return View(searchResults);
}

2. 搜索页Action读取参数并填充ViewModel #

public ActionResult Search()
{
    var viewModel = new SearchViewModel();
    
    // 从TempData中取出参数，填充ViewModel
    if (TempData.ContainsKey("SearchText"))
    {
        viewModel.SearchText = TempData["SearchText"].ToString();
        TempData.Keep("SearchText"); // 继续保留，支持多次后退操作
    }
    if (TempData.ContainsKey("Category"))
    {
        viewModel.Category = TempData["Category"].ToString();
        TempData.Keep("Category");
    }

    // 加载下拉框选项
    ViewBag.Categories = new SelectList(_categoryRepository.GetAll(), "Id", "Name");
    
    return View(viewModel);
}

3. 搜索页View绑定ViewModel #

@model SearchViewModel

@using (Html.BeginForm("SearchResults", "Home", FormMethod.Get, new { id = "searchForm" }))
{
    <div>
        @Html.LabelFor(m => m.SearchText)
        @Html.TextBoxFor(m => m.SearchText)
    </div>
    <div>
        @Html.LabelFor(m => m.Category)
        @Html.DropDownListFor(m => m.Category, ViewBag.Categories as SelectList)
    </div>
    <button type="submit">搜索</button>
}

这个方案的优势是完全由服务端控制表单状态，不受浏览器缓存策略影响，适合对前端交互限制较多的场景。

额外提醒：如果是旧版Edge（非Chromium内核），其缓存策略差异会更明显，上面的两种方案都能很好地兼容。新版Edge虽然基于Chromium，但仍可能存在个别场景下的缓存行为不同，所以用代码兼容是最稳妥的方式。

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