ASP.NET MVC中浏览器后退按钮显示文本框旧值问题

这个坑我之前踩过！本质是浏览器的表单数据缓存机制在搞鬼——哪怕后端已经正确初始化了模型，HTML里的value属性也显示正确值，但浏览器为了“贴心”保留用户之前的输入，会从本地缓存里拉旧值来显示，完全忽略了服务器返回的新value。

下面给你几个靠谱的解决办法，按优先级排序：

1. 给文本框/表单添加autocomplete="off" #

这是最简单直接的方式，告诉浏览器不要自动填充或缓存这个表单的内容：

• 单个文本框：

<input type="text" id="MyTextBox" name="MyTextBox" autocomplete="off" />

• 整个表单（一次性搞定所有控件）：

<form method="post" autocomplete="off">
    <!-- 表单内容 -->
</form>

2. 用JavaScript强制同步显示值和value属性 #

如果第一种方法不生效（有些浏览器对autocomplete="off"支持不太一致），可以在页面加载完成后，手动把元素的value属性赋值给它的显示值，强制刷新：

$(document).ready(function() {
    // 替换成你的文本框ID
    const textBox = $('#MyTextBox');
    textBox.val(textBox.attr('value'));
});

3. 在后端禁用页面缓存 #

从根源上阻止浏览器缓存这个页面，让后退的时候必须重新从服务器获取最新内容。你可以在Get Action方法里添加缓存控制头：

public ActionResult MyPage()
{
    // 禁用缓存
    Response.Cache.SetCacheability(HttpCacheability.NoCache);
    Response.Cache.SetNoStore();
    
    // 初始化模型
    var model = new MyModel { MyTextBox = "正确的模型值" };
    return View(model);
}

或者用特性简化写法：

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public ActionResult MyPage()
{
    var model = new MyModel { MyTextBox = "正确的模型值" };
    return View(model);
}

为什么会出现这个问题？ #

当你用jQuery修改文本框内容并提交表单后，浏览器会把表单的输入状态存在本地缓存里。重定向到新页面后再点击后退，浏览器为了提升用户体验，会自动恢复之前的输入内容，哪怕服务器返回的HTML里value已经是新的模型值，它也会优先用缓存的旧值来显示——这就是你看到“value属性正确，但UI显示旧值”的原因。

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