Angular 5 HttpClient提交List至Web Api始终为null？技术求助

嘿，我来帮你解决这个头疼的模型绑定问题！经常碰到.NET Core和Angular交互时的这类坑，咱们一步步来排查修复：

1. 先盯紧前端请求的内容格式 #

.NET Core的[FromBody]只认JSON格式的请求体，而且必须确保请求头里的Content-Type是application/json。很多时候问题就出在这儿：

• Angular 5里用HttpClient的话，默认会自动把对象序列化为JSON，也会自动设置Content-Type，但如果你手动改了请求头或者用了旧的Http模块，就得手动配置。给你个正确的请求示例：

  import { HttpClient, HttpHeaders } from '@angular/common/http';
  
  // 组件里注入HttpClient后调用
  const postData: DemoPostViewModel = {
    // 这里对应你的模型属性，注意大小写要和后端匹配（或者开后端的大小写不敏感）
    demoPostModel: {
      property1: '测试值',
      property2: 666
    }
  };
  
  // 可选：如果需要手动设置headers（其实HttpClient默认会加）
  const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
  
  this.http.post('/demopost1', postData, { headers })
    .subscribe(res => console.log(res));
  

• 用浏览器开发者工具或者Postman抓包，确认请求体是合法的JSON，没有语法错误（比如多余逗号、引号不匹配）。

2. 检查后端模型的“基本素质” #

模型绑定失败很多时候是模型本身的问题：

• 必须有无参数构造函数：.NET Core的模型绑定器需要用无参构造函数来实例化对象，如果你的DemoPostViewModel或者DemoPostModel只有带参数的构造函数，直接就会绑定为null。赶紧加个无参构造：

  public class DemoPostViewModel
  {
      public DemoPostModel DemoPostModel { get; set; }
  
      // 一定要加这个无参构造！
      public DemoPostViewModel() {}
  }
  

• 属性名要匹配（或开大小写不敏感）：默认.NET Core是大小写敏感的，如果前端传的是小驼峰（比如demoPostModel），后端模型是大驼峰（DemoPostModel），就会绑定失败。两种解决办法：
  • 要么前端改成和后端一致的大驼峰；
  • 要么在后端配置JSON序列化时开启大小写不敏感：

    // Startup.cs里的ConfigureServices方法
    services.AddControllers()
            .AddJsonOptions(options => {
                options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;
            });
    

• 属性必须是public的：别把模型的属性写成private或者protected，绑定器访问不到就会赋值失败。

3. 确认.NET Core的配置没毛病 #

确保你的Startup.cs里正确配置了MVC/Web API的JSON支持：

• 如果是.NET Core 3.0+，用AddControllers()：

  public void ConfigureServices(IServiceCollection services)
  {
      services.AddControllers()
              .AddJsonOptions(opt => {
                  // 这里可以加其他序列化配置，比如忽略循环引用
                  opt.JsonSerializerOptions.PropertyNameCaseInsensitive = true;
              });
  }
  

• 如果是更旧的版本（比如2.x），用AddMvc()代替AddControllers()，同样要确保JSON格式化已经启用。

4. 额外注意：[FromBody]的规则 #

.NET Core里一个Action只能有一个[FromBody]参数，因为请求体只能被读取一次。你的代码里只有一个payload参数，这点没问题，但如果以后加参数的话要注意，别给多个参数加[FromBody]。

按照上面的步骤排查，基本就能解决模型绑定为null的问题啦！

内容的提问来源于stack exchange，提问作者Tech with Thiru