FormData传递整数数组至ASP.NET API时后端接收为空的问题

问题原因 #

你当前的写法是把整数数组转成JSON字符串后存入FormData的单个字段，但ASP.NET的模型绑定对于int[]类型，默认只会解析同字段名的多个值（比如genreFilters=1&genreFilters=2），而不是单个JSON格式的字符串，所以后端接收到的数组始终为空。另外你之前尝试修改content-type为application/json但没调整请求体结构，FormData和JSON请求格式不兼容，所以也没用。

解决方案 #

方案1：按表单数组规范提交（推荐） #

直接向FormData中添加多个同名字段，ASP.NET会自动把这些值解析成数组：

// 去掉之前的genres数组，直接循环添加到FormData
document.querySelectorAll("input[name=\"genre\"]:checked").forEach((e) => {
  formData.append("GenreFilters", e.value); // 字段名和后端属性名一致，ASP.NET绑定不区分大小写，但统一更稳妥
});

后端代码无需修改，int[] GenreFilters会自动绑定选中的所有值。

方案2：后端手动解析JSON字符串（不推荐，不符合表单规范） #

如果一定要提交JSON格式的字符串，需要修改后端模型，先接收字符串再反序列化为数组：

public record GetAllBooksQuery : IRequest<GetAllBooksQueryResponse>
{
    // 其他属性不变
    public string GenreFilters { get; set; } = "[]"; // 改成string类型
}

// 在控制器或处理逻辑中解析
var genreArray = JsonSerializer.Deserialize<int[]>(query.GenreFilters) ?? Array.Empty<int>();

方案3：改用纯JSON请求（适合无文件上传的场景） #

如果你的请求不需要上传文件，直接用JSON格式提交更简洁：

前端代码

// 构造完整的请求体对象
const requestBody = {
  Page: 1, // 替换成你的实际分页参数
  CountPerPage: 30,
  YearFrom: 0,
  YearTo: 2024,
  Order: "Title",
  Direction: "Ascending",
  GenreFilters: genres // 直接传入整数数组
};

fetch("/list", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(requestBody)
});

后端代码

需要给参数添加[FromBody]特性，告诉ASP.NET从请求体的JSON中绑定模型：

[Route("/list")]
public async Task<IActionResult> BookList([FromBody] GetAllBooksQuery query)
{
    var response = await _mediator.Send(query);
    return Ok(_mapper.Map<GetAllBookResponse>(response));
}

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