Angular向.NET Framework API提交的值始终为null问题求助

你的核心问题在于前端发送的JSON对象和后端接收的参数类型不匹配，导致ASP.NET Core无法正确完成模型绑定，所以value一直是null。下面分两种方案帮你解决：

方案一：后端使用强类型模型接收（推荐） #

直接让后端接收和前端IRezept结构对应的C#类，这是REST API开发的标准做法，更易维护且不易出错。

步骤1：创建C#模型类 #

先定义和前端IRezept、Medikamente对应的模型，注意属性名可以和前端保持驼峰/帕斯卡的自动映射（ASP.NET Core默认支持），或者用特性显式指定：

// 药品模型，根据你前端Medikamente的结构补充属性
public class MedikamentModel
{
    public string Name { get; set; }
    // 其他如剂量、数量等属性请根据实际情况添加
}

// 处方模型，对应前端IRezept
public class RezeptModel
{
    public string Kunde { get; set; }
    public string Krankenkasse { get; set; }
    public string Arzt { get; set; }
    public bool IsGebFrei { get; set; }
    public bool IsGebPfl { get; set; }
    public bool IsNoctu { get; set; }
    public bool IsSonstige { get; set; }
    public bool IsUnfall { get; set; }
    public bool IsArbeitsunfall { get; set; }
    public DateTime Ausstelldatum { get; set; }
    public DateTime? Unfalldatum { get; set; } // 允许为空的日期用可空类型
    public string Arbeitgeber { get; set; }
    public MedikamentModel Medikament1 { get; set; }
    public MedikamentModel Medikament2 { get; set; }
    public MedikamentModel Medikament3 { get; set; }
    public string Title { get; set; }
}

步骤2：修改后端POST接口 #

把参数改成刚才定义的RezeptModel，ASP.NET Core会自动将前端的JSON对象反序列化为该实例：

[HttpPost]
public string Post([FromBody] RezeptModel rezept)
{
    if (rezept != null)
    {
        // 这里可以直接操作rezept对象，比如保存到数据库
        return "yay";
    }
    return "damned";
}

步骤3：前端代码无需修改 #

你当前发送irezept对象的代码完全可以直接用，ASP.NET Core会自动处理JSON的大小写映射（前端kunde对应后端Kunde）。

方案二：前端发送JSON字符串（仅特殊场景使用） #

如果你坚持让后端接收string类型，需要把前端的对象序列化为JSON字符串再发送：

sendRezept(rezept:Rezept) {
  let medikamente = rezept.combineMedikamente();
  let meds:any[] = [];
  for (let i = 0; i<medikamente.length; i++){
    if (medikamente[i].name == '')
      meds[i] = null;
    else
      meds[i] = medikamente[i]
  }
  let irezept:IRezept = {
    kunde:rezept.kunde,
    krankenkasse:rezept.krankenkasse,
    arzt:rezept.arzt,
    isGebFrei:rezept.isGebFrei,
    isGebPfl:rezept.isGebPfl,
    isNoctu:rezept.isNoctu,
    isSonstige:rezept.isSonstige,
    isUnfall:rezept.isUnfall,
    isArbeitsunfall:rezept.isArbeitsunfall,
    ausstelldatum:rezept.ausstelldatum,
    unfalldatum:rezept.unfalldatum,
    arbeitgeber:rezept.arbeitgeber,
    medikament1:meds[0],
    medikament2:meds[1],
    medikament3:meds[2],
    title:rezept.title
  };
  // 将对象序列化为JSON字符串
  const jsonString = JSON.stringify(irezept);
  // 发送字符串，保持Content-Type为application/json
  return this.http.post<string>(this.rUrl, jsonString, {headers:this.postHeader});
}

此时后端的[FromBody] string value就能接收到完整的JSON字符串，你可以在后端再反序列化为对象使用。

额外排查点 #

1. 打开浏览器开发者工具的Network标签，确认请求的Content-Type确实是application/json
2. 检查请求体的内容是否符合预期，确保前端没有发送空值或格式错误的JSON
3. 如果使用强类型模型，注意日期类型的格式（前端需发送ISO格式字符串，比如2024-05-20T12:00:00）

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