Angular2 Http Post to Asp.net 5 Controller Parameter binding get null

Question

here is my angular2 Code

addHero(name: string): Promise<Hero> {
    let body = JSON.stringify({ name: name });
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return this.http.post(this._heroUrlPost, name, options)
        .toPromise()
        .then(res => <Hero>res.json().data)
        .catch(this.handleError);
}

And in MVC Controller My Action Method is as follows:

    [HttpPost]
    public JsonResult PostHeroes([FromBody]string name)
    {
        //var name1 = Request.Form["name"].ToString();
        if (!string.IsNullOrEmpty(name))
        {
            var hero1 = new Heroes()
            {
                HeroName = name
            };
            _dbContext.Hero.Add(hero1);
            _dbContext.SaveChanges();
            return Json(new { data = hero1 });
        }
        return Json(new { data="Not Saved"});
    }

I always get null.If I use complex Type i get the property being null.Whatever in simple case like this How to make it right? Update:

return this.http.post(this._heroUrlPost, body, options)
        .toPromise()
        .then(res => <Hero>res.json())
        .catch(this.handleError);

I don't see anything wrong with Angular code... so it's probably a server issue, I don't know ASP tho'... — Sasxa
– Sasxa, Commented Feb 25, 2016 at 11:10

Community · Accepted Answer · 2017-05-23 11:54:13Z

1

Your code implies that you have a data property in your response payload:

return this.http.post(this._heroUrlPost, body, options)
    .toPromise()
    .then(res => <Hero>res.json().data) // <-----
    .catch(this.handleError);

Something like that:

{
  "data": {
    (...)
  }
}

Is it the case? You should use this rather:

return this.http.post(this._heroUrlPost, body, options)
    .toPromise()
    .then(res => <Hero>res.json()) // <-----
    .catch(this.handleError);

Edit

I think that you need to send a url encoded form instead of JSON data. This can be done like this:

addHero(name: string): Promise<Hero> {
  var params = new URLSearchParams();
  params.set('name', name);

  let body = params.toString();
  let headers = new Headers({
    'Content-Type': 'application/x-www-form-urlencoded'
  });
  let options = new RequestOptions({ headers: headers });
  return this.http.post(this._heroUrlPost, name, options)
    .toPromise()
    .then(res => res.json().data)
    .catch(this.handleError);
}

If you need to pass the name as query parameter, use this:

let options = new RequestOptions({ headers: headers, search: params });

Don't forget to import the URLSearchParams class. And controller method public JsonResult PostHeroes(string name)

See this question:

Simple post to Web Api

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Feb 25, 2016 at 10:48

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

6 Comments

decoder Over a year ago

I get null in action parameter if i debug.I have correct this one too.

Thierry Templier Over a year ago

action is a query parameter? or something in the response?

Thierry Templier Over a year ago

What is the content of your response? Do you have the Content-Type header in your response? From the Network tab of your dev tools of your browser...

decoder Over a year ago

Response is fine.I can't send data.I get null value in name param.

decoder Over a year ago

This will not set name in controller method.

|

Collectives™ on Stack Overflow

Angular2 Http Post to Asp.net 5 Controller Parameter binding get null

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related