Angular httpclient.post send a JSON Obj to ASP.Net Core Action, at back-end data received is null

Question

I have a project that is ASP.Net Core and Angular. I am trying to do a very simple operation, from Angular posting a JSON data format to the back-end ASP.Net Core. The flow seems to work, it calls the correct Action at the back-end, however the data pass is null. Appreciate any help I can get. Thanks

At the Front-End, I have a simple Object that holds the data and at constructor I cast it to JSON. I verified that at the http.post call the data part contain the JSON information. So at the call below the jsonMessageFormat has the correct information.

   this._http.post(this._baseUrl + 'fabAutomation/PostTest', 
    this.jsonMessageFormat, this.config).subscribe(result => {
    this._returnedResult = result;
     }, error => console.error(error));

At the back end I tried to set the PostTest Action to accept both: 1. string 2. [FromBody] format to convert from JSON to the model

Neither, option worked. And at the Back-End Action the received data is null.

At the front-end:

   fabAutomationJsonMessage: any = [{ "maskID": "AAAA", "recipeName": 
   "XXXX", "JobTypeCduOrReg": "reg", "cduRevNumber": "0", "regRevNumber": 
  "0", "recipeState": null, "reticleAvailability": "eee", "dateTime": 
  "ddd" }];

   jsonMessageFormat: JSON;


 config: any = new HttpHeaders().set('Content-Type', 'application/json')
.set('Accept', 'application/json')




     constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string)
        {
       this.jsonMessageFormat = <JSON>this.fabAutomationJsonMessage;
        this._http = http;
       this._baseUrl = baseUrl;
        }


forSubmitOnClick() {

this._http.post(this._baseUrl + 'fabAutomation/PostTest', 
this.jsonMessageFormat, this.config).subscribe(result => {
  this._returnedResult = result;
}, error => console.error(error));

//At the BackEnd:

//At the Controller, define the following Action, the fabAutomationMessageVMOBJ is always null

        [HttpPost("[action]")]
        public IActionResult PostTest([FromBody] fabAutomationMessageVM 
        fabAutomationJsonMessageVMOBJ)
          {


        //removed implementation for simplicity


            //for response simply return the same information
            return Json(fabAutomationJsonMessageVMOBJ);


          }

Since the whole flow is working, and the http.post contain the Data in a JSON format (not null), I expect that this data will pass to the back-end as none-null.

fabAutomationJsonMessage can be passed as is. You don't really need to type cast it to <JSON> — SiddAjmera
try sending fabAutomationJsonMessage instead of jsonMessageFormat , and even headers can be removed. — Anand Bhushan
Most likely you can just drop the [FromBody] from your Action — Zze
Thanks! I have implemented all three suggestions here, and remove the header obj from the http.post. The fabAutomationJsonMessageVMOBJ is now not null(after removing the [] from the front-end assignment resolve that issue); however, the current behavior is the fields of this object are all null. Thanks for your help. — AsafD

Ryan Ryan · Accepted Answer · 2019-10-15T07:29:48

Your asp.net core web api receives an entity of model fabAutomationMessageVM

public IActionResult PostTest([FromBody] fabAutomationMessageVM fabAutomationJsonMessageVMOBJ)

but you post an array for your fabAutomationJsonMessage in angular and it will have 400 error when I test that, try to remove the []

fabAutomationJsonMessage: any = { 
       "maskID": "AAAA", 
       "recipeName": 
       "XXXX", "JobTypeCduOrReg": "reg", 
       "cduRevNumber": "0", 
       "regRevNumber": "0", 
       "recipeState": null, 
       "reticleAvailability": "eee", 
       "dateTime": "ddd" 
 };

Angular httpclient.post send a JSON Obj to ASP.Net Core Action, at back-end data received is null

2 Answers