Angular2/4 http POST services call .Net/MVC Web API 2.0 REST parameter is null

Question

I have a .Net/C# Web API 2.0 REST service which works fine if test with Postman, but always get null parameter if call from Angular2/4 http service with Post.

below is the code:

C#:

public class UsersController : ApiController
{
    // POST: api/users/login
    public string login([FromBody]string value)
    {
        var ss = value;
        return value;
    }
}

Angular2 service:

login(email: string, password: string) {
    const headers: Headers = new Headers();
    headers.append('Content-Type', 'application/json');
    const theBody = {'email': email, 'password': password};

    const requestoptions: RequestOptions = new RequestOptions({
        method: RequestMethod.Post,
        url: this.host + '/users/login',
        headers: headers,
        body: JSON.stringify(theBody)
    })

    return this.http.request(new Request(requestoptions))
        .map((res: Response) => {
            return res.json;
        })
        .catch(this.logAndPassOn);
}

When test with Postman, I set header as Content-Type : application/json, and body select "raw".

everything looks the same, however the Angular2 Http Post service doesn't work anyway, I always get null value.

Thanks in advance for any any help.

you get null in component or service have you subscribed in the component ? — Rahul Singh
thank you for your quick response. the JSON in raw body is: "{'email': email, 'password': password}" — Blockchain Nerd
the null is in servie public string login([FromBody]string value) { var ss = value; return value; } the call comes in successful, just value is null. — Blockchain Nerd

serpent5 serpent5 · Accepted Answer · 2017-08-11T16:45:47

Remove JSON.stringify: There's no need to convert it to a string.

On the Web Api side, you'll be better off with a POCO for the incoming data. Create a class that includes two string properties, e.g.:

public class LoginViewModel
{
    public string Email { get; set; }
    public string Password { get; set; }
}

Then, change [FromBody]string value to [FromBody]LoginViewModel viewModel.

To try and clarify a little more, there's a big difference between this:

{
    "email": "some-email",
    "password": "some-password"
}

and this:

"{ email: 'some-email', password: 'some-password' }"

The first example is a JSON object, whereas the second is just a string and nothing more. It doesn't matter that the data inside looks like JSON: it isn't. In your Postman example, you were actually sending a string, but perhaps Angular is being a bit clever and basically ignoring your JSON.stringify in the first place.

Angular2/4 http POST services call .Net/MVC Web API 2.0 REST parameter is null

1 Answers