关于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一样。

　　

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