最近由于上层业务调整，将原来的MVC项目一分为三，将数据层提取出来，另新建一API项目、一类库项目
VS2013上新建WebAPI的时候会多一个区域Areas的文件夹，这个区域可以看成是一个mini的MVC项目，我向来本着技术不够，篇幅来凑的原则，来初步记录下API的基础，API和MVC还是有区别的，对于新手，比如我，狭隘的自认MVC主用户请求返回视图界面，API主用户请求返回数据。
一、建Web API 项目
1、建立Web API项目之后，在Model文件夹下建立实体数据模型
2、新建一控制器StudentController，写个根据学生ID返回学生对象的方法
public class StudentController : ApiController { IBCCEntities db = new IBCCEntities(); //返回学生信息集合 public IEnumerable<Student> AllStu() { return db.Student; } //根据学生ID查询学生信息 //根据路由规则 调用： api/Student/id public Student GetStuById(int id) { Student student = db.Student.FirstOrDefault(m => m.StudentID == id); return student; } }
3. 新建一视图，用来请求后台API数据
<script type="text/javascript"> $(document).ready(function () { $("#btnID").click(function () { var id = $("#txtID").val(); $.getJSON("/api/Student/" + id, function (data) { var html = "<ul>"; $(data).each(function (i, data) { html += "学号:" + data.StudentID + "<br/>"+"姓名:" + data.StudentName + "<br/>"+
"班级:"+ data.StudentClass +"<br/>"+"成绩:"+data.grade+"<br/>"+"入学时间："+data.updatetime+"<br/"; }); $("#contactID").html(html); }); }); }); </script>
只是一个最简单的Ajax调用后台，因为前台需要接收数据，所以后台Student控制器返回的学生数据对象，而不是视图
二、客户端跨域调用Web API
上文演示的前台发起请求，后台API返回数据，下面来介绍下 模拟客户端来调用API，另新建一MVC项目作为客户端，起始和上面前台界面相同，为了作比较，写一个ajax的底层用法
<script type="text/ecmascript"> $(function () { $("#btnID").click(function () { var id = $("#txtID").val(); $.ajax({ type: "GET", dataType: "json", url: "http://localhost:11308/api/Product/"+id, success: function (data) { var html = "<ul>"; $(data).each(function (i, item) { html += "学号:" + data.StudentID + "<br/>" + "姓名:" + data.StudentName + "<br/>" + "班级:" + data.StudentClass + "<br/>" + "成绩:" + data.grade + "<br/>" + "入学时间：" + data.updatetime + "<br/"; }); html += "</ul>"; $("#contbyId").html(html); }, error: function () { alert("發送失敗"); } }); }) }); </script>
而此时进行请求，发现浏览器会提示 加载失败，请求不被允许。
由于启动每个项目时，配置的端口号不同，所以调用API项目时，就产生的跨域，不是任何客户端都能得到服务端回执数据的，如果不在后台给客户端MVC项目的访问权限，客户端是接收不到服务端返回的数据，
处理方法：
1.在客户端添加一个类文件，将客户端的URL地址写进去
public class ProductFilter:System.Web.Http.Filters.ActionFilterAttribute { private const string Origin = "Origin"; private const string AccessControlAllowOrigin = "Access-Control-Allow-Origin"; private const string originHeaderdefault = "http://localhost:20630"; public override void OnActionExecuted( HttpActionExecutedContext actionExecutedContext) { actionExecutedContext.Response.Headers.Add(AccessControlAllowOrigin, originHeaderdefault); } }
2.把该类文件名放置StudentController方法上
//根据学生ID查询学生信息 //根据路由规则 调用： api/Student/id [StudentFiltet] public Student GetStuById(int id) { Student student = db.Student.FirstOrDefault(m => m.StudentID == id); return student; }
目前这样虽然能达到效果，但是我想如果有多个客户端来调用此服务端的API，那岂不是需要把所有客户端的URL加到服务端，实际上肯定不是这样，好的吧，这两天内容就学习到这里，后续的话，深入学习之后再寻求一实际解决方案
世人皆大笑，举手揶揄之
原文：http://www.cnblogs.com/Sientuo/p/6439455.html