你的位置:首页 > ASP.net教程

[ASP.net教程]Web APi入门之基本操作(一)

最近学习了下WebApi,WebApi是RESTful风格,根据请求方式决定操作。以博客的形式写出来,加深印象以及方便以后查看和复习。

1、首先我们使用VS创建一个空的WebApi项目

2、新建实体以及控制器类

1   public class Product2   {3     public int Id { set; get; }4     public string Name { set; get; }5     public string Description { set; get; }6   }

 1   public class HomeController : ApiController 2   { 3     static List<Product> modelList = new List<Product>() 4     { 5       new Product(){Id=1,Name="电脑",Description="电器"}, 6       new Product(){Id=2,Name="冰箱",Description="电器"}, 7     }; 8  9     //获取所有数据10     [HttpGet]11     public List<Product> GetAll()12     {13       return modelList;14     }15 16     //获取一条数据17     [HttpGet]18     public Product GetOne(int id)19     {20       return modelList.FirstOrDefault(p => p.Id == id);21     }22 23     //新增24     [HttpPost]25     public bool PostNew(Product model)26     {27       modelList.Add(model);28       return true;29     }30 31     //删除32     [HttpDelete]33     public bool Delete(int id)34     {35       return modelList.Remove(modelList.Find(p => p.Id == id));36     }37 38     //更新39     [HttpPut]40     public bool PutOne(Product model)41     {42       Product editModel = modelList.Find(p => p.Id == model.Id);43       editModel.Name = model.Name;44       editModel.Description = model.Description;45       return true;46     }47   }

3、新建html页面使用ajax操作

 1 <!DOCTYPE html> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5   <title>Demo</title> 6   <script src="http://www.cnblogs.com//Scripts/jquery-1.10.2.js"></script> 7   <script type="text/javascript"> 8     $(function () { 9       add();10       update();11       find();12       remove();13       getAll();14     });15     function getAll() {16       $.ajax({17         url: "api/Home/",18         type: 'GET',19         success: function (data) {20           console.log(data);21         }22       });23     }24 25     function find() {26       $.ajax({27         url: "api/Home/1",28         type: 'GET',29         success: function (data) {30           console.log(data);31         }32       });33     }34 35     function add() {36       $.ajax({37         url: "api/Home/",38         type: "POST",39         data: { "Id": "3", "Name": "电磁炉", "Description": "电器" },40         success: function (data) {41           console.log(data);42         }43       });44 45     }46 47     function update() {48       $.ajax({49         url: "api/Home/",50         type: 'PUT',51         data: { "id": "1", "Name": "洗衣机", "Description": "家具" },52         success: function (data) {53           console.log(data);54         }55       });56     }57 58     function remove() {59       $.ajax({60         url: "api/Home/1",61         type: 'DELETE',62         success: function (data) {63           console.log(data);64         }65       });66     }67   </script>68 </head>69 <body>70   <h1>WebApi基本操作</h1>71 </body>72 </html>

4、通过开发人员工具可以看到如下

WebApi默认是以

GlobalConfiguration.Configuration.Formatters.