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