如何将 JSON 数据从 Angular Json Editor 发送到 .net core webapi 控制器？答案

【问题标题】：How do I send JSON data from angular Json Editor to .net core webapi controller?如何将 JSON 数据从 Angular Json Editor 发送到 .net core webapi 控制器？
【发布时间】：2020-10-08 10:26:48
【问题描述】：

我有一个带有 Angular JSON 编辑器的 Angular 客户端。我必须将 JSON 数据（从编辑器）发送到 .NET Core Web API 控制器，并且我必须在那里执行诸如将其写入 JSON 文件之类的任务。我该如何处理？我需要控制器方面的帮助和更多信息。

【问题讨论】：

你应该添加你已经拥有的相关代码（在角度和你的控制器中）

标签： json angular asp.net-web-api asp.net-core-webapi

【解决方案1】：

我必须将 JSON 数据（从编辑器）发送到 .NET Core Web API 控制器，然后我必须在那里执行诸如将其写入 JSON 文件之类的任务。我该如何处理？

要实现上述要求，可以参考下面的代码sn-p。

Angular 客户端

@ViewChild(JsonEditorComponent) editor: JsonEditorComponent;

options = new JsonEditorOptions();
data = {
  name: "fei",
  age: 28
};

constructor(private httpClient: HttpClient) {
  this.options.mode = "code";
  this.options.modes = ["code", "text", "tree", "view"];
  this.options.schema = schema;
  this.options.statusBar = false;
  this.options.onChange = () => console.log(this.editor.get());
}

InsertUser() {
  const updatedJson = this.editor.get();
  const headers = new HttpHeaders().set("Content-Type", "application/json");

  this.httpClient
    .post("https://xxxxx/Insert", JSON.stringify(updatedJson), {
      headers: headers,
      responseType: "text"
    })
    .subscribe(data => {
      console.log(data);
    });
}

控制器和动作

[HttpPost("/Insert")]
public async Task<IActionResult> InsertUser(User User)
{
    //...

    return Ok("success");
}

模型类User

public class User
{
    public string Name { get; set; }
    public int Age { get; set; }
}

测试结果

【讨论】：

您好，韩飞，非常感谢您的帮助。只是一个后续问题，这里我们有一个已经定义的模型。如果我们必须发送一个随机 JSON 文件怎么办。在这种情况下，控制器动作会是什么样子。在这里，您已经定义了 User 模型。这样控制器就可以接受任何 JSON 数据。