1. Web API簡單說明
近來很多大型的平台都公開了Web API。比如百度地圖 Web API，做過地圖相關的人都熟悉。公開服務這種方式可以使它易於與各種各樣的設備和客戶端平台集成功能，以及通過在瀏覽器中使用 JavaScript來創建更豐富的HTML體驗。所以我相信Web API會越來越有它的用武之地。
說道Web API很多人都會想到Web服務，但是他們仍然有一定的區別：Web API服務是通過一般的 HTTP公開了，而不是通過更正式的服務合同 （如SOAP）
2. ASP.NET Web API簡介
ASP. NET Web API支持讓你能夠輕松地創建功能強大的 Web API，可以從范圍廣泛的客戶端 （包括使用 JavaScript從瀏覽器中，到任何移動/客戶端平台上的本機應用程序）訪問。它提供以下支持：
(1)現代 HTTP 的編程模型：在你的 Web 應用程序中直接訪問和處理 HTTP 請求並響應，使用清潔、 強類型的 HTTP 對象模型。除了在服務器上支持這個 HTTP 的編程模型之外，通過使用新的 HttpClient API來從任何.NET 應用程序中調用 Web ApI，我們也支持客戶端中相同的編程模型。
(2)內容協商： Web API 有對內容協商的內置支持 — — 這使客戶端和服務器一起工作以決定從一個 API 返回的正確的數據格式。我們為JSON、 XML 和Form URL 編碼的格式提供默認支持，並可以通過添加你自己的格式化程序來擴展這種支持，或者甚至用你自己的來替換默認的內容協商策略。
(3)查詢組成： Web API 通過 OData URL 公約使你能夠輕松地支持查詢。當你從你的 Web API 返回一種類型的 IQueryable <T> 時，框架將自動為它提供 OData 查詢支持— — 使其易於分頁和排序。
(4)模型綁定和驗證：模型綁定器提供了一種簡單的方法來從HTTP 請求中的不同部分提取數據，並將這些信息部分轉換為Web API行為可使用的.NET對象。Web API 支持相同的模型綁定和ASP. NET MVC 現今支持的驗證基礎結構。
(5)路由： Web ApI 支持完整的路由功能集。現今ASP. NET MVC 和 ASP.NET也支持這一點，包括路線參數和約束。默認情況下，Web API 還提供了智能公約，使你能夠輕松地創建實現 Web ApI的類，而無需不得不將屬性應用到你的類或方法中。Web API 的配置純粹是通過代碼來實現的 — — 保持你的配置文件干凈。
(6)篩選器： Web ApI 使你能夠輕松地使用和創建篩選器 （例如： [授權]），那樣你能夠封裝和應用交叉行為。
(7)改進的可測試性： 與其在靜態文本對象中設置 HTTP 的詳細信息，不如將 Web API 行為與 HttpRequestMessage 和 HttpResponseMessage 一起使用— — 兩個新 的HTTP對象 （在其他內） 使測試更容易。例如，你可以單元測試你的 Web ApI，而無需不得不使用 Mocking 框架。
(8)IoC支持： Web API 支持由 ASP. NET MVC 實現的服務定位器模式，使你能夠解決不同設備的依賴。你可以輕松地使用IoC容器或依賴注射架構來集成，以保持干凈的依賴解決方案。
3. 創建一個Web API程序
啟動VS2012創建一個新項目，在已經安裝的模板中選擇 ASP.NET MVC4 Web API程序
在ASP.NET MVC項目對話框中選擇Web API項，點擊確定
創建成功之后工程中會自動添加一個Web API服務控制器，上面並附帶訪問地址
項目解決方案，選擇Models文件夾右鍵 添加一個Model類
代碼如下：
{
public class Contact
{
public int ID { get; set; }
public string Name { get; set; }
public string Sex { get; set; }
public DateTime Birthday { get; set; }
public int Age { get; set; }
} }
工程解決方案選擇Controllers文件夾右鍵添加一個新的Web API controller
在添加控制器彈出對話框中選擇模板： 空API控制器
控制器中添加如下代碼：
{
public class ContactController : ApiController
{
Contact[] contacts = new Contact[]
{
new Contact(){ ID= 1, Age= 23, Birthday=Convert.ToDateTime( " 1977-05-30 "), Name= " 情緣 ", Sex= " 男 "},
new Contact(){ ID= 2, Age= 55, Birthday=Convert.ToDateTime( " 1937-05-30 "), Name= " 令狐沖 ", Sex= " 男 "},
new Contact(){ ID= 3, Age= 12, Birthday=Convert.ToDateTime( " 1987-05-30 "), Name= " 郭靖 ", Sex= " 男 "},
new Contact(){ ID= 4, Age= 18, Birthday=Convert.ToDateTime( " 1997-05-30 "), Name= " 黃蓉 ", Sex= " 女 "},
};
/// <summary>
/// /api/Contact
/// </summary>
/// <returns></returns>
public IEnumerable<Contact> GetListAll()
{
return contacts;
}
/// <summary>
/// /api/Contact/id
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public Contact GetContactByID( int id)
{
Contact contact = contacts.FirstOrDefault<Contact>(item=>item.ID==id);
if (contact == null)
{
throw new HttpResponseException(HttpStatusCode.NotFound);
}
return contact;
}
/// <summary>
/// 根據性別查詢
/// /api/Contact?sex=女
/// </summary>
/// <param name="sex"></param>
/// <returns></returns>
public IEnumerable<Contact> GetListBySex( string sex)
{
return contacts.Where(item => item.Sex == sex);
}
}}
4. 瀏覽器訪問API路徑
Controller Methed
URI
GetListAll
/api/Contact
GetListBySex
"/api/Contact?sex=" + sex
GetContactByID
/api/Contact/"+id
在IE瀏覽器中瀏覽出現如下效果
5. Javascript訪問Web API
在項目中添加一個About View視圖
代碼如下：
Layout = null;
}
<! DOCTYPE html >
< html >
< head >
< meta name ="viewport" content ="width=device-width" />
< title >About </ title >
< script type ="text/javascript" src ="/Scripts/jquery-1.7.1.min.js" ></ script >
< script type ="text/ecmascript" >
$(document).ready( function () {
$("#btnAll").click( function () {
$.getJSON("/api/Contact", function (data) {
var html = "<ul>";
$(data).each( function (i, item) {
html += "<li>"+item.ID+":"+item.Name+":"+item.Sex+"</li>";
});
html += "</ul>";
$("#contactAll").html(html);
});
});
$("#btnID").click( function () {
var id = $("#txtID").val();
$.getJSON("/api/Contact/"+id, function (data) {
var html = "<ul>";
$(data).each( function (i, item) {
html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";
});
html += "</ul>";
$("#contactID").html(html);
});
});
$("#btnSex").click( function () {
var sex = $("#ddlSex").val();
$.getJSON("/api/Contact?sex=" + sex, function (data) {
var html = "<ul>";
$(data).each( function (i, item) {
html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";
});
html += "</ul>";
$("#contactSex").html(html);
});
});
});
</ script >
</ head >
< body >
< p >
< input type ="button" id ="btnAll" value ="查詢所有" />
</ p >
< p >
< input type ="text" id ="txtID" name ="txtID" />
< input type ="button" id ="btnID" value ="根據ID查詢" />
</ p >
< p >
< select id ="ddlSex" name ="ddlSex" >
< option value ="男" >男 </ option >
< option value ="女" >女 </ option >
</ select >
< input type ="button" id ="btnSex" value ="根據性別查詢" />
</ p >
< div id ="contactAll" >
</ div >
< div id ="contactID" >
</ div >
< div id ="contactSex" >
</ div >
</ body >
</html>
運行結果效果圖
6. Web API總結
1.Web API 控制器(Controller) 繼承ApiController
2. Api 的 Url Map： api/{controller}/{id} 每個"Action"是通過 Http謂詞(GET/POST/PUT/DELETE)映射的
3.客戶端可以通過 Http Header 的 Accept 指定返回數據的格式。默認是支持：appliction/xml 和 application/json，當想返回比如 image/jpeg 這樣的圖片格式時，需要添加 MediaTypeFormatter 。比如：當指定某個 Task 時，通過指定 Accept : image/jpeg 獲取該 Task 的圖片信息。(后面詳細介紹)
該系列大概20篇左右，期待各位的拍磚！