Razor Pages搜索表单点击后退按钮后下拉框不保留历史值问题求解

• 前后端参数名不匹配：你手动给select标签指定了name="tableName"，覆盖了asp-for="@Model.TableId"自动生成的参数名，提交的参数名和服务端取值的tableId不对应
• 服务端未回绑选中值：你在OnGet方法中只拿到tableId查询了数据，没有把该值赋值给Model.TableId，Razor渲染页面时无法自动设置下拉框的选中状态
• 浏览器往返缓存（bfcache）影响：部分浏览器会缓存页面的表单状态，后退时优先读取缓存的DOM状态，不会重新解析服务端返回的正确选中值

第一步：修正前端表单代码 #

删掉select标签上手动指定的id和name属性，让asp-for自动生成匹配模型属性的参数名，同时新增js处理浏览器缓存问题：

<form id="form" method="get" class="form-inline" >
    <div id="divId">
        <select 
               asp-for="@Model.TableId"
                class="m-2 form-control tableName"
                asp-items="@Model.TableSelectList">
        </select>
        <input name="name"/>
        <button type="submit">搜索</button>
    </div>
</form>
<script>
// 监听页面展示事件，处理浏览器缓存导致的表单状态不同步
window.addEventListener('pageshow', () => {
    const urlParams = new URLSearchParams(window.location.search);
    const currentTableId = urlParams.get('TableId');
    if(currentTableId) {
        document.getElementById('TableId').value = currentTableId;
    }
});
</script>

第二步：修正服务端逻辑 #

在OnGet方法中把拿到的tableId赋值给Model.TableId，让Razor渲染时自动设置选中状态：

public IActionResult OnGet()
{
    // 省略其他逻辑
    var queryList = Request.Query;
    if(queryList.ContainsKey("TableId"))
    {
        var tableId = queryList["TableId"].First();
        _repo.getTableResults(tableId);
        // 关键：回绑选中值到模型
        Model.TableId = tableId;
    }
    // 省略其他逻辑
    return Page();
}

你也可以直接使用ASP.NET Core的模型绑定功能，不用手动读取Request.Query，直接给PageModel加public int TableId { get; set; }属性，加上[BindProperty(SupportsGet = true)]注解，框架会自动把查询参数赋值给该属性，不用手动取值和回绑。

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