nested json data Post method from front end don’t hit back end post method

[{"Id":0,"BuyerId":2,"ExpressList":[{"ExpressId":2,"FOBSHANGHAI1":"1"}]}]

This data comes from front end. In ‘ExpressList’ there might be multiple data.
My back end view mode is

public class TafettaExpressViewModel
    {
        public int Id { get; set; }
        public int BuyerId { get; set; }
        public List<ExpressViewDetails> ExpressList { get; set; }
    }
 public class ExpressViewDetails
    {
        public int ExpressId{ get; set; }
        public string FOBSHANGHAI1{ get; set; }
    }

Controller

[HttpPost]
public async Task<ActionResult<TafettaExpressViewModel>> PostTafetta(List<TafettaExpressViewModel> data)
        {
            return data.FirstOrDefault();
        }

Front End
component.ts

onSubmit() {
    var data = Object.assign({}, ...this.dataShow); //Data that I wants to send
    this.insertRecord(data)
  }
insertRecord(data) {
this.service.postTafetta(data).subscribe(
  res => {
         console.log(res);
        })}

service.ts

postTafetta(data){
  return this.http.post(this.rootURL+'/Tafetta', data);
}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

[{"Id":0,"BuyerId":2,"ExpressList":[{"ExpressId":2,"FOBSHANGHAI1":"1"}]}]

Based on your testing data that is an array, you can try to modify the backend code like below to receive and process it.

[HttpPost]
public async Task<ActionResult<TafettaExpressViewModel>> PostTafetta([FromBody]List<TafettaExpressViewModel> data)
{
    return data.FirstOrDefault(); // to see the api hits or not
}

ViewModel classes

public class TafettaExpressViewModel
{
    public int Id { get; set; }
    public int BuyerId { get; set; }
    public List<ExpressViewDetails> ExpressList { get; set; }
}

public class ExpressViewDetails
{
    public int ExpressId { get; set; }
    public string FOBSHANGHAI1 { get; set; }
}

Test Result

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0