使用Fetch提交表单时无法传递多选复选框数组的问题排查

核心问题分析 #

出现400错误的核心原因有三点：

• 前端FormData转JSON逻辑缺陷：原代码用forEach遍历FormData时，会覆盖同名的SelectedCheckboxes[]字段值，最终仅保留最后一个选中的复选框值，而非完整数组；同时后端模型的字段名与前端提交的SelectedCheckboxes[]不匹配。
• HTML复选框命名不符合.NET绑定规则：.NET Web API默认无法自动识别带[]后缀的表单字段名。
• 后端模型字段类型不匹配：复选框是多选场景，后端用string类型无法接收数组数据。

解决方案1：修改前端代码（适配现有后端模型） #

1. 调整HTML复选框命名

将所有复选框的name从SelectedCheckboxes[]改为SelectedCheckboxes，匹配后端模型的字段名：

<input type="checkbox" name="SelectedCheckboxes" value="10%off First service visit" id="10%off First service visit">
<input type="checkbox" name="SelectedCheckboxes" value="10%off Waterwash" id="10%off Waterwash">
<input type="checkbox" name="SelectedCheckboxes" value="Free AC Inspection" id="Free AC Inspection">

2. 修复FormData转JSON的逻辑

修改遍历逻辑，收集多选字段为数组，再转成逗号分隔的字符串适配后端string类型：

document.getElementById("myForm").addEventListener("submit",submitForm);

function submitForm(event){
  event.preventDefault();
  var formData = new FormData(event.target);

  // 处理多选字段，避免值被覆盖
  var json = {};
  formData.forEach((value, key) => {
    if (json[key]) {
      // 已存在的字段转为数组
      if (!Array.isArray(json[key])) {
        json[key] = [json[key]];
      }
      json[key].push(value);
    } else {
      json[key] = value;
    }
  });

  // 将复选框数组转为逗号分隔字符串，适配后端string类型
  if (json.SelectedCheckboxes) {
    json.SelectedCheckboxes = json.SelectedCheckboxes.join(',');
  } else {
    // 未选中任何复选框时提交空字符串，避免必填校验错误
    json.SelectedCheckboxes = "";
  }

  fetch("https://localhost:7032/api/CarServiceForm/submit-form",{
    mode:"cors",
    method:"POST",
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(json)
  })
  .then(response =>{
    if(!response.ok){
      // 捕获后端返回的详细错误信息
      return response.json().then(err => { throw err; });
    }
    return response.json();
  })
  .then(data=>{
    console.log("Success:",data);
  })
  .catch(error=>{
    console.error("Error:",error);
  });
}

解决方案2：修改后端代码（适配前端原有命名） #

若不想修改前端，可调整后端模型与绑定规则：

1. 修改CarForm模型字段类型

将SelectedCheckboxes改为数组类型，支持接收多选值：

public class CarForm
{
    public int Id { get; set; }
    public string CarModel { get; set; }
    public string CarNumber { get; set; }
    public string ContactNumber { get; set; }
    public string TypeOfService { get; set; }
    public string[] SelectedCheckboxes { get; set; } // 改为数组类型
    public string SelectState { get; set; }
    public string SelectCity { get; set; }
    public IList<Selection> ?Selections { get; set; }
}

2. 适配前端SelectedCheckboxes[]命名（可选）

若前端保留[]后缀的命名，需在API方法中配置绑定，或添加自定义序列化规则：

[HttpPost("submit-form")]
public IActionResult SubmitForm([FromBody] CarForm model)
{
    // 业务处理逻辑
    return Ok(model);
}

同时在Program.cs中配置JSON序列化支持大小写不敏感：

builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;
    });

额外修复点 #

HTML下拉框存在标签闭合错误，需修正：

<option value="option4">Mumbai</option>
<option value="option4">Pune</option>

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