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="",
                Name="张三",
                PhoneNo="",
                EmailAddress="zhangsan@gmail.com"
            },
            new Contact{
                Id="",
                Name="李四",
                PhoneNo="",
                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                 });
             };
 
             self.validate = function (data) {
                 if (data.Name && data.PhoneNo && data.EmailAddress) {
                     return true;
                 }
                 alert("请输入完整联系人信息!");
                 return false;
             }
             self.loadContacts();
         }
         ko.applyBindings(new ContactViewModel());
     </script>
 </body>
 </html>

ASP.NET Web API 入门示例详解的更多相关文章

  1. ASP.NET Web API 开篇示例介绍

    ASP.NET Web API 开篇示例介绍 ASP.NET Web API 对于我这个初学者来说ASP.NET Web API这个框架很陌生又熟悉着. 陌生的是ASP.NET Web API是一个全 ...

  2. 【ASP.NET Web API教程】1 ASP.NET Web API入门

    原文 [ASP.NET Web API教程]1 ASP.NET Web API入门 Getting Started with ASP.NET Web API第1章 ASP.NET Web API入门 ...

  3. 基于.Net Framework 4.0 Web API开发(2):ASP.NET Web APIs 参数传递方式详解

    概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.调用API过程中参数的传递是必须的,本节就来谈谈 ...

  4. ASP.net Web API综合示例

    目录 概述 功能介绍 程序结构 服务器端介绍 客户端介绍 “契约” Web API设计规则 并行写入冲突与时间戳 身份验证详解 Web API验证规则 客户端MVVM简介 Web.Config 本DE ...

  5. ASP.NET Web API 入门大杂烩

    [前言] 本文是大杂烩,意思即是:到处Copy再加一点点思考而混在一起的文章,引用来源因为太多太杂故而省略,望原作者原谅. [概述] ASP.NET Web API随ASP.NET MVC 4一起发行 ...

  6. ASP.NET Web API使用示例

    原文地址:https://blog.csdn.net/chinacsharper/article/details/21333311 上篇博客讲解rest服务开发时,曾经提到过asp.net mvc中的 ...

  7. C#版ASP.NET Web API使用示例

    为更好更快速的上手Webapi设计模式的接口开发,本文详细解释了在Web API接口的开发过程中,我们可能会碰到各种各样的问题总结了这篇,希望对大家有所帮助. 1:在接口定义中确定MVC的get或者P ...

  8. ASP.NET Web API 入门 (API接口、寄宿方式、HttpClient调用)

    一.ASP.NET Web API接口定义 ASP.NET Web API默认实现了Action方法和HTTP方法的映射,Action方法方法名体现了其能处理的请求必须采用的HTTP方法 二.寄宿方式 ...

  9. 【Web API系列教程】1.1 — ASP.NET Web API入门

    前言 HTTP不仅仅服务于web页面.同一时候也是构建暴露服务和数据的API的强大平台.HTTP有着简单.灵活和无处不在的特点.你能想到的差点儿全部平台都包括有一个HTTP库.所以HTTP服务能够遍及 ...

随机推荐

  1. Extract Stylish styles and save as JSON format

    Introduction Stylish is a easy browser extension/plugin for users to customizing the web page stylin ...

  2. 31、springmvc(注解)

    回顾什么是springmvc,它与spring有什么关系 springmvc属于spring框架的后续产品,用在基于MVC的表现层开发,类似于struts2框架 参见<<springmvc ...

  3. C# 中的"yield"使用

    yield是C#为了简化遍历操作实现的语法糖,我们知道如果要要某个类型支持遍历就必须要实现系统接口IEnumerable,这个接口后续实现比较繁琐要写一大堆代码才能支持真正的遍历功能.举例说明 usi ...

  4. linux Nginx VirtualHost虚拟主机多站点设置

    linux系统CentOS7 Nginx1.9.9 一台nginx服务器同一IP被注册多个不同域名,访问不同域名到该服务器后请求不同项目 本台nginx服务器的IP地址为 192.168.155.12 ...

  5. 2015年江西理工大学C语言程序设计竞赛(高级组)

    A 解法:DP+二分 dp[i]=max(dp[i],dp[j]+p[i].v)(i>j) dp[i]表示建立i点之后能够获得的最大值 int n,M; struct node { int l, ...

  6. Android ToolBar

    众所周知,在使用ActionBar的时候,一堆的问题:这个文字能不能定制,位置能不能改变,图标的间距怎么控制神马的,由此暴露出了ActionBar设计的不灵活.为此官方提供了ToolBar,并且提供了 ...

  7. iotop命令

    简介: iotop – simple top-like I/O monitor iotop是一个用来监视磁盘I/O使用状况的 top 类工具,可监测到哪一个程序使用的磁盘IO的信息(requires ...

  8. Spring RabbitMq

    spring-rabbitmq.xml文件内容如下: <?xml version="1.0" encoding="UTF-8"?><beans ...

  9. Hibernate的关联映射——双向1-N关联

    Hibernate的关联映射--双向1-N关联 对于1-N的关联,Hibernate推荐使用双向关联,而且不要让1的一端控制关联关系,而是用N的一端控制关联关系.双线的1-N关联和N-1关联是两种相同 ...

  10. js判断鼠标进入以及离开容器的方向

      (注:以下代码涉及到jQuery,建议前端大牛绕路~~~) 1.遇到的问题      如图当鼠标右箭头位置上下移动的时候  下面的城市列表容器不能隐藏. 2.方法: 网上搜了些前端大牛们的解决办法 ...