.NET Core Razor Pages 提交表单时下拉框选中值为null问题

核心问题成因 #

逐行比对前端、后端代码，可定位到3处会导致绑定失败的问题：

• 动态渲染下拉选项时，option的value属性赋值逻辑错误
• 表单属性绑定配置冗余
• 前端请求传参未做编码处理（附带兼容隐患）

具体修复步骤 #

1. 修复动态option的value拼接逻辑
   当前JS中拼接option的代码存在拼接错误：

   // 错误写法：两个引号中间没有拼接实际值，导致所有option的value都是空字符串
   $("#select").append("<option value='"  + "'>" + item.value + "</option>");
   

   浏览器提交表单时，只会取option的value值传给后端，不会提交选项的可见文本。上述写法生成的所有option的value均为空，自然无法正确绑定到后端属性。
   修改为正确的拼接逻辑，将item的实际值同时赋值给option的value和显示文本：

   $("#select").append(`<option value="${item.value}">${item.value}</option>`);
   

2. 调整后端模型绑定配置
   当前SelectedValue的绑定配置存在冗余：

   // 错误写法：SupportsGet是GET请求绑定的配置，对POST表单绑定无作用
   [BindProperty(SupportsGet = true)]
   public string SelectedValue { get; set; }
   

   由于该属性是通过POST表单提交传递的，和页面其他表单属性保持一致的配置即可：

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

3. 补全日期参数的编码逻辑
   发起getJSON请求传递日期参数时，未做URL编码处理，存在特殊字符传参失败的隐患，可在传参时用encodeURIComponent处理日期值，避免跨浏览器的格式兼容问题：

   $.getJSON(`?handler=Date&date=${encodeURIComponent(myDate)}`, (data) => {
       // 原有渲染逻辑
   });
   

快速验证方法 #

提交表单时打开浏览器开发者工具的「网络」面板，找到对应的POST请求，查看表单参数列表：

• 如果参数列表中完全没有SelectedValue键：检查<select>元素的name属性是否为SelectedValue，确认JS操作没有覆盖原有元素的name属性
• 如果参数列表中存在SelectedValue但值为空：说明option的value值未正确渲染，回到第一步检查拼接逻辑
• 如果参数列表中存在SelectedValue且值正确，但后端仍获取为null：检查是否有自定义模型绑定过滤器、全局配置意外拦截了该属性的绑定流程

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