ASP.NET Core页面重定向刷新后如何保留combobox选中值

下拉框刷新后无法保留选中值，是三个绑定逻辑错误导致的：

• <select>标签的asp-for错误绑定了整个@Model对象，而非存储选中值的单个属性，ASP.NET Core Tag Helper无法自动识别要选中的选项
• 前端跳转携带的group参数未被后端正确接收，也没有回传给视图作为选中状态的判断依据
• 渲染<option>时没有做选中状态匹配逻辑，浏览器默认会选中第一个可用选项，所以一直显示ID为1的项

按以下步骤调整代码即可：

• 第一步：在视图对应的Model（ViewModel/PageModel）中新增属性，专门存储当前选中的分组值，属性类型和分组列表的元素类型保持一致（通常为int或string），示例属性名为SelectedGroup
• 第二步：修改后端接收请求的方法，读取URL中携带的group参数，将参数值赋值给SelectedGroup属性后，再把模型传递给视图
• 第三步：修正<select>标签的asp-for绑定目标，指向SelectedGroup属性而非整个Model
• 第四步：渲染<option>时增加选中状态判断，值和SelectedGroup匹配的选项追加selected属性，确保刷新后能正确回显

修正后的视图代码（select部分） #

<div class="content4 flex-content4">
    <div class="flex-item flex-item1"> 
        <input type="hidden" value="" asp-for="tournamentID" id="index" />
        <label asp-for="tournamentID" value="Groups"></label>
        <!-- 修正asp-for绑定到选中值属性 -->
        <select id="tournament" onchange="PassSelectedValue2(this)" name="tournament" asp-for="SelectedGroup">
            @if (Model.groups != null)
            {
                foreach (var number in Model.groups)
                {
                    <!-- 增加选中状态判断 -->
                    <option value="@number" selected="@(Model.SelectedGroup.Equals(number) ? "selected" : null)">@number</option>
                }
                <option value="" selected="@(string.IsNullOrEmpty(Model.SelectedGroup?.ToString()) ? "selected" : null)">Knockout Stage</option>
            }
        </select>
    </div>
    <div class="flex-item flex-item2"> 
        <table class="Leaderboard">
            <tr>
                <th class="id">#</th>
                <th class="name" width="210px">Name</th>
                <th class="matchesPlayed">Matches played</th>
                <th class="pointsWon" width="100px">Points won</th>
            </tr>
            @foreach (var p in @Model.playerInThatGroup)
            {
                <tr>
                    <td class="tdleft">@p.id</td>
                    <td class="tdleft">@p.name</td>
                    <td class="tdleft">@p.listOfGames.Count</td>
                    <td class="tdleft">@p.nrOfWins</td>
                </tr>
            }
        </table>
    </div> 
</div>

修正后的JS代码 #

function PassSelectedValue2(selectObject) {
    console.log(selectObject.value);
    // 对参数做编码，避免特殊字符导致URL异常；拼接pathname避免路径错误
    window.location.href = window.location.pathname + "?group=" + encodeURIComponent(selectObject.value);
}

后端逻辑参考（以Razor Pages为例，MVC写法逻辑一致） #

// 绑定GET请求传递的group参数
[BindProperty(SupportsGet = true)]
public int? SelectedGroup { get; set; }
// 原有存储分组列表、球员列表的属性保留
public List<int> groups { get; set; }
public List<Player> playerInThatGroup { get; set; }

public void OnGet(int? group)
{
    // 把URL传递的选中值赋值给绑定属性
    SelectedGroup = group;
    // 原有查询分组列表的逻辑保留
    groups = _dbContext.Groups.Select(g => g.Id).ToList();
    
    // 根据选中值查询对应球员数据
    if (SelectedGroup.HasValue)
    {
        playerInThatGroup = _dbContext.Players.Where(p => p.GroupId == SelectedGroup.Value).ToList();
    }
    else
    {
        // 淘汰赛阶段的球员查询逻辑保留
        playerInThatGroup = _dbContext.Players.Where(p => p.IsKnockoutStage).ToList();
    }
}

注意：如果你的分组列表存储的是复杂类对象而非值类型，option的value要绑定对象的唯一标识字段（如GroupId），SelectedGroup的类型也要和该标识字段类型一致，不要直接绑定整个复杂对象，否则值类型不匹配会导致选中判断失效。

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