Asp.net core webapi getting null value posted from Angular4 app

Question

I am new to Angular4 and in a situation to deliver the stuff quickly so have no time to learn it thoroughly so pardon if my question seems childish:

From my Asp.Net Web API I have Confirmemail API which has to be called from Angular4 application, looks like this:

Asp.net WebApi:

[HttpPost]
public async Task<object>ConfirmEmail([FromBody] string userid,[FromBody] string code)
{
}

In Angular4 Service API:

ConfirmEmail(userid,code)
{           
    let url =`api/account/ConfirmEmail`;
    let data= `userid=${userid}&code=${code}`;
    console.log(data);
    return this.http.post(url,data);
}

Here, I checked in console.log the data is coming properly, but at the webapi side I am finding these strings null. I tried removing [FromBody] but it didn't worked with me.

I am really clueless what is missing, it is almost one day preparing all these things but have not got any success. Do you guys have any workaround?

score 2 · Answer 1 · answered Feb 18 '18 at 13:30

2

You can make an object of both userid and code and convert to string using JSON.stringify(data);

let url =`api/account/ConfirmEmail`;
let userObj = {'userid':userid,'code':code};
let data= JSON.stringify(userObj);
return this.http.post(url,data);

and access it as

[HttpPost]
public async Task<object>ConfirmEmail([FromBody] User userObj)
{

}

answered Feb 18 '18 at 13:30

Sajeetharan

216,225
63
350
396

That is another way in my mind, but would like if I like to have simple parameter passing – Jaidev Khatri Feb 18 '18 at 13:50
This is how http post works! if you want parameter passing you can use httpget – Sajeetharan Feb 18 '18 at 13:54
Tried your solution, showing error as unsupported media type. – Jaidev Khatri Feb 18 '18 at 14:07
@Sajeetharan this is the deference among my answer and your answer – Hasan Fathi Feb 18 '18 at 14:11
1

@HasanFathi yes i understand :) – Sajeetharan Feb 18 '18 at 14:11
error TS2345: Argument of type '{ headers: HttpHeaders; }' is not assignable to parameter of type 'RequestOptionsArgs'. Types of property 'headers' are incompatible. Type 'HttpHeaders' is not assignable to type 'Headers'. Property 'forEach' is missing in type 'HttpHeaders'. – Jaidev Khatri Feb 18 '18 at 14:15
@JaidevKhatri please check this : https://stackoverflow.com/questions/43205570/angular2-http-requestoptions-headers – Hasan Fathi Feb 18 '18 at 14:20
1

you can mark only one and upvote both :) . i think hasan's answer deserved to be chosen as correct – Sajeetharan Feb 18 '18 at 14:40
why data convert to **JSON.Stringfy()** ? – Mohammad Daliri Sep 03 '18 at 06:56

Hasan Fathi · Accepted Answer · 2018-05-07T06:57:32.427

1

For post data to your API from angular app try this in angular:

let url ="api/account/ConfirmEmail";

var userInfo = { "userid":userid, "code":code }
let content = JSON.stringify(userInfo);

let headers = new HttpHeaders(); 
headers.set("Content-Type", "application/json");

return this.http.post(url, content, { headers: headers, responseType: 'text'});

and in your API for receive your request body and deserialize this:

[HttpPost]
public async Task<object>ConfirmEmail([FromBody] UserInfo userInfo)
{

}

Public Class UserInfo
{
  public long userid {get; set;}
  public long code {get; set;}
}

For send your data in url you should use http get method like this:

Angular:

let Params = new HttpParams();

Params = Params.append("userid", userid);
Params = Params.append("code", code);

return this.http.get(url , { params: Params });

Web API:

[HttpGet]
public async Task<object>ConfirmEmail(string userid, string code)
{
}

edited May 07 '18 at 06:57

answered Feb 18 '18 at 13:41

Hasan Fathi

5,610
4
42
60

1

While both the answers are helpful – Jaidev Khatri Feb 18 '18 at 14:40
1

Hi Hasan, Please make necessary changes in the answer to get whole picture at single shot for other users and I will make the answer. – Jaidev Khatri Feb 18 '18 at 14:45
1

like request option didn't worked for me, so I tried like this let headers = new HttpHeaders(); headers = headers.set('Content-Type', 'application/json'); return this.http.post(url,data,{ headers: headers, responseType: 'text' }); – Jaidev Khatri Feb 18 '18 at 14:46
1

@JaidevKhatri after i search in web `requestOption` not supported in new version of `httpClient` and i recommend not use this – Hasan Fathi Feb 18 '18 at 15:22
@JaidevKhatri i add option – Hasan Fathi Feb 18 '18 at 15:38

Asp.net core webapi getting null value posted from Angular4 app

2 Answers2

Linked