ASP.NET Web API 入门示例详解
  1. REST服务已经成为最新的服务端开发趋势,ASP.NET Web API即为.NET平台的一种轻量级REST架构.
  2. ASP.NET Web API直接借鉴了ASP.NET MVC的设计，两者具有非常类似的编程模式。
  3. 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="zhangsan@gmail.com"
            },
            new Contact{
                Id="002",
                Name="李四",
                PhoneNo="456",
                EmailAddress="lisi@gmail.com"
            }
        };

        // 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                 <!-- ko foreach: allContacts -->
 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                 <!-- /ko -->
 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

 

 posted on 2016-06-15 16:48  heoo  阅读(466)  评论(0)  编辑  收藏  举报