Как отправить список объектов с Angular данными формы в. Net Core Web API

Question

Я хочу опубликовать список объектов в Net основном веб-API из приложения angular 9. Здесь я использую данные формы, потому что мне нужно опубликовать изображение с данными, и это работает для меня, но теперь список свойств объекта добавлен в мою модель просмотра. Вот мой пример кода:

// 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);
}

Answer 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
  }

Answer 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]);
}