前端POST多自定义对象数组JSON后，C#后端如何正确反序列化？

我发起了一个POST请求，其中包含多个经JSON.stringify()序列化的对象数组，但在API接口中拦截Payload时，无法正确反序列化提取数组。以下是简化代码：

TypeScript端：PersonData模型与POST请求代码 #

export class PersonData {
    name: string;
    age: number;
}

sendPersonData() {
    const url = "http://localhost:5001/check-person-data";

    let pd1 = new PersonData();
    pd1.name = "Person1";
    pd1.age = 1;

    let pd2 = new PersonData();
    pd2.name = "Person2";
    pd2.age = 2;

    let pd3 = new PersonData();
    pd3.name = "Person3";
    pd3.age = 3;

    let pd4 = new PersonData();
    pd4.name = "Person4";
    pd4.age = 4;

    var array1: PersonData[] = [pd1, pd2];
    var array2: PersonData[] = [pd3, pd4];

    let dictionary = {};
    dictionary["Array1"] = array1;
    dictionary["Array2"] = array2;

    return this._http.post(url, JSON.stringify(dictionary), this.opts);
}

C#端：PersonData类与API端点代码 #

public class PersonData
{
    string name;
    int age;
}

[HttpPost("/check-person-data")]
public IActionResult CheckPersonData([FromBody] dynamic data)
{
    // 需要提取payload中的各个数组

    // 以下两行均报错
    var person1 = (PersonData[])data.Array1;
    var person2 = data.Array2 as PersonData[];

    return null;
}

报错信息 #

'System.Text.Json.JsonElement' does not contain a definition for 'Array1'
'System.Text.Json.JsonElement' does not contain a definition for 'Array2'

收到的Payload内容 #

"{\"Array1\":[{\"name\":\"Person1\",\"age\":1},{\"name\":\"Person2\",\"age\":2}],
  \"Array2\":[{\"name\":\"Person3\",\"age\":3},{\"name\":\"Person4\",\"age\":4}]}"

解决方案 #

已解决该问题，需做以下调整：

1. 将C#的PersonData类字段改为public，确保序列化/反序列化能访问到字段：

   public class PersonData
   {
       public string name { get; set; }
       public int age { get; set; }
   }
   

2. 从dynamic对象中提取数组并转换为List<PersonData>：

   [HttpPost("/check-person-data")]
   public IActionResult CheckPersonData([FromBody] dynamic data)
   {
       // 提取JsonElement并转换为List<PersonData>
       var arr1 = data.Array1;
       List<PersonData> array1 = (List<PersonData>)arr1.ToObject(typeof(List<PersonData>));
       
       var arr2 = data.Array2;
       List<PersonData> array2 = (List<PersonData>)arr2.ToObject(typeof(List<PersonData>));
   
       // 后续逻辑处理
       return Ok();
   }
   

关于请求数据结构的最佳实践 #

直接用dictionary包裹数组再序列化的方式并非最优解，更推荐的做法是：

• 在C#端创建对应的数据传输对象（DTO），与请求的JSON结构完全匹配，避免使用dynamic：

  public class PersonDataRequest
  {
      public List<PersonData> Array1 { get; set; }
      public List<PersonData> Array2 { get; set; }
  }
  

• API端点直接接收该DTO类型，自动完成反序列化，类型更安全且代码更清晰：

  [HttpPost("/check-person-data")]
  public IActionResult CheckPersonData([FromBody] PersonDataRequest request)
  {
      // 直接使用request.Array1和request.Array2即可
      return Ok();
  }
  

• TypeScript端也可以定义对应的接口，保持前后端数据结构一致：

  interface PersonDataRequest {
      Array1: PersonData[];
      Array2: PersonData[];
  }
  
  // 构造请求数据时直接使用该接口
  const requestData: PersonDataRequest = {
      Array1: array1,
      Array2: array2
  };
  
  return this._http.post(url, requestData, this.opts);
  

  （注：Angular的HttpClient会自动序列化请求体，无需手动调用JSON.stringify()）

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