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, Feb 25 '16 at 11:10

score 1 · Accepted Answer · edited May 23 '17 at 11:54

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 '17 at 11:54

Community

1
1

answered Feb 25 '16 at 10:48

Thierry Templier

198,364
44
396
360

I get null in action parameter if i debug.I have correct this one too. – decoder Feb 25 '16 at 11:06
`action` is a query parameter? or something in the response? – Thierry Templier Feb 25 '16 at 11:08
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... – Thierry Templier Feb 25 '16 at 11:11
Response is fine.I can't send data.I get null value in name param. – decoder Feb 25 '16 at 11:15
This will not set name in controller method. – decoder Feb 25 '16 at 11:18
I think that you don't expect a JSON payload for the request but an url encoded form... I updated my answer. – Thierry Templier Feb 25 '16 at 11:23

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

1 Answers1