引言
在公司中用到的都是webAPI的应用程序，这个东西之前没有接触过。但是这个并不是什么新鲜的东西，因我们之前有mvc的基础，所以说学习这个东西还是比较容易的，在开始的时候自己可能突然蒙圈了。因为在人家项目中用到的东西自己之前都没有接触过，感觉非常的陌生甚至整个混乱了。但是当我们静下心来好好想想的话是非常容易的，就是在某些写法上不太一样，其余的都差不多，下面就给大家创建第一个程序。创建一个Web API程序启动VS2012创建一个新项目，在已经安装的模板中选择 ASP.NET MVC4 Web API程序
在ASP.NET MVC项目对话框中选择Web API项，点击确定
创建成功之后工程中会自动添加一个Web API服务控制器，上面并附带访问地址
项目解决方案，选择Models文件夹右键 添加一个Model类
代码如下：
namespace Git.Framework.WebAPI.Models { public class Contact { public int ID { get; set; } public string Name { get; set; } public string Sex { get; set; } public DateTime Birthday { get; set; } public int Age { get; set; } } }
工程解决方案选择Controllers文件夹右键添加一个新的Web API controller
在添加控制器弹出对话框中选择模板： 空API控制器
控制器中添加如下代码：
namespace Git.Framework.WebAPI.Controllers { public class ContactController : ApiController { Contact[] contacts = new Contact[] { new Contact(){ ID=1, Age=23, Birthday=Convert.ToDateTime("1977-05-30"), Name="情缘", Sex="男"}, new Contact(){ ID=2, Age=55, Birthday=Convert.ToDateTime("1937-05-30"), Name="令狐冲", Sex="男"}, new Contact(){ ID=3, Age=12, Birthday=Convert.ToDateTime("1987-05-30"), Name="郭靖", Sex="男"}, new Contact(){ ID=4, Age=18, Birthday=Convert.ToDateTime("1997-05-30"), Name="黄蓉", Sex="女"}, }; /// <summary> /// /api/Contact /// </summary> /// <returns></returns> public IEnumerable<Contact> GetListAll() { return contacts; } /// <summary> /// /api/Contact/id /// </summary> /// <param name="id"></param> /// <returns></returns> public Contact GetContactByID(int id) { Contact contact = contacts.FirstOrDefault<Contact>(item=>item.ID==id); if (contact == null) { throw new HttpResponseException(HttpStatusCode.NotFound); } return contact; } /// <summary> /// 根据性别查询 /// /api/Contact?sex=女 /// </summary> /// <param name="sex"></param> /// <returns></returns> public IEnumerable<Contact> GetListBySex(string sex) { return contacts.Where(item => item.Sex == sex); } }}
浏览器访问API路径
Controller Methed |
URI |
GetListAll |
/api/Contact |
GetListBySex |
"/api/Contact?sex=" + sex |
GetContactByID |
/api/Contact/"+id |
在IE浏览器中浏览出现如下效果
如果在Chrome 或者 FireFox 中浏览会先下如下效果
Javascript访问Web API
在项目中添加一个About View视图
代码如下：
<span style="font-family:SimSun;font-size:18px;">@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>About</title> <script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script> <script type="text/ecmascript"> $(document).ready(function () { $("#btnAll").click(function () { $.getJSON("/api/Contact", function (data) { var html = "<ul>"; $(data).each(function (i, item) { html += "<li>"+item.ID+":"+item.Name+":"+item.Sex+"</li>"; }); html += "</ul>"; $("#contactAll").html(html); }); }); $("#btnID").click(function () { var id = $("#txtID").val(); $.getJSON("/api/Contact/"+id, function (data) { var html = "<ul>"; $(data).each(function (i, item) { html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>"; }); html += "</ul>"; $("#contactID").html(html); }); }); $("#btnSex").click(function () { var sex = $("#ddlSex").val(); $.getJSON("/api/Contact?sex=" + sex, function (data) { var html = "<ul>"; $(data).each(function (i, item) { html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>"; }); html += "</ul>"; $("#contactSex").html(html); }); }); }); </script> </head> <body> <p> <input type="button" id="btnAll" value="查询所有" /> </p> <p> <input type="text" id="txtID" name="txtID"/> <input type="button" id="btnID" value="根据ID查询" /> </p> <p> <select id="ddlSex" name="ddlSex"> <option value="男">男</option> <option value="女">女</option> </select> <input type="button" id="btnSex" value="根据性别查询" /> </p> <div id="contactAll"> </div> <div id="contactID"> </div> <div id="contactSex"> </div> </body> </html></span>
运行结果效果图
Web API总结
1.Web API 控制器(Controller) 继承ApiController
2. Api 的 Url Map： api/{controller}/{id} 每个"Action"是通过 Http谓词(GET/POST/PUT/DELETE)映射的
3.客户端可以通过 Http Header 的 Accept 指定返回数据的格式。默认是支持：appliction/xml 和application/json，当想返回比如 image/jpeg 这样的图片格式时，需要添加 MediaTypeFormatter 。比如：当指定某个 Task 时，通过指定 Accept : image/jpeg 获取该 Task 的图片信息。
