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 來查看 

建立 C# WebAPI 與 Angular2 做 Http.get 溝通

因為這個部分是小太陽一開始學習 Angular2 首要想完成的地方，中間當然遇到了許多難關，一一的克服後，撰寫這篇文章希望對大家有所幫助！
本範例是前端網頁傳遞多個Query參數，到後端Web API 搜尋資料庫後，將 DataTable 回傳到前端的範例。

Step 1. 建立 C# Web API (vs2012)
1) 新增專案 >> Web >> ASP.NET MVC 4 WEB 應用程式
2) 範本選取 Web API

Web API專案完成建立後，會預設建立一個 ValuesController.cs，我們以此Controller 來進行範例。
Step 2. 因為要傳遞多個參數，所以會用一個類別將參數接起來，所以這邊會建一個 QueryParams 類別，用來接參數。
    public class QueryParams
    {
        public string fab { get; set; }
        public string shop { get; set; }
        public string date { get; set; }    //  YYYY/MM/DD - YYYY/MM/DD
    }

Step 3.  Http.get 是透過 URL 來傳遞參數，所以在接參數的前面加一個 [FromUri]，如果是 Http.post 就是從Post Body 取得參數，前面加的是[FromBody]。本範例就不著墨在DBConnector上面了，小太陽用的是 Oracle.ManagedDataAccess。
        // GET api/values
        //public IEnumerable<string> Get()
        //{
        //    return new string[] { "value1", "value2" };
        //}
        public DataTable Get([FromUri]QueryParams queryParams)
        {
            DBConnector db = new DBConnector("MyDB");
            string strSQL = @"select '{0}', '{1}', '{2}' from dual";
            strSQL = string.Format(strSQL, queryParams.fab
                                         , queryParams.shop
                                         , queryParams.date);
            string errorStr = "";
            DataTable dt = db.selectSQL(strSQL, out errorStr);
            return dt;
        }

接下來是前端 Angular2的部分，假設你已經透過這篇建好專案了 ng2 建立新專案 
並且解決 Cross Domain問題 解決 ng2 的 Cross Domain 問題
Step 4. 那麼我們開始在 app.component.ts 來呼叫 Http.get 吧
import { Component, OnInit } from '@angular/core';
import {URLSearchParams,  Headers,   Http,   RequestOptions} from '@angular/http';
@Component({
  selector: 'app-root',
  templateUrl: `
  <h1>
  <pre>{{data|async|json}}</pre>
</h1>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  data: any;
  constructor(private http: Http){}
  ngOnInit(){
    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 params: URLSearchParams = new URLSearchParams();
    params.set('fab', 'myFab');
    params.set('shop', 'myShop');
    params.set('date', '2017/04/24');
    options.search = params;

    let url = '/api/values/';
    this.data = this.http.get(url,options).map(response => response.json());
  }
}


如果是使用 Chrome 瀏覽器，打開 F12 編輯視窗，選擇 Network 可以看到傳送出去的網址如下：

Request URL:

http://localhost:4200/api/values/?fab=myFab&shop=myShop&date=2017/04/24

這時候在Web API 中設中斷點就可以看到傳進來的參數。
而Angular2 的畫面也會將回傳回來的 DataTable轉為 json放到 data 變數裡，下面是最後網頁呈現的結果：

[
  {
    "'MYFAB'": "myFab",
    "'MYSHOP'": "myShop",
    "'2017/04/24'": "2017/04/24"
  }
]

利用 Moment.js 將日期轉換為字串

Step 1. 安裝 moment 套件

npm install moment

Step 2. 在 TypeScript 中 import moment 套件

import * as moment from 'moment';

Step 3. 將日期格做轉為字串語法如下

var mDate = moment();

var today = mDate.format("MM/DD/YYYY");   // 轉為 MM/DD/YYYY 字串格式

var day7 = mDate.add(7,'days').format("MM/DD/YYYY");     // 加7天