web-api POST body object always null when sending data from angular [duplicate]

Question

I have a .Net Core 2.2 Web api that is listening to an angular front end. I send JSON data to the backend from an angular service, I check the data both in the chrome dev tools and fiddler, so I have a good idea what is being sent. The endpoint is being hit, but the body is not parsing, and my backend thinks it's null. I have looked at similar issues that people on stack overflow have had, but none of their solutions seem to work (FormBody, changing data sent, etc.). Here is my packet data from fiddler, my front end code and my webAPI/viewmodel. I put a breakpoint in my C# endpoint, and it gets hit, but the "testInstance" object is always null. Any idea why this is, maybe a character encoding?

Fiddler data

Raw:

POST https://localhost:44380/api/Shipping/shippingDoc HTTP/1.1
Host: localhost:44380
Connection: keep-alive
Content-Length: 16
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json, text/plain, */*
Origin: https://localhost:44380
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
Content-Type: application/json; charset=UTF-8
Referer: https://localhost:44380/dataentry
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9

{"name":"hello"}

TextView:

{"name":"hello"}

Angular 8 frontend service:

@Injectable({
  providedIn: 'root'
})
export class ShippingService {

  private shippingURL : string = 'api/Shipping/shippingDoc';
  constructor(private http: HttpClient) { }

  postShippingDocForm(shippingDoc : ShippingDoc) : Observable<any> {
    var headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');
    var test = {name: "hello"} //dummy data
    return this.http.post(this.shippingURL, test, {headers: headers});
  }
}

.Net core web api:

namespace TrackingSystem.Controllers
    {
        [Route("api/Shipping")]
        public class ShippingController : ControllerBase
        {

            [HttpPost("shippingDoc")]
            [ProducesResponseType(StatusCodes.Status201Created)]
            [ProducesResponseType(StatusCodes.Status400BadRequest)]
            public ActionResult<Views.Shipping.Test> CreateShippingDocForm(Views.Shipping.Test testInstance) 
            {
                return testInstance; //breakpoint is here
            }

        }
    }

.Net core view model:

namespace TrackingSystem.Views.Shipping
{
    public class Test
    {
        public string name { get; set; }
    }
}

You don't have to set the content headers manually for application/json. That's the default in Angular 6+ — Brandon Taylor
– Brandon Taylor, Commented Jul 28, 2019 at 1:46
@Brandon I noticed that, but I was doing that to be safe. I'll remove it before production. Thanks for the catch though — Goku
– Goku, Commented Jul 28, 2019 at 1:49
Are you able to see the Request payload as { name: 'hello' } in the Browser Dev Tools network tab? If yes, then there's definitely an issue with your API. — SiddAjmera
– SiddAjmera, Commented Jul 28, 2019 at 3:39
You should then also check if the same request goes through properly with Postman. — SiddAjmera
– SiddAjmera, Commented Jul 28, 2019 at 4:13

penleychan · Accepted Answer · 2019-07-28 05:20:36Z

1

In order to bind the JSON correctly in ASP.NET Core, you must modify your action to include the attribute [FromBody] on the parameter. This tells the framework to use the content-type header of the request to decide which of the configured IInputFormatters to use for model binding.

public ActionResult<Views.Shipping.Test> CreateShippingDocForm([FromBody] Views.Shipping.Test testInstance) 
{
    return testInstance; //breakpoint is here
}

answered Jul 28, 2019 at 5:20

penleychan

5,4971 gold badge20 silver badges29 bronze badges

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

4 Comments

Goku Over a year ago

could you point me to documentation on this?

penleychan Over a year ago

@Goku learn.microsoft.com/en-us/aspnet/core/web-api/…

Goku Over a year ago

why in this example, do they chose not to use "[FromBody]" in the post request learn.microsoft.com/en-us/aspnet/core/tutorials/…

penleychan Over a year ago

Simple, your code doesn't handle JSON type binding to complex type because you don't have [ApiController] attribute. Thus you need that [FromBody]

Collectives™ on Stack Overflow

web-api POST body object always null when sending data from angular [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related