ASP.NET Core Razor Pages：表单提交后下拉框选中状态丢失问题

我在ASP.NET Core Razor Page中实现了一个填充用户名的下拉列表，通过JavaScript的onchange="this.form.submit()"实现选中后自动提交表单。但提交后下拉框的选中状态被清除，不符合预期。

相关代码如下：

Razor页面(.cshtml)代码 #

<div class="rollname">
     <label class="required">User Name :</label>
     <select id="selectedUser" name="selectedUser" class="form-control-1"
             asp-items='@(new SelectList(Model.Users, "Key", "Value",ViewData["SelectedUserId"]))'
             onchange="this.form.submit()">
         <option value="">--Select--</option>
     </select>

 </div>

后台.cshtml.cs代码 #

public class PageNameModel : PageModel
{
    public Dictionary<long, string> Users { get; set; } // Replace with actual data type
    
    public void OnGet()
    {
        // Load users data and set default selected user ID
        ViewData["SelectedUserId"] = "123"; // Replace with your logic to get default selected user ID
    }

    public IActionResult OnPost(long selectedUser)
    {
        // Process form submission
        HttpContext.Session.SetString("selectedUserId", selectedUser.ToString());
        ViewData["SelectedUserId"] = selectedUser.ToString();
        return RedirectToPage();
    }
}

一、修复当前问题：保留选中状态 #

问题核心是RedirectToPage()会触发OnGet方法，而你在OnGet里硬编码了默认选中ID，覆盖了Session中存储的已选值。修改OnGet逻辑，优先从Session读取选中ID即可：

修改后台OnGet方法 #

public void OnGet()
{
    // 加载用户数据逻辑保留
    // 优先从Session取已选ID，无值则用默认值
    var selectedId = HttpContext.Session.GetString("selectedUserId") ?? "123";
    // 注意类型匹配：Users的Key是long，所以转成对应类型
    ViewData["SelectedUserId"] = long.Parse(selectedId);
}

同时调整OnPost里的ViewData赋值，直接用long类型避免类型不匹配：

public IActionResult OnPost(long selectedUser)
{
    HttpContext.Session.SetString("selectedUserId", selectedUser.ToString());
    ViewData["SelectedUserId"] = selectedUser; // 直接传入long类型
    return RedirectToPage();
}

二、更优实现方案：避免整页刷新 #

用表单提交会导致整页刷新，体验不佳。推荐改用AJAX异步提交，既保留选中状态，又提升用户体验：

1. 修改Razor页面代码 #

<div class="rollname">
    <label class="required">User Name :</label>
    <select id="selectedUser" name="selectedUser" class="form-control-1"
            asp-items='@(new SelectList(Model.Users, "Key", "Value", ViewData["SelectedUserId"]))'>
        <option value="">--Select--</option>
    </select>
</div>

<!-- 示例：需要更新的用户内容区域 -->
<div id="userContent">
    <!-- 这里展示选中用户的相关数据 -->
</div>

<script>
document.getElementById('selectedUser').addEventListener('change', function() {
    const selectedUserId = this.value;
    if (!selectedUserId) return;

    fetch('/PageName?handler=SelectUser', {
        method: 'POST',
        headers: {
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(selectedUserId)
    })
    .then(response => response.text())
    .then(data => {
        // 更新页面需要展示的用户内容
        document.getElementById('userContent').innerHTML = data;
        // 下拉框选中状态自动保留，无需额外处理
    });
});
</script>

2. 后台添加AJAX处理Handler #

public IActionResult OnPostSelectUser([FromBody] long selectedUser)
{
    HttpContext.Session.SetString("selectedUserId", selectedUser.ToString());
    // 返回需要更新的HTML片段，比如用户名称或详情
    return Content($"<p>当前选中用户：{Users[selectedUser]}</p>");
}

这种方式无需整页刷新，彻底避免选中状态丢失问题，同时提升页面交互流畅度。

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