Angular2 HTTP POST到Asp.net 5控制器参数绑定收到null

Question

这里是我的angular2代码

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); 
} 

而在MVC控制器我的行动方法如下：

[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"}); 
    } 

我总是空。如果我使用复杂的类型，我得到的属性为null.Whatever在这种简单的情况如何使它正确？ 更新：

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

Answer 1

你的代码，意味着你有一个data财产在你的响应有效载荷：

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

类似的东西：

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

是不是这样的？你还是使用：

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

编辑

我认为你需要发送URL编码形式，而不是JSON数据。这是可以做到这样的：

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); 
} 

如果您需要通过名称查询参数，使用这个：

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

不要忘了导入URLSearchParams类。 而 控制器方法 公共JsonResult PostHeroes（字符串名称）

看到这个问题：

• Simple post to Web Api