Angular POST request received in NET Core Api as Null

Question

Im POSTing some data via Angular 6, but my Core API keeps returning nulls:

Request:

{"id":0,"name":"test","weight":2,"frequency":2,"activityTypeModelId":3}

Response:

{id: 0, name: null, weight: 0, frequency: 0, activityTypeModelId: 0}

Controller:

[HttpPost("[action]")]
public IActionResult Add([FromForm]Model model)
{
    return new JsonResult(model);
}

Angular, using HttpClient:

add(Model: model) {
     return this.http.post(this.addUrl, model);
}

API Model:

public class Model
{
    [Key]
    public int Id { get; set; }
    [Required]
    public string Name { get; set; }
    [Required]
    public int Weight { get; set; }
    public int Frequency { get; set; }
    public int ActivityTypeModelId { get; set; }
}

TS Model:

 export class Model{
   id?: number;
   name?: string;
   weight?: number;
   frequency?: number;
   activityTypeModelId?: number;
 }

Everything works fine when I'm using Postman. I already tried with [FromBody]. Where is the problem?

Your action is returning something named newCircumstance, what is that? — R. Richards
– R. Richards, Commented Aug 30, 2018 at 18:34
What do you see in the network tab of developer console in your browser? Are you able to see request body over there? — Amit Chigadani
– Amit Chigadani, Commented Aug 30, 2018 at 18:41
When you break in the C# Action is Model populated? When you look at Browser Dev tools what is getting submitted? — Richard Hubley
– Richard Hubley, Commented Aug 30, 2018 at 18:41
@R.Richards , i forgot to change that name here after pasting. I changed it in the edit. — Fabian Koziołek
– Fabian Koziołek, Commented Aug 30, 2018 at 19:14

Fabian Koziołek · Accepted Answer · 2018-08-31 18:17:24Z

I dont know why, but this fixed my issue:

I created a header:

 const header = new HttpHeaders()
     .set('Content-type', 'application/json');

Changed the POST function by adding a header and JSON.Stringyfy the object:

 add(model: Model): Observable<Model> {
     const body = JSON.stringify(c);
     return this.http.post<Model>(this.addUrl, body, { headers: header} );
   }

Changed [FromForm] to [FromBody].

Adding JSON.stringify(model) in the parameters of the http.post was not working.

JSON that is working with the CORE Api:

{"name":"test","weight":2,"activityTypeModelId":15}

JSON that is not working with the CORE Api:

{name:"test",weight:2,activityTypeModelId:15}

Without the header I encountered a 415 error from the API.

wFitz · Accepted Answer · 2018-08-30 21:01:16Z

0

Try

return this.http.post(this.addUrl, JSON.stringify(model) );

answered Aug 30, 2018 at 21:01

wFitz

1,2989 silver badges13 bronze badges

Comments

Eliseo · Accepted Answer · 2018-08-30 22:03:34Z

0

I think that, in .NET Core 2.1 is (see https://learn.microsoft.com/en-us/aspnet/core/web-api/action-return-types?view=aspnetcore-2.1)

HttpPost("[action]")]
//see that I put [FromBody]
public IActionResult Add([FromBody]Model model)
{
    //OK is one of several IActionResult 
    return OK(model);
}

answered Aug 30, 2018 at 22:03

Eliseo

58.8k4 gold badges39 silver badges82 bronze badges

Comments

R. Salisbury · Accepted Answer · 2019-10-09 16:54:13Z

I had this issue and the problem was that I was trying to bind to an interface:

[HttpPost("[action]")]
[ProducesResponseType(typeof(bool), StatusCodes.Status200OK]
public bool SaveResponse([FromBody]ISaveRequestViewModel request) =>
    Service.SaveResponse(request.Responses);

I fixed it by changing it to a class:

[HttpPost("[action]")]
[ProducesResponseType(typeof(bool), StatusCodes.Status200OK]
public bool SaveResponse([FromBody]SaveRequestViewModel request) =>
    Service.SaveResponse(request.Responses);

This model also had to use classes instead of interfaces:

public class SaveRequestViewModel
{
    public List<IQuestionResponseViewModel> Responses { get; set; }
}

Became

public class SaveRequestViewModel
{
    public List<QuestionResponseViewModel> Responses { get; set; }
}

I guess the model binder just doesn't work with interfaces.

Collectives™ on Stack Overflow

Angular POST request received in NET Core Api as Null

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related