ASP.NET Core Razor Pages：如何将多选列表框改为单选下拉框？

在ASP.NET Core 7 Razor Pages项目中使用Tag Helper生成表单时，创建了SelectList希望渲染单选择下拉框，但实际得到的是多选框，问题出在绑定逻辑上。

错误原因 #

asp-for绑定的是SelectList类型的属性，Tag Helper会识别该类型为集合，自动渲染成多选框。正确的做法是：用单个值类型属性存储选中的选项ID，SelectList仅作为下拉框的选项数据源。

修正方案 #

1. 修改页面后台代码 #

添加单个值类型的属性用于接收选中值，保留ExistingSections作为选项列表：

public class ManageSectionModel : PageModel
{
    private readonly ISectionHelper _sectionHelper;

    public ManageSectionModel(ISectionHelper sectionHelper)
    {
        _sectionHelper = sectionHelper;
    }

    // 存储选中的选项ID（单个值，需绑定表单）
    [BindProperty]
    public int SelectedSectionId { get; set; }

    // 下拉框的选项数据源
    public SelectList ExistingSections { get; private set; }

    public async Task<IActionResult> OnGetAsync()
    {
        var sections = await _sectionHelper.GetSectionList();
        ExistingSections = new SelectList(sections, "ID", "Name");
        return Page();
    }
}

• [BindProperty]用于Post请求时接收表单提交的选中值，仅做Get展示可省略，但建议加上保证表单提交正常。

2. 修改前端渲染代码 #

将asp-for绑定到单个值属性，asp-items仍使用ExistingSections提供选项：

<select asp-for="SelectedSectionId" asp-items="Model.ExistingSections">
    <option value="0">Add New Section</option>
</select>

这样修改后，Tag Helper会自动渲染出单选择的下拉框，而非多选框。

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