Angular 14 POST传复杂参数至ASP.NET Core 6时参数为null问题

核心问题原因 #

你的控制器路由配置错误：[HttpPost("{dto}")]中的{dto}是URL路径参数占位符，但Angular是将参数放在请求体（Body）中发送的，两者不匹配，导致ASP.NET Core无法正确绑定参数，最终dto始终为null。

修复步骤 #

1. 修正ASP.NET Core控制器代码 #

首先调整路由和参数绑定配置：

// 确保控制器标记了[ApiController]，这是API控制器的核心特性
[ApiController]
[Route("Projects")] // 控制器级路由，对应Angular请求的baseUrl + 'Projects'部分
public class ProjectsController : ControllerBase
{
    // Action级路由，组合后完整路径为 Projects/CreateProject
    [Route("CreateProject")]
    [HttpPost] // 这里不要加"{dto}"，因为参数不在URL路径中
    public ActionResult<ProjectAPIDto> CreateProject([FromBody] ProjectAPICreateInitDto dto)
    {
        var x = dto;
        // 你的业务逻辑代码
        return Ok(x);
    }
}

• 关于[FromBody]：如果控制器标记了[ApiController]，复杂类型参数会自动从请求体绑定，但显式添加[FromBody]更清晰，避免歧义。

2. 保留Angular请求代码不变 #

Angular的http.post默认会将第二个参数序列化为JSON，并自动设置Content-Type: application/json，这完全符合ASP.NET Core的期望，不需要额外修改：

this.http.post<ProjectDto>(baseUrl + 'Projects/CreateProject', this.projectCreateInitDto).subscribe({
    next: (res) => {
        // 处理成功响应
    },
    error: (err) => {
        // 处理错误
    }
});

你的疑问解答 #

1. HttpPost特性中是否需要{dto}？ #

不需要。{dto}这类占位符仅用于URL路径参数，比如你需要从URL中获取ID（如/Projects/Delete/123）时才会使用。POST请求的业务参数（尤其是复杂对象）应放在请求体中，因此HttpPost特性不需要添加该占位符。

2. Route特性的参数用法及适用场景 #

• 添加参数的方式：在Route模板中使用{参数名}的格式，还可以添加约束（比如:int限制参数为整数），示例：

  // 控制器级路由，所有Action都携带projectId路径参数
  [Route("Projects/{projectId:int}")]
  // Action级路由，仅该Action携带taskId参数
  [Route("Tasks/{taskId:guid}")]
  

• 适用场景：
  • 从URL路径中获取资源标识（如获取某个项目的详情：/Projects/1）；
  • 自定义API路由结构，符合REST规范（如/api/Projects/1/Tasks）；
  • 区分同一控制器下的多个Action，避免路由冲突。

为何之前的尝试失败？ #

1. 仅添加[FromBody]但未修改路由：[HttpPost("{dto}")]要求URL必须包含dto路径段，而你的Angular请求URL是Projects/CreateProject，没有该段，导致请求匹配失败，或尝试从路径绑定参数（路径中无值），最终dto为null。
2. 转为JSON字符串传递：手动转字符串如果未正确设置请求头，或控制器参数绑定方式不匹配，会导致绑定失败。正确做法是依赖Angular自动序列化，无需手动处理。

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