Blazor中提交表单时如何将下拉选项值传递给HandleSubmit方法？

核心是利用HTML表单的原生提交机制，配合ASP.NET的模型绑定来实现值传递，不需要任何JavaScript。以下是具体实现步骤和代码示例：

1. 后端准备（以ASP.NET Razor Pages为例） #

首先在页面模型中定义预设选项列表，以及用于接收选中值的属性：

public class YourPageModel : PageModel
{
    // 预设的选项集合，可从数据库/配置读取
    public List<SelectListItem> DropdownOptions { get; set; } = new List<SelectListItem>
    {
        new SelectListItem { Value = "opt1", Text = "选项A" },
        new SelectListItem { Value = "opt2", Text = "选项B" },
        new SelectListItem { Value = "opt3", Text = "选项C" }
    };

    // 绑定选中值，name需与前端select的name一致
    [BindProperty]
    public string SelectedOptValue { get; set; }

    public void OnGet()
    {
        // 初始化选项的逻辑（比如从数据库加载）
    }

    // 表单提交后的处理方法（对应你的HandleSubmit）
    public IActionResult OnPost()
    {
        // 直接使用SelectedOptValue即可，它就是提交时选中的选项值
        // 这里写你的提交逻辑：存储到数据库、验证等
        return Page();
    }
}

2. 前端表单与下拉框实现 #

在Razor视图中，通过@foreach生成下拉选项，同时给select设置正确的name属性：

<form method="post">
    <!-- 你的其他表单控件（输入框、组件等） -->
    <input type="text" name="UserInput" placeholder="输入内容" />

    <!-- 下拉选择框 -->
    <select name="SelectedOptValue" required>
        <option value="">请选择一个选项</option>
        @foreach (var opt in Model.DropdownOptions)
        {
            <!-- 自动选中之前提交过的选项（可选） -->
            <option value="@opt.Value" @(opt.Value == Model.SelectedOptValue ? "selected" : "")>
                @opt.Text
            </option>
        }
    </select>

    <!-- 提交按钮，无需额外点击事件 -->
    <button type="submit">提交表单</button>
</form>

关键注意点 #

• name属性是核心：select的name必须和后端[BindProperty]标记的属性名完全一致，这样ASP.NET才能自动将选中值绑定到该属性。
• 无需额外点击事件：你之前的test方法完全多余，表单提交时浏览器会自动收集所有表单控件（包括select）的值，传递给后端处理方法。
• 选项的value属性：务必给每个option设置value，否则提交的会是选项的文本内容（而非你需要的值）。
• 默认选中逻辑：如果需要保留用户之前的选择，在循环时判断当前选项值是否等于SelectedOptValue，添加selected属性即可。

如果是ASP.NET MVC项目，逻辑完全一致：只需将页面模型换成ViewModel，后端用[HttpPost]标记的Action接收ViewModel参数即可。

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