如何将 object 列表与 Angular 表单数据发布到.Net Core Web ZDB974238714831DE634ZA7CED1

Question

I want to post a list of object to.Net core web API from angular 9 application, Here i am using form-data because i need to post image with data and this is working for me but now a list of object property added to my view model. Here is my code example:

// 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

Like Example

In order to allow ASP.NET Core model binder to bind an array you need to add array values multiple times with the same parameter name

For Eg:-

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