ASP.NET WebApi 入門

來源:互聯網
上載者:User

標籤: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格式,用戶端也無需寫還原序列化代碼。(至於它如何做的,在後面介紹再說。)

     

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.