C# WebAPI 與 Angular2 透過 Http.post 傳遞參數做資料新增

之前一篇 提到，透過 http.get 來進行資料的 Query，Query 參數主要是透過網址列來傳遞。
而為了符合 RESTful 架構風格，因此在新增資料時，我們使用的是 http.post


承接上一篇的例子，在這邊我們仍以 ValuesController.cs 作為例子
Step 1. 同樣的步驟，我們在必須先建一個類別來接收 http.post 傳遞過來的參數，這邊我們命名為 MyData
    public class MyData
    {
        public string fab { get; set; }
        public string shop { get; set; }
        public string date { get; set; }
        public string qty { get; set; }
    }

Step 2. 將 POST預設的 code 標註起來，因為傳遞的參數不是一的字串(string)，而是剛剛建立的 MyData 類別。
Http.post 就是從Post Body 取得參數，前面加的是[FromBody]。function 裡的內容就是透過 SQL 語法去將資料存到資料庫裡。
        //// POST api/values
        //public void Post([FromBody]string value)
        //{
        //}
        // POST api/values
        public void Post([FromBody]MyData value)
        {
            Console.Write(value);
        }

前端 Angular2的部分也很簡單，幾乎只是將原本的 get 改成 post 再多傳遞一個變數"body"
Step 3. 我們在網頁上多加一個按鈕，讓這個按鈕觸發 save()
save(){
        let options = new RequestOptions();
        let headers = new Headers({ 'Content-Type': 'application/json',
        'Accept': 'q=0.8;application/json;q=0.9' });
        options.headers = headers;
        let body = {
                'fab': 'Fab01',
                'shop': 'Shop01',
                'date': '2017/05/26',
                'qty': 100
        }

        let url = '/api/values/';
        this._http.post(url,body, options)
                .subscribe(next => console.log('ok'));
}


如此，即完成 Http.post 的實作。
這裡可以透過 Chrome 瀏覽器，打開 F12 編輯視窗，選擇 Network 可以看到傳送出去的http body如下：
Request Payload:
{ "fab": "Fab01", "shop": "Shop01", "date": "2017/05/26", "qty": 100 }
另外也可以 Fiddler 來查看