Angular前端数组对象无法绑定到ASP.NET Core后端List问题

核心原因 #

ASP.NET Core的表单模型绑定对数组/集合的格式有严格要求，直接append整个数组或用prepTimes[]这类格式无法正确映射到List<PrepTime>，必须按照索引+属性名的键值对格式提交数据。

解决步骤 #

1. 确认后端模型结构 #

先确保你的实体类和接收模型的属性定义正确，示例如下：

// PrepTime实体类
public class PrepTime
{
    public string Description { get; set; }
    public int DurationMinutes { get; set; }
    // 其他需要绑定的属性
}

// 接收请求的视图模型
public class RecipeCreateModel
{
    // 其他正常绑定的属性（如RecipeName、Category等）
    public List<PrepTime> PrepTimes { get; set; }
}

2. 修正前端FormData构建逻辑 #

遍历前端的recipePrepTime数组，为每个元素的属性生成带索引的键名，逐个追加到FormData中：

const form = new FormData();

// 先追加其他正常绑定的字段
form.append("RecipeName", this.recipeForm.value.recipeName);
// ...其他字段按原有逻辑追加

// 处理PrepTimes数组
this.recipeForm.value.recipePrepTime.forEach((prepItem, index) => {
    form.append(`PrepTimes[${index}].Description`, prepItem.description);
    form.append(`PrepTimes[${index}].DurationMinutes`, prepItem.durationMinutes);
    // 数组内对象的每个属性都要单独追加，键名格式固定为：集合名[索引].属性名
});

3. 控制器添加[FromForm]特性 #

确保接收参数标记[FromForm]，明确告知框架从表单数据中绑定模型：

[HttpPost]
public IActionResult SaveRecipe([FromForm] RecipeCreateModel model)
{
    // 此时model.PrepTimes应能正确获取前端提交的数组数据
    return Ok();
}

常见错误排查 #

• 禁止用JSON.stringify处理整个数组后追加，这种方式提交的是JSON字符串，后端List<PrepTime>无法直接反序列化。
• 键名的集合名要和后端模型的属性名完全一致（比如后端是PrepTimes，前端不要写成prepTimes，虽框架大小写不敏感，但严格一致能避免意外问题）。
• 确认前端数组对象的属性名和后端实体类属性名对应（前端durationMinutes对应后端DurationMinutes，框架会自动处理驼峰与帕斯卡命名的映射）。

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