Angular4 http post method pass empty values to web api

Question

I call http post method from angular4 component to web api. When I print those values return from web api on console it prints empty values. I checked the request using postman also. It also didn't work.

Http post call from component file.

EditValue(event, name, id) {
  const headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
  const options = new RequestOptions({ headers: headers });
  let body = { "name" : name, "id": id }
  this.http_.post('http://localhost:12412/api/employee?', body, options)
    .subscribe((data) => {console.log(data)});
}

Http post method in web api.

[HttpPost]            
public string postemp(Model model)
{
    return "name:" +model.name + " , " + "id: " + model.id;
}

public class Model
{
    public int id { get; set; }
    public string name { get; set; }
}

When I check the name and id from Editvalue function those values are passing. I tried solutions given by Angular4 http post method does not pass data to web api also. But issue didn't fix.How to check those posted data is passing to web api post method?

I attached the response result I got below.

Did you check the incoming parameter values on your EditValue function? Can you try to log them in your console? — Ishan Madhusanka
– Ishan Madhusanka, Commented Mar 14, 2018 at 11:15
@E.L.N.D.Madubhashini is your question different from the question in Angular4 http post method does not pass data to web api? — David Walschots
– David Walschots, Commented Mar 14, 2018 at 12:22

Juan · Accepted Answer · 2018-03-14 09:01:44Z

1

You are sending the info in the body in JSON format. But in your header you set application/x-www-form-urlencoded in which the values are encoded in key-value tuples separated by '&', with a '=' between the key and the value. So, to be able to send the data in the JSON format you need to change the Content-Type in your header to application/json.

answered Mar 14, 2018 at 9:01

Juan

2,0743 gold badges20 silver badges38 bronze badges

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

2 Comments

E.L.N.D.Madubhashini Over a year ago

After I changing the content-type to application/json it gives error like "Failed to load localhost:12412/api/employee?: Response for preflight has invalid HTTP status code 405."

Juan Over a year ago

You need to use JSON.stringify() on the body element to get a JSON representation to use in the http post method.

mironych · Accepted Answer · 2018-03-14 16:35:32Z

1

Just use the [FromBody] attribute to your API method parameter like below.

[HttpPost]            
public string postemp([FromBody]Model model)
{
    return "name:" +model.name + " , " + "id: " + model.id;
}

edited Mar 14, 2018 at 16:35

mironych

2,9782 gold badges29 silver badges38 bronze badges

answered Mar 14, 2018 at 15:34

Mendax

193 bronze badges

Comments

Darsan S Kumar · Accepted Answer · 2018-03-14 08:53:47Z

0

try JSON.stringify(body) before you send to the webapi once

answered Mar 14, 2018 at 8:53

Darsan S Kumar

3013 silver badges6 bronze badges

1 Comment

E.L.N.D.Madubhashini Over a year ago

Still get the same result.

E.L.N.D.Madubhashini · Accepted Answer · 2018-03-15 03:45:36Z

0

Since the content type I used here is 'application/x-www-form-urlencoded', body should not be passed using JSON object. Body I passed here should be in query string like below.

let body="id="+id+"&name="+name;

It worked for me.

answered Mar 15, 2018 at 3:45

E.L.N.D.Madubhashini

492 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular4 http post method pass empty values to web api

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related