Angular2 Http post request not binding to ASP.NET 5 controller's action

Question

I am initiating a post request from Angular2 to a ASP.NET 5 controller action. Angular is posting the data correctly and hitting the controller action but it is not being mapped to the parameters defined in controller action, the parameters are null. Meanwhile by inspecting through Request object Request.Form has the correct textual data but not binding to the model.

Angular

let body = JSON.stringify({ firstName: 'Ali' });
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });

this.http.post(this.url, body, { headers: headers })
            .subscribe(
                (data) => {
                    console.log('Response received');
                    console.log(data);
                },
                (err) => { console.log('Error'); },
                () => console.log('Authentication Complete')
            );

ASP.NET

[HttpPost]
public IActionResult DemoAction(string firstName)
{
      var req = Request;

      return null;
}

Request.Form has data in the form like {\"firstName\":\"Ali\"} but the parameter firstName is null

Why are you "stringifying" the json? Just post the json object. — Mark PM
– Mark PM, Commented Feb 16, 2016 at 12:25
Yes, its the same. firstName param is null and Request.Form has a value like [object Object] — Ali Shahzad
– Ali Shahzad, Commented Feb 16, 2016 at 12:39

Thierry Templier · Accepted Answer · 2016-02-16 12:39:00Z

5

You try to send a JSON content (created using the JSON.stringify method) with a content type url encoded form.

You should try to use the application/json one:

let body = JSON.stringify({ firstName: 'Ali' });
let headers = new Headers({ 'Content-Type': 'application/json' });

this.http.post(this.url, body, { headers: headers })

Edit

If you want to provide a form content, you could leverage the URLSearchParams class:

var params = new URLSearchParams();
params.set('firstName', 'Ali');
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });

this.http.post(this.url, params.toString(), { headers: headers })

edited Feb 16, 2016 at 12:39

answered Feb 16, 2016 at 12:33

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

9 Comments

Ali Shahzad Over a year ago

The same with content-type application/json firstName is null and even the Form.Request is also null

Ali Shahzad Over a year ago

I have a complete model with many properties, how can I set them to URLSearchParams ?

Ali Shahzad Over a year ago

single parameter is receiving correctly using URLSearchParams, but how can I post an object (model)

Thierry Templier Over a year ago

I understand. What do you exactly mean by "parameter"? Is it a query parameter or a property of the request payload?

Ali Shahzad Over a year ago

Property of request payload that you are sending as a parameter as params.set('firstName', 'Ali'); now I want to send a complete object/model with set of properties. Should I manually set each property in params.set ?

|

micronyks · Accepted Answer · 2016-02-17 06:38:59Z

3

In this case you don't require to pass the header. look at here. you may try this.

this.http.post('/api/ControllerName/DemoAction?firstName=Ali')
.subscribe(
                (data) => {
                    console.log('Response received');
                    console.log(data);
                },
                (err) => { console.log('Error'); },
                () => console.log('Authentication Complete')
            );

This will surely work.

Edited:

Figured out your problem.

First: When you are receiving paramter(s) at API end , you must use above portion.

second: When you are receiving object at API end, you must use below code.

I'm showing you with my setup as I don't know your object at server side.

let um=JSON.stringify({ Username: "Hello1",Password:"Hello2"});

let headers = new Headers({ 'Content-Type': 'application/json'});

this.http.post(this.url+'/Authentication',um,{ headers: headers })
                        .subscribe(...);

At server side I have following setup.

public class UserModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

[HttpPost]
public IHttpActionResult Authentication(UserModel um)  // I m getting value here.
{
    if (um.Username == "a" && um.Password == "a")
    {
        um.Username = um.Username;
        um.Password = um.Password;
        return Ok(um);
    }
    return NotFound();
}

Simple solution !! isn't it?

edited Feb 17, 2016 at 6:38

answered Feb 16, 2016 at 12:43

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

10 Comments

Ali Shahzad Over a year ago

I have a complete model with many properties, firstName is just for demonstration. I don't want to create a querystring manually

Ali Shahzad Over a year ago

I find it more simple but unfortunately I am getting null with this solution

Ali Shahzad Over a year ago

Which content-type you used ?

micronyks Over a year ago

Oh sorry ! forgot to tell you. Updating answer.

Ali Shahzad Over a year ago

Still not getting the values

|

programmer_girl · Accepted Answer · 2017-04-23 12:20:23Z

1

For me it works:

let headers = new Headers({ 'Content-Type': 'application/json' });
this.http.post(this.url, JSON.stringify({ firstName: 'Ali' }), { headers: headers })

answered Apr 23, 2017 at 12:20

programmer_girl

111 bronze badge

Collectives™ on Stack Overflow

Angular2 Http post request not binding to ASP.NET 5 controller's action

3 Answers 3

9 Comments

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related