本範例是前端網頁傳遞多個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"
}
]
