ASP.NET Core Razor下拉框选中值无法传递及表单提交问题

一、解决下拉框选中值绑定为null的问题 #

针对绑定失败的问题，从以下几个关键点修复：

1. 确保下拉选项列表正确初始化
   你的OnGetAsync仅调用了GetWorkspaces，但未填充Reports选项数据。需要在OnGetAsync或对应方法中给Reports赋值，示例如下：

   public async Task OnGetAsync()
   {
       await GetWorkspaces();
       // 替换为你的实际报表获取逻辑
       Reports = new List<SelectListItem>
       {
           new SelectListItem { Value = "report_01", Text = "月度销售报表" },
           new SelectListItem { Value = "report_02", Text = "季度库存报表" }
       };
   }
   

   注：Reports的set为private，但在当前类的方法内可正常赋值，不影响使用。

2. 验证模型绑定的核心标识
   asp-for="@Model.selectedReport"会自动生成name="selectedReport"属性，这是模型绑定的关键。页面渲染后查看HTML源码，确认select标签的name属性为selectedReport，若缺失则检查拼写（Razor模型绑定默认区分大小写）。

3. 排查ModelState错误
   在OnPostAsync中添加错误排查逻辑，快速定位绑定失败原因：

   public async Task<IActionResult> OnPostAsync()
   {
       if (!ModelState.IsValid)
       {
           // 可将错误输出到日志或临时变量查看
           var errors = ModelState.Values.SelectMany(v => v.Errors.Select(e => e.ErrorMessage));
           return Page();
       }
   
       // 后续业务逻辑...
   }
   

二、实现选中选项时自动提交表单 #

给select标签添加onchange事件，触发表单提交即可，两种简洁写法任选：

写法一（通过表单ID引用） #

<td>
    <form method="post" id="reportForm">
        <select asp-for="@Model.selectedReport" asp-items="@Model.Reports" class="form-control" onchange="document.getElementById('reportForm').submit();">
        </select>
    </form>
</td>

写法二（直接引用当前表单） #

<td>
    <form method="post">
        <select asp-for="@Model.selectedReport" asp-items="@Model.Reports" class="form-control" onchange="this.form.submit();">
        </select>
    </form>
</td>

完整修正后代码示例 #

后台PageModel代码 #

public class SubscribedReportsModel : PageModel
{
    [BindProperty] 
    public List<SelectListItem> Workspaces { get; private set; }

    [BindProperty] 
    public List<SelectListItem> Reports { get; private set; }

    [BindProperty] 
    public string selectedReport { get; set; }

    public async Task OnGetAsync()
    {
        await GetWorkspaces();
        Reports = await GetReportList();
    }

    private async Task GetWorkspaces()
    {
        // 你的原有工作区初始化逻辑
        Workspaces = new List<SelectListItem>();
        // ...
    }

    private async Task<List<SelectListItem>> GetReportList()
    {
        // 替换为从数据库/接口获取报表的实际逻辑
        return new List<SelectListItem>
        {
            new SelectListItem { Value = "sales_month", Text = "月度销售报表" },
            new SelectListItem { Value = "stock_quarter", Text = "季度库存报表" }
        };
    }

    public async Task<IActionResult> OnPostAsync()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }

        if (selectedReport != null)
        {
            // 选中值已绑定，执行对应业务逻辑
            return Page();
        }

        return RedirectToPage("./Index");
    }
}

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