Web APi入门之基本操作（一）

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

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

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

1     public class Product
2     {
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 xmlns="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="/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默认是以XML格式返回，但是一般我们需要返回Json，通过在Global.asax里的Application_Start方法中加上如下代码可以移除XML，让其只返回Json

GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear();

有一个需要注意的是，如果在参数写的是实体类，那么需要加上相应的特性(post、put请求不需要)，如下

 1         [HttpGet]
 2         public User Get([FromUri]User user)
 3         {
 4             return user;
 5         }

 

posted @ 2016-05-05 20:53  ZuQing  阅读(1623)  评论(0)  编辑  收藏  举报