Angular 6 post to .Net Web Api all values are being received as null

Question

I'm sending data to a .Net Web Api through an Angular 6 post request but all values are arriving to server as null. Any ideas on why?

Angular post:

var vacancy = {
  'number': this.vacancyForm.get('number').value,
  'requester': this.vacancyForm.get('requester').value,
  'date': this.vacancyForm.get('date').value,
  'position': this.vacancyForm.get('position').value,
  'replacement': this.vacancyForm.get('replacement').value,
  'discharge_date': this.vacancyForm.get('discharge_date').value,
  'candidate': this.vacancyForm.get('candidate').value,
  'contract_type': this.vacancyForm.get('contract_type').value,
  'working_day': this.vacancyForm.get('working_day').value,
  'annual_salary': this.vacancyForm.get('annual_salary').value,
  'business_division': this.vacancyForm.get('business_division').value,
  'company': this.vacancyForm.get('company').value,
  'workplace': this.vacancyForm.get('workplace').value,
  'personal_division': this.vacancyForm.get('personal_division').value,
  'department': this.vacancyForm.get('department').value,
  'cost_center': this.vacancyForm.get('cost_center').value,
  'workplace_address': this.vacancyForm.get('workplace_address').value
}
    
const headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

var postReturn = this.http.post<any>(environment.apiEndpoint + "/Api/Vacancy", JSON.stringify(vacancy), { headers })
        .subscribe(
          (val) => {
            console.log('POST call successful value returned in body',
              val);
          },
          response => {
            console.log('POST call in error', response);
          },
          () => {
            console.log('The POST observable is now completed.');
          });

.Net Post method in Controller:

[HttpPost]
public IEnumerable<string> Post(Vacancy vacancy)
{
    if (vacancy == null)
    {
        throw new System.ArgumentNullException(nameof(vacancy));
    }

    return new string[] { "I'm doing just nothing but returning a string." };
}

.Net Vacancy model class:

public class Vacancy
{
    public int number { get; set; }
    public string requester { get; set; }
    public DateTime date { get; set; }
    public string position { get; set; }
    public string replacement { get; set; }
    public DateTime discharge_date { get; set; }
    public string candidate { get; set; }
    public string contract_type { get; set; }
    public string working_day { get; set; }
    public string annual_salary { get; set; }
    public string business_division { get; set; }
    public string company { get; set; }
    public string workplace { get; set; }
    public string personal_division { get; set; }
    public string department { get; set; }
    public string cost_center { get; set; }
    public string workplace_address { get; set; }
}

I've also tried to remove JSON.stringify but same results, Vacancy object always receives null values.

Any help will be much appreciated.

Thanks.

Answer 1

I had a similar issue getting a null object when doing a POST to a .NET Core Web API even using [Frombody]. Turns out that my C# model didn't match the Angular model exactly. One of the properties was nullable on the Angular model side and was not nullable in the C# side. After I updated my model to match, it worked fine.

[HttpPost]
public IActionResult Post([FromBody] CustomerAccount customerAccount)
{
    // Code goes here
}

Then the Angular side look like this:

addCustomerAccount(customerAccount: CustomerAccount): Observable<CustomerAccount> 
{
    return this.http.post<CustomerModel>(`${environment.rootAPI}/Customer`, customerAccount)
}

Here is my C# model (After making it nullable it was able to map find)

public class CustomerAccount
{
    public long AccountNumber { get; set; }
    public bool? IsPrimaryCustomer { get; set; }     
    public Customer Customer { get; set; }
}

Answer 2

try setting Content-Type to : application/json; charset=utf-8