ASP.NET Web API 入门示例详解

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

REST服务已经成为最新的服务端开发趋势,ASP.NET Web API即为.NET平台的一种轻量级REST架构.
ASP.NET Web API直接借鉴了ASP.NET MVC的设计，两者具有非常类似的编程模式。
ASP.NET Web API以Controller的形式来定义服务，而Controller中的Action方法则代表具体的操作。

以下示例展示一个轻量级的架构：{
Web前端：HTML+jQuery +KnockOut.js
服务端：ASP.NET Web API
通信协议：HTTP+JSON
}

服务定义:

public class ContactsController : ApiController
    {
        private static List<Contact> contacts = new List<Contact>
        {
            new Contact{
                Id="001",
                Name="张三",
                PhoneNo="123",
                EmailAddress="[email protected]"
            },
            new Contact{
                Id="002",
                Name="李四",
                PhoneNo="456",
                EmailAddress="[email protected]"
            }
        };

        // GET api/contacts
        public IEnumerable<Contact> Get()
        {
            return contacts;
        }

        // GET api/contacts/5
        public Contact Get(string id)
        {
            return contacts.FirstOrDefault(c => c.Id == id);
        }

        // POST api/contacts
        public void Post(Contact contact)
        {
            Delete(contact.Id);
            contacts.Add(contact);
        }

        // PUT api/contacts/5
        public void Put(Contact contact)
        {
            contact.Id = Guid.NewGuid().ToString();
            contacts.Add(contact);
        }

        // DELETE api/contacts/5
        public void Delete(string id)
        {
            Contact contact = contacts.FirstOrDefault(c => c.Id == id);
            contacts.Remove(contact);
        }
    }

服务调用:

1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>联系人列表</title>
  5     <script src="../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
  6     <script src="../Scripts/knockout-2.1.0.debug.js" type="text/javascript"></script>
  7 </head>
  8 <body>
  9     <div id="contacts">
10         <table>
11             <tr>
12                 <th>
13                     姓名
14                 </th>
15                 <th>
16                     电话号码
17                 </th>
18                 <th>
19                     Email地址
20                 </th>
21             </tr>
22             <tbody>
23                 
24                 <tr>
25                     <td data-bind="text:Name">
26                     </td>
27                     <td data-bind="text:PhoneNo">
28                     </td>
29                     <td>
30                         <input type="text" class="textbox long" data-bind="value:EmailAddress" />
31                     </td>
32                     <td>
33                         <a href="#" data-bind="click:$root.updateContact">修改</a> <a href="#" data-bind="click:$root.deleteContact">
34                             删除</a>
35                     </td>
36                 </tr>
37                 
38                 <tr data-bind="with:addedContact">
39                     <td>
40                         <input type="text" class="textbox" data-bind="value:Name" />
41                     </td>
42                     <td>
43                         <input type="text" class="textbox" data-bind="value:PhoneNo" />
44                     </td>
45                     <td>
46                         <input type="text" class="textbox long" data-bind="value:EmailAddress" />
47                     </td>
48                     <td>
49                         <a href="#" data-bind="click:$root.addContact">添加</a>
50                     </td>
51                 </tr>
52             </tbody>
53         </table>
54     </div>
55     <script type="text/javascript">
56         function ContactViewModel() {
57             self = this;
58             self.allContacts = ko.observableArray();
59             self.addedContact = ko.observable();
60
61             //加载联系人列表
62             self.loadContacts = function () {
63                 $.get("/api/contacts", null, function (data) {
64                     self.allContacts(data);
65                     var emptyContact = { Id: "", Name: "", PhoneNo: "", EmailAddress: "" };
66                     self.addedContact(emptyContact);
67                 });
68             };
69
70             //添加联系人
71             self.addContact = function (data) {
72                 if (!self.validate(data)) {
73                     return;
74                 }
75                 $.ajax({
76                     url: "/api/contacts/",
77                     data: self.addedContact(),
78                     type: "PUT",
79                     success: self.loadContacts
80                 });
81             };
82
83             //修改联系人信息
84             self.updateContact = function (data) {
85                 $.ajax({
86                     url: "/api/contacts/",
87                     data: data,
88                     type: "POST",
89                     success: self.loadContacts
90                 });
91             };
92
93             //删除联系人
94             self.deleteContact = function (data) {
95                 $.ajax({
96                     url: "/api/contacts/" + data.Id,
97                     type: "DELETE",
98                     success: self.loadContacts
99                 });
100             };
101
102             self.validate = function (data) {
103                 if (data.Name && data.PhoneNo && data.EmailAddress) {
104                     return true;
105                 }
106                 alert("请输入完整联系人信息!");
107                 return false;
108             }
109             self.loadContacts();
110         }
111         ko.applyBindings(new ContactViewModel());
112     </script>
113 </body>
114 </html>

View Code