Web Api 系列（一）初识 web api

HTTP 不仅仅服务于web 页面，而且它也是一个强大的平台它对于构建提供开放服务和数据的api 来说。HTTP是简单的，灵活的，无处不在的。几乎所有的平台都存在它的身影。HTTP服务可以贯穿于几乎所有的客户端。包括浏览器，移动设备和传统的桌面程序。

ASP.NET Web API 是基于.net Framework 用来构建Web 接口的框架。接下来使用asp.net web api 构建web 接口来返回产品列表。

演示案例需要的软件版本：vs 2013, web api 2。

一创建一个 Web Api 项目

在这个演示案例中将使用 asp.net web api 来创建一个返回产品列表的web接口,前端使用Jquery.

打开 vs 创建一个项目如图：

然后创建一个空的mvc 项目：

注意：还可以使用web api 的模板创建一个web api的项目， web api 模板通过asp.net mvc 提供 web api 的帮助页面。

二添加Model

model 是程序里用来表现数据的对象，asp.net web api 可以自动的序列化成JSON，XML 或者一些其他的格式，然后把序列化的数据写到HTTP 响应信息的 body里。只要客户端可以读取序列化的格式，它就可以把数据反序列化成对象，大部分的客户端都可以转换XML，JSON，此外，客户端想显示那种格式可以通过设置接受Header的HTTP请求信息来设置。

添加一个Product 类

 1 namespace ProductsApp.Models
 2 {
 3     public class Product
 4     {
 5         public int Id { get; set; }
 6         public string Name { get; set; }
 7         public string Category { get; set; }
 8         public decimal Price { get; set; }
 9     }
10 }

三添加 controller

 1 using ProductsApp.Models;
 2 using System;
 3 using System.Collections.Generic;
 4 using System.Linq;
 5 using System.Net;
 6 using System.Web.Http;
 7
 8 namespace ProductsApp.Controllers
 9 {
10     public class ProductsController : ApiController
11     {
12         Product[] products = new Product[]
13         {
14             new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
15             new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
16             new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
17         };
18
19         public IEnumerable<Product> GetAllProducts()
20         {
21             return products;
22         }
23
24         public IHttpActionResult GetProduct(int id)
25         {
26             var product = products.FirstOrDefault((p) => p.Id == id);
27             if (product == null)
28             {
29                 return NotFound();
30             }
31             return Ok(product);
32         }
33     }
34 }

这个controller中有两个返回产品列表的方法

1， GetAllProducts 返回的是IEnumerable<Product> 类型。

2， GetProduct 通过ID 来查找返回单个产品。

每个方法对应的URL分别是：

Method	URL
GetAllProducts	/api/products
GetProduct	/api/products/id

关于web api 的路由后续会有讲解。

然后创建一个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="http://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>

四运行程序

可以看到效果：显示所有的产品