標籤：style blog class code c ext
今天參照微軟官方（http://www.asp.net）學習了WebApi，在這裡摘錄如下：
前言HTTP 不只是為了產生 web 頁面。它也是一個強大的平台，可以建設公開服務和資料的 Api。HTTP 是簡單、 靈活，它似乎可以無處不在。你能想到的幾乎任何平台都可以有一個 HTTP 庫，因此，HTTP 服務可以應用到廣泛的用戶端，如瀏覽器、 行動裝置和傳統的傳統型應用程式。
ASP.NET Web API 是用於產生 web Api 在.NET 架構上的架構。在本教程中，您將使用 ASP.NET Web API 建立的 web API 返回的產品列表。
建立項目建立Web空模版項目，選WebAPI核心檔案，
添加模型在Models檔案夾下，建立一個Product.cs:
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | namespace ApiDemo01.Models { /// <summary>產品實體類</summary> public class Product { /// <summary>產品ID</summary> public int ID { get; set; } /// <summary>產品名稱</summary> public string Name { get; set; } /// <summary>產品類別</summary> public string Category { get; set; } /// <summary>產品價格</summary> public decimal Price { get; set; } } } |
註：為了VS支架識別到實體類，記得先產生一下項目。
添加控制器在Controllers檔案夾下，使用支架：
支架自動產生一些作業碼，這裡修改後，如下：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | using ApiDemo01.Models; using System.Collections.Generic; using System.Linq; using System.Web.Http; namespace ApiDemo01.Controllers { public class ProductController : ApiController { //類比資料 List<Product> pList = new List<Product> { new Product{ID=1, Name="Dell", Category="電腦" , Price=3500 }, new Product{ID=2, Name="Apple", Category="手機" , Price=5500 }, new Product{ID=3, Name="HP", Category="電腦" , Price=3000 } }; //擷取產品集合 public IEnumerable<Product> GetProducts() { return pList; } //根據產品ID擷取一個產品 public IHttpActionResult GetProduct(int id) { var product = pList.FirstOrDefault((p) => p.ID == id); if (product == null) { return NotFound(); } return Ok(product); } } } |
註：這裡沒有讀取資料庫方式，使用集合初始化器。
安裝Jquery要使用到AJAX請求，這裡先安裝Jquery庫：
註：你也可以複製下載過的jquery。
建立展示頁面在項目根目錄下添加一個Index.html頁面，代碼如下：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>產品頁</title> </head> <body> <div> <h2>所有產品</h2> <ul id="products" /> </div> <div> <h2>根據產品ID尋找</h2> <input type="text" id="prodId" /> <input type="button" value="Search" onclick="find();" /> <p id="product" /> </div> <script src="Scripts/jquery-2.1.0.js"></script> <script> var uri = ‘api/product‘; $(document).ready(function () { $.getJSON(uri) .done(function (data) { // 請求成功 $.each(data, function (key, item) { $(‘<li>‘, { text: formatItem(item) }).appendTo($(‘#products‘)); }); }); }); function formatItem(item) { return item.Name + ‘: $‘ + item.Price; } function find() { var id = $(‘#prodId‘).val(); $.getJSON(uri + ‘/‘ + id) .done(function (data) { $(‘#product‘).text(formatItem(data)); }) //請求失敗 .fail(function (jqXHR, textStatus, err) { $(‘#product‘).text(‘Error: ‘ + err); }); } </script> </body> </html> |
註：Jquery寫AJAX方法可以很多種！
預覽瀏覽Index.html頁面，並輸入尋找，得到下面結果：
使用IE開發人員工具（按F12），看一下要求標頭：
註：WebApi預設傳遞資料會序列化json格式，用戶端也無需寫還原序列化代碼。（至於它如何做的，在後面介紹再說。）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
