Angular + Asp Core 2 http Post data is always null

Question

I'm struggling with this problem for a long time.

I have a Client app set with Angular 6 and WebApi created with ASP Core 2.1.

For my POST request, I do something like this.

const params = {
  TestData: newActions,
  ExportAndExecute: true
};

this.httpClient.post('/tests/export', params, {headers: {}}).subscribe((result) => {
  console.log(result);
});

where httpClient.post method is :

post(route: string, params: any, headers: object) {
return new Observable<any>(subscriber => {
  this.httpClient.post<any>(this.baseUrl + route, params, headers).subscribe((result) => {
    subscriber.next(result);
  }, (error: Response) => {
    this.handleRequestError(error);
  });
});

}

My API controller action looks like this:

[HttpPost]
[Route("/api/[controller]/export")]
[Authorize(AuthenticationSchemes = "JwtBearer")]
public async Task<HttpStatusCode> ExportTest( [FromBody] ExportTestModel model)
{
    var result = HttpStatusCode.MisdirectedRequest; 
}

And model class is:

public class ExportTestModel
{
    public List<BsonDocument> TestData { get; set; }
    public bool ExportAndExecute { get; set; }
}

I don't know why every time I send the data from a client, it is null in the controller action. I tried to send it as a stringified object, receive in controller as object or JObject but nothing works as expected.

I can add that if I receive data as JObject I can see it properly but I don't want to do it this way.

I feel stupid but maybe someone can point me what I'm doing wrong in my approach.

J.P. · Accepted Answer · 2018-07-04 12:22:42Z

Looking at your example code, my mind jumps to two options:

Wrong headers. Because you're explicitly setting an empty headers object as the third parameter, it might be that this causes Angular to not add a default HTTP header for the content-type you're sending across (application/json). If you don't tell ASP.NET Core what kind of data your sending, then ASP.NET Core doesn't care about it and doesn't apply model binding. The fix for this one is really easy, simply remove that third parameter in your this.httpClient.post() call.
```
this.httpClient.post('/tests/export', params).subscribe(result => {
  console.log(result);
});
```
You can verify that this header it set by checking the network traffic in your web developer toolbar.
Case-sensitivity. In JavaScript (and thus JSON), camel-casing is the standard. Your params object has a TestData and an ExportAndExecute, both pascal-cased. It could be that the model binder is sensitive for case.

wFitz · Accepted Answer · 2018-07-04 13:06:52Z

This works for me using Angular 6 HttpClient and Asp.Net Core 2.0 or 2.1

In your controller :

const params = {
  TestData: newActions,
  ExportAndExecute: true
};

this.dataService.postData(params).subscribe( 
    data => {
       console.log('post OK !');
    },
    error => {
       console.log('post error !');
    }
);

In your service :

  constructor( private http: HttpClient ) {}

  const headers = new HttpHeaders()
     .set('Content-Type', 'application/json')
     .set('Accept', 'application/json')

  const url = 'http://localhost:5000/api/'  

  postData( params ) {
     return this.http.post(
        url + 'grupos',
        JSON.stringify(params),
        { headers: headers }
     );        
  }

Collectives™ on Stack Overflow

Angular + Asp Core 2 http Post data is always 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