关于ASP.NET MVC4 Web API简单总结

记录一下这周研究 api相关知识，主要介绍 api 分类、创建、调用。特别感谢网上同仁提供的资料。

关于 web api 分类：

wcf web api 和 asp.net web api , 2012年2月微软已宣布 WCF和ASP.NET 团队合并，把WCF Web API的内容并入了ASP.NET Web API。

（详见：http://www.cnblogs.com/shanyou/archive/2012/03/11/2390672.html）

关于 web api 创建:

研发环境配置：

首先需要安装了ASP.NET MVC 4的 Visual Studio 。下面的用哪个都行：

Visual Studio 2012
Visual Studio 2010 且已安装 ASP.NET MVC 4。（需要安装vssp1补丁，耗时较长）

下面使用vs2010 为例，具体操作步骤：

第一：创建项目，选择 mvc4 web 应用程序

第二：在弹出的“新 ASP.NET MVC 4 项目”对话框中，选择“Web API”然后点“确定”。

第三：当你创建完项目以后，”新建项目“向导就自动创建了2个控制器。在解决方案资源管理器里展开”Controllers“目录就能看到了。

HomeController 是一个传统的 ASP.NET MVC 控制器。它只是负责处理站点的HTML页，跟Web API没有直接关系。
ValuesController 是一个示例 WebAPI 控制器。

解决方案资源管理里，右击 Controllers 目录，选择”添加“，”控制器“：并且选择控制器模版类型,如图：

第四：

控制器定义了三个方法，要么返回单个商品，要么返回一组产品：

GetAllProducts 方法返回所有的产品，返回类型为 IEnumerable<Product> 。
GetProductById 方法通过ID查询某个产品。

ok！web API已经能用了。每一个控制器上的方法都对应了一个URI：

关于 web api 调用：

第一种：从浏览器中访问WEB API

如：http://localhost:xxxx/api/products/. (将 "xxxx" 替换为真实的端口号)

第二种：用JavaScript和jQuery调用 Web API（注意：有时候 $ 识别需替换成JQuery）

（详见：http://tech.it168.com/a2012/0606/1357/000001357231_all.shtml）

在jQuery中，使用 JSONP 跨越数据传输方式，通过$.getJSON的方法获取服务器端数据。调用WEB API，代码如下：

实例一 Code

 1 <script type="text/javascript">
 2 
 3     $(document).ready(function () {
 4 
 5         // Send an AJAX request
 6 
 7         $.getJSON("api/products/",
 8 
 9         function (data) {
10 
11             // On success, 'data' contains a list of products.
12 
13             $.each(data, function (key, val) {
14 
15  
16 
17                 // Format the text to display.
18 
19                 var str = val.Name + ': $' + val.Price;
20 
21  
22 
23                 // Add a list item for the product.
24 
25                 $('<li/>', { text: str })    
26 
27                 .appendTo($('#products'));  
28 
29             });
30 
31         });
32 
33     });
34 
35 </script>

实例一经常使用的传统方式。

实例二 Code

 1 $(document).ready(function () {
 2 
 3 　　$.getJSON("api/customers", Loadfun);
 4 
 5 　　});
 6 
 7 $.getJson方法中第一个参数是调用服务的地址，第二个参数是回调方法，这个回调方法Loadfun中，将展示服务端web api返回的数据，代码如下：
 8 
 9 function Loadfun(data) {
10     $("#customerTable").find("tr:gt(1)").remove();
11     $.each(data, function (key, val) {
12         var tableRow = '<tr>' + 
13                         '<td>' + val.CustomerID + '</td>' +
14                         '<td><input type="text" value="' + val.CompanyName + '"/></td>' +
15                         '<td><input type="text" value="' + val.ContactName + '"/></td>' +
16                         '<td><input type="text" value="' + val.Country + '"/></td>' +
17                         '<td><input type="button" name="btnUpdate" value="Update" /> 
18                              <input type="button" name="btnDelete" value="Delete" /></td>' + 
19                         '</tr>';
20         $('#customerTable').append(tableRow);
21     });
22 
23     $("input[name='btnInsert']").click(OnInsert);
24     $("input[name='btnUpdate']").click(OnUpdate);
25     $("input[name='btnDelete']").click(OnDelete);
26 }

实例二中我们可以拼接html,给某个按钮注册事件，如同操作普通html一样。

总结：研究的时候，需要耐心去查询文献，必须耐心，当没有线索的时候，再坚持一下，也许奇迹就出现了。