ASP.NET Core中FromForm提交时List<CostDTO>无法传值的问题

核心原因 #

使用[FromForm]进行模型绑定时，复杂对象列表的表单字段命名规则和JSON格式不同，必须采用索引式命名才能被ASP.NET Core正确识别并完成绑定。

具体解决步骤 #

1. 前端按正确格式构造FormData #

提交表单时，对于Costs列表中的每个CostDTO对象，需要以Costs[索引].属性名的格式添加字段。示例如下：

JavaScript构造FormData示例：

const formData = new FormData();

// 添加基础字段
formData.append('Name', '张三');
formData.append('Location', '北京市');
formData.append('PhoneNumber', '13800138000');
// 添加文件字段（如果有）
formData.append('Image', document.getElementById('imageInput').files[0]);

// 添加Costs列表
const costList = [
  { itemName: "服务费", isPercent: true, value: 8.5 },
  { itemName: "材料费", isPercent: false, value: 200 }
];

costList.forEach((cost, index) => {
  formData.append(`Costs[${index}].itemName`, cost.itemName);
  formData.append(`Costs[${index}].isPercent`, cost.isPercent.toString());
  formData.append(`Costs[${index}].value`, cost.value.toString());
});

// 发送请求
fetch('/api/xxx/info', {
  method: 'POST',
  body: formData
});

Postman测试示例：

在Body选项卡选择form-data，添加如下键值对：

• Name: 张三
• Location: 北京市
• Costs[0].itemName: 服务费
• Costs[0].isPercent: true
• Costs[0].value: 8.5
• Costs[1].itemName: 材料费
• Costs[1].isPercent: false
• Costs[1].value: 200
• （其他文件和基础字段同理添加）

2. 后端确认模型配置（无需额外修改） #

你的RegisterDTO和CostDTO定义已经满足绑定要求：

• 属性均为public且包含get/set方法
• 属性名称与前端提交的字段前缀一致（Costs对应DTO的Costs属性）

ASP.NET Core默认支持这种索引式的表单绑定，无需额外配置模型绑定器。

3. 注意值类型转换细节 #

• 布尔类型isPercent：前端需提交"true"或"false"字符串，框架会自动转换为bool值
• 浮点类型value：提交数字格式的字符串（如"8.5"）即可自动转换为float

验证绑定结果 #

在控制器方法中可以临时打印model.Costs的数量，确认是否绑定成功：

[HttpPost("info")]
public async Task<ActionResult> Register([FromForm] RegisterDTO model)
{
    // 临时验证
    Console.WriteLine($"Costs数量：{model.Costs?.Count ?? 0}");
    var result = await _serviceName.Register(model);
    return Ok(result);
}

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