Web API实例（微软官方）

打开vs，新建项目
在这里插入图片描述
确定，选择空项目，勾选

在资源管理器右键models，添加类

将类命名为Product.cs

添加属性

public int Id {
    
     get; set; }
public string Name {
    
     get; set; }
public string Category {
    
     get; set; }
public decimal Price {
    
     get; set; }

在这里插入图片描述
资源管理器右键控制器，添加-控制器

控制器命名为ProductsController，会新建一个名为ProductsController.cs的基架。
将控制器中的内容替换成：

using WebApplication3.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);
        }
    }
}

通过Javascript 和 jQuery 调用 Web API
右键资源管理器解决方案下面的项目，新建
在这里插入图片描述
将index.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>

运行得到结果
在这里插入图片描述
在这里就可以查询了
F12-网络

おすすめ