如何将带有 Angular 表单数据的对象列表发布到 .Net Core Web API答案

【问题标题】：How to POST list of object with Angular form-data to .Net Core Web API如何将带有 Angular 表单数据的对象列表发布到 .Net Core Web API
【发布时间】：2020-08-14 09:03:03
【问题描述】：

我想从 Angular 9 应用程序向 .Net 核心 Web API 发布对象列表，这里我使用表单数据，因为我需要发布带有数据的图像，这对我有用，但现在是对象属性列表添加到我的视图模型中。这是我的代码示例：

// ViewModel
public class ViewModel
{
    public string Name { get; set; }
    public IFormFile Image { get; set; }
    public List<Connect> Connects { get; set; }
}

public class Connect
{
    public string Name { get; set; }
    public string Link { get; set; }
}
// .Net Core Action
[HttpPost]
public async Task<IActionResult> Post([FromForm] ViewModel vm)
{
}

// Angular component.ts
onSubmit() {
   const formData = new FormData();
   formData.append('name', this.model.name);
   formData.append('image', this.form.get('image').value);
   // Want add a list of object here to post with this
   formData.append('connects', this.model.connects);
}

【问题讨论】：

标签： angular .net-core

【解决方案1】：

// Angular component.ts
  onSubmit() {
    const formData = new FormData();
    formData.append('name', this.model.name);
    for (let i = 0; i < this.model.connects.length; i++) {
      if (this.model.connects[i].name !== '' && this.model.connects[i].link !== '') {
        formData.append('connects[' + i + '][name]', this.model.connects[i].name);
        formData.append('connects[' + i + '][link]', this.model.connects[i].link);
      }
    }
    // Rest of the code
  }

【讨论】：

【解决方案2】：

像例子

为了让ASP.NET核心模型绑定器绑定一个数组，您需要多次添加具有相同参数名称的数组值

例如：-

let formData: FormData = new FormData();
formData.append("name", "name");
for(let i = 0; i < Ids.length; i++) {
    formData.append("Ids", Ids[i]);
}

【讨论】：