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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值