Web API的初级使用

最近项目要做移动端，所以涉及到了对web api的使用，但是对于我来说这是一个新的东西，以前还没用过，所以在网上看了几篇博客之后根据例子学着写了个小demo，这边文章主要记录web api的简单的使用。

---

1. 打开vs新建项目（解决方案）

   操作步骤：
   1）
   
   2）
   
   3）这里我选择了空模版，添加web api引用
   

2. 添加Model
   进入到项目中，使用和mvc类似
   先添加数据模型，在文件夹Models中添加一个类，命名为ProductModel
   
   ProductModel代码如下：

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

1. 添加controller
   在Controllers下右键添加，选择Web API 空控制器，命名为ProductController
   
   ProductController代码如下：

//和MVC不同的是，Web API继承的是ApiController
 public class ProductsController : ApiController
    {
        //初始化一个新的ProductModel类型的数组，放入三条测试数据
        ProductModel[] products = new ProductModel[]
        {
            new ProductModel { Id = 1, Name = "土豆汤", Category = "汤", Price = 1 },
            new ProductModel { Id = 2, Name = "Yo-yo", Category = "呦呦", Price = 3.75M },
            new ProductModel { Id = 3, Name = "悍马", Category = "车", Price = 16.99M }
        };

        /// <summary>
        /// 得到所有的测试数据
        /// </summary>
        /// <returns></returns>
        public IEnumerable<ProductModel> GetAllProducts()
        {
            return products;
        }
        /// <summary>
        /// 根据id得到对应的测试数据
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public IHttpActionResult GetProduct(int id)
        {
            var product = products.FirstOrDefault((p) => p.Id == id);
            if (product == null)
            {
                return NotFound();
            }
            return Ok(product);
        }
    }

1. 测试
   在项目中添加一个html页面，在页面中进行ajax请求，观察是否返回预期结果

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

结果可得到后台写的测试数据

参考资料：
https://docs.microsoft.com/zh-cn/aspnet/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api
https://blog.csdn.net/zhoukun1008/article/details/52702007
http://cnblogs.com/developersupport/p/aspnet-webapi.html