ASP.NET Web API

ASP.NET Web API

ASP.NET Web API

  • HTTP 也是功能強大的平台,建置應用程式開發介面公開 (expose) 服務和資料。

Visual Studio 2017 

  1. 建立 Web API 專案 
  2. 新增 ASP.NET 專案對話方塊中,選取範本。
  3. 加入模型

  4. 加入下列屬性

    namespace ProductsApp.Models
    {
        public class Product
        {
            public int Id { get; set; }
            public string Name { get; set; }
            public string Category { get; set; }
            public decimal Price { get; set; }
        }
    }

     

  5. 新增控制器

  6. 撰寫ProductsController

    using ProductsApp.Models;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Web.Http;
    
    namespace ProductsApp.Controllers
    {
        public class ProductsController : ApiController
        {
            Product[] products = new Product[] 
            { 
                new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
                new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
                new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M } 
            };
    
            public IEnumerable<Product> GetAllProducts()
            {
                return products;
            }
    
            public IHttpActionResult GetProduct(int id)
            {
                var product = products.FirstOrDefault((p) => p.Id == id);
                if (product == null)
                {
                    return NotFound();
                }
                return Ok(product);
            }
        }
    }

     

  7. 呼叫 Web API  (新增HTML 網頁項目)

  8. 撰寫HTML

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Product App</title>
    </head>
    <body>
    
      <div>
        <h2>All Products</h2>
        <ul id="products" />
      </div>
      <div>
        <h2>Search by ID</h2>
        <input type="text" id="prodId" size="5" />
        <input type="button" value="Search" onclick="find();" />
        <p id="product" />
      </div>
    
      <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
      <script>
        var uri = 'api/products';
    
        $(document).ready(function () {
          // Send an AJAX request
          $.getJSON(uri)
              .done(function (data) {
                // On success, 'data' contains a list of products.
                $.each(data, function (key, item) {
                  // Add a list item for the product.
                  $('<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>

     

  9. 執行

參考網址:Microsoft API