WebAI入门

1、创建一个WebAPI

在这章中，你将使用asp.net web Api 创建一个WebApi 并返回一个产品列表。前段网页使用JQuery显示结果。
启动Visual Studio 并新建项目。在“模板”窗格中，选择“已安装的模板”并展开Visual C＃节点。在Visual C＃下，选择Web。在项目模板列表中，选择ASP.NET Web应用程序。将项目命名为“ProductsApp”，然后单击“确定”。

在asp.net Project 新对话框中，选择Empty模板。

注意：你可以使用Web Api模板创建一个Web API项目。WebAPI模板使用了ASP.NET MVC提供API帮助页面。本教程将使用空模板，因为我想显示没有MVC的Web API.一般来说，你不需要知道ASP.NET MVC使用了WebAPI.

2、添加一个Model

模型是表示应用程序中的数据的对象。ASP.NET Web API可以自动将你的模型序列化成JSON、XML或者其他格式，然后将序列化数据写入HTTP响应消息的正文。只要客户端可以读取到序列化的格式，它可以反序列化对象。大多数客户端可以解析XML和JSON。因此，客户端可以通过在HTTP请求消息中设置Accept头来只是所需要的格式
我们先来创建一个代表产品的简单模型。

名字是Product. 为Product类添加下列属性。

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; }

    }
}

在Web API中，控制器是处理HTTP请求的对象。我们将添加一个控制器，可以返回产品列表活由ID指定的单个产品。

如果你使用ASP.NET MVC ,你已经熟悉了控制器。Web API控制器与MVC控制器类似，但继承了APIController类而不是Controller类。

在解决方案中选择一个Controllers文件夹选择右击并添加Controller ，在弹出的脚手架对话框，选择Web API Controller-Empty 点击添加。

打开这个文件，用下列代码替换

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);
        }
    }
}

控制器定义了返回产品的两种方式：

控制器定义了返回产品的两种方法：
•GetAllProducts方法以IEnumerable <Product>类型的形式返回整个产品列表。
•GetProduct方法通过其ID来查找单个产品。

你的webapi可以工作额，控制器上的每个方法对应一个和多个URL：

Controller Method	URI
GetAllProducts	/api/products
GetProduct	/api/products/id

对于GetProduct方法，URI中的id是占位符。例如，要获得ID为5的产品，URI为api/products/5

4、调用webapi使用javascript和JQuery

在本章中，我们将添加一个使用AJAX调用的WebAPI的HTML页面。我们使用JQUERT进行AJAX调用，而且还可以进行结果更新页面。在解决方案中添加下面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>

4.1 获取产品列表

获取产品列表，发送HTTP GET请求到"/api/products". JQuery getJSON函数发送一个Ajax请求。对于响应包含JSON对象的数组。done函数指定如果成功，则调用该函数。
在回调中，我们使用产品信息更新DOM对象。

    $(document).ready(function () {
    // Send an AJAX request
    $.getJSON(apiUrl)
        .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'));
            });
        });
});

　　4.2 根据ID获取指定产品

　要通过ID获取产品，请将HTTP GET请求发送到“/api/products/id”，其中id是产品ID。我们仍然调用getJSON发送AJAX请求，但是这次我们把ID放在请求URI中。此请求的响应是单个产品的JSON表示。

 function find() {
    var id = $('#prodId').val();
    $.getJSON(apiUrl + '/' + id)
        .done(function (data) {
            $('#product').text(formatItem(data));
        })
        .fail(function (jqXHR, textStatus, err) {
            $('#product').text('Error: ' + err);
        });
	}

到此为止一个简单的API完成了，并通过客户端调用实现数据的展示。

我们运行应用程序：