Angular 6向Web API Post传参为null问题求助

我来帮你排查这个头疼的问题——API能触发但接收对象为null，这种情况绝大多数是模型绑定失败导致的，结合你的代码来看，主要有几个关键调整点：

1. 给Web API参数添加[FromBody]特性 #

ASP.NET Web API默认的模型绑定规则里，对于POST请求，复杂类型（比如你的User类）需要显式指定从请求体读取数据。你现在的API方法没有加这个特性，框架不知道从哪里去获取User对象的数据，所以才会返回null。

修改后的Web API代码：

[AllowAnonymous]
[HttpPost]
//[ValidateAntiForgeryToken]
public void Register([FromBody] User body)
{
}

2. 修复Angular端的map操作错误 #

看你的Angular服务代码里，map(x => x.json)这里少了括号，应该是调用json()方法，虽然这个问题不会直接导致API接收null，但会让你后续处理响应数据时出错，顺手修复一下：

修改后的Angular服务代码片段：

return this.http.post('http://localhost:54516/Account/Register', body, requestOptions)
  .map(x => x.json()); // 这里要加上括号，调用json方法

3. 确认User模型属性名完全匹配 #

JSON序列化默认是大小写敏感的，一定要确保Angular端的User模型和Web API端的User类属性名完全一致（包括大小写）。比如你的Angularuser.model.ts应该是这样的：

export class User {
  Email: string;
  PhoneNumber: string;
  Password: string;
  ConfirmPassword: string;
}

如果Angular里习惯用小驼峰命名（比如email），可以在Web API的User类属性上添加[JsonProperty]特性来映射：

public class User {
  [JsonProperty("email")]
  public string Email { get; set; }
  // 其他属性同理
}

先试试添加[FromBody]这个最关键的调整，基本就能解决接收null的问题了，如果还有问题再检查属性名匹配情况。

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