关于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，代码如下：

<script type="text/javascript">

    $(document).ready(function () {

        // Send an AJAX request

        $.getJSON("api/products/",

        function (data) {

            // On success, 'data' contains a list of products.

            $.each(data, function (key, val) {

 

                // Format the text to display.

                var str = val.Name + ': $' + val.Price;

 

                // Add a list item for the product.

                $('<li/>', { text: str })    

                .appendTo($('#products'));  

            });

        });

    });

</script>

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

$(document).ready(function () {

　　$.getJSON("api/customers", Loadfun);

　　});

$.getJson方法中第一个参数是调用服务的地址，第二个参数是回调方法，这个回调方法Loadfun中，将展示服务端web api返回的数据，代码如下：

function Loadfun(data) {
    $("#customerTable").find("tr:gt(1)").remove();
    $.each(data, function (key, val) {
        var tableRow = '<tr>' + 
                        '<td>' + val.CustomerID + '</td>' +
                        '<td><input type="text" value="' + val.CompanyName + '"/></td>' +
                        '<td><input type="text" value="' + val.ContactName + '"/></td>' +
                        '<td><input type="text" value="' + val.Country + '"/></td>' +
                        '<td><input type="button" name="btnUpdate" value="Update" /> 
                             <input type="button" name="btnDelete" value="Delete" /></td>' + 
                        '</tr>';
        $('#customerTable').append(tableRow);
    });

    $("input[name='btnInsert']").click(OnInsert);
    $("input[name='btnUpdate']").click(OnUpdate);
    $("input[name='btnDelete']").click(OnDelete);
}

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

　　

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