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.

why is your Content-Type set to : application/x-www-form-urlencoded ? — Jose Francis
– Jose Francis, Commented Oct 8, 2018 at 9:39
try setting Content-Type to : application/json; charset=utf-8 — Jose Francis
– Jose Francis, Commented Oct 8, 2018 at 9:41
You need to make the following steps: 1) remove any sets for headers; 2) create an object just like from your server side and send it during api call from your client; 3) add attribute FromBody in your action method on server side. — Max
– Max, Commented Oct 8, 2018 at 9:51
So simple and to the point. I used that form enc type by a copy-paste mistake from the one I use for token auth. Thanks for your answer @Jose Francis. Please, write it as an answer so I can mark it as correct. — Diego Perez
– Diego Perez, Commented Oct 8, 2018 at 9:53
Thanks for your time @Max, my problem ended up being enc type for the form. it should be json. Now it's resolved. — Diego Perez
– Diego Perez, Commented Oct 8, 2018 at 9:53

Dale K · Accepted Answer · 2020-12-16 21:59:42Z

2

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

edited Dec 16, 2020 at 21:59

Dale K

28.1k15 gold badges59 silver badges85 bronze badges

answered Dec 16, 2020 at 16:40

Luis Tepepa

313 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jose Francis · Accepted Answer · 2018-10-08 09:56:50Z

0

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

answered Oct 8, 2018 at 9:56

Jose Francis

96014 silver badges29 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related