ASP.NET Web API 2 入门教程
http不仅提供web页面服务,在构建公开服务和数据api方面,它也是一个强大的平台。http简单、灵活、无处不在。几乎你能想到的所有的平台,都有一个http库,因此http服务可以影响到广泛的客户端,包括、移动设备,和传统的桌面应用程序。
asp.net web api是一个基于.net框架用于构建web api的框架。在本教程中,您将使用asp.net web api创建一个web api并返回一个产品列表。
本教程中开发工具及环境版本:
visual studio 2015 update 2 web api 2创建一个web api项目
在本教程中,将使用 asp.net web api 创建一个web api项目返回一个产品列表。前端web页面使用jquery来显示结果。
启动visual studio,在开始界面选择新建新项目或者从文件菜单选择:新建-项目。喎? f/ware/vc/"="" target="_blank" class="keylink">vcd4ncjxwpttaxkow5dkz0ahu8ao60tgwstewlcsjsoutvmlzdwfsiemjlvdlyqgjpgjyic8+dqru2s/uxl/eo7dltctb0lht1tcjrngh1pfbu1autkvuv2vi06btw7pm0pkhozxiciavpg0kz+7ev8p7s8ajuizszhf1bztwcm9kdwn0c2fwcczyzhf1bzuyorwlu/cmbgrxdw87yle2qczyzhf1bzuhozwvcd4ncjxwpjxpbwcgywx0pq=="这里写图片描述" src="/uploadfile/collfiles/20160519/20160519093240793.png" title="\" />
在新建new asp.net 项目对话框,选择空模板。为以下相添加文件夹和核心引用,选择:web api。点击确定。
您也可以使用“web api”模板创建一个web api项目。
web api模板使用asp.net mvc提供api帮助页面。在本教程中我用空模板,因为我不想使用mvc来演示web api。一般来说,你使用mvc web api不需要知道asp.net mvc。
添加model
模型是一个表示应用程序中数据的对象。asp.net web api可以自动序列化你的模型为json,xml或其他格式,然后将序列化后的数据填充到http响应消息体。
只要客户端可以读取序列化格式,它可以对对象进行反序列化。大多数客户端都能够解析xml或json。此外,客户端可以声明它希望通过在http请求的accept报头格式(即web api支持格式协商,客户端可以通过accept header通知服务器期望的格式)。
让我们从创建一个代表产品的简单模型。
如果“解决方案资源管理器”已不可见,请单击“视图”菜单并选择“解决方案资源管理器”。
在“解决方案资源管理器”中,右键单击“models ”文件夹。从上下文菜单中,选择“添加”然后选择“类”:
将类命名为:product,添加以下属性到product类中:
namespace productsapp.models { public class product { public int id { get; set; } public string name { get; set; } public string category { get; set; } public decimal price { get; set; } } }
添加controller
在web api,控制器(controller)是一个处理http请求的对象。我们将添加一个可以返回产品列表或指定id的单个产品的控制器。
如果你之前用过asp.net mvc,那么你应该已经熟悉了控制器。web api控制器类似mvc控制器,但是继承apicontroller类而不是controller类。
在解决方案资源管理器中,右键单击controllers 文件夹。选择add然后选择控制器。
在添加基架对话框中,选择 web api controller - empty。单击添加。
再添加控制器界面,输入:productscontroller,点击 添加:
你不需要把你的控制器添加到一个命名为控制器文件夹。文件夹的名字仅仅是为了方便组织你的源文件。
如果这个文件没有打开,双击该文件以打开它。用以下代码替换该文件中的代码:
using productsapp.models; using system; using system.collections.generic; using system.linq; using system.net; using system.net.http; using system.web.http; namespace productsapp.controllers { public class productscontroller : apicontroller { product[] products = new product[] { new product { id = 1, name = "tomato soup", category = "groceries", price = 1 }, new product { id = 2, name = "yo-yo", category = "toys", price = 3.75m }, new product { id = 3, name = "hammer", category = "hardware", price = 16.99m } }; // get api/products public ienumerablegetallproducts() { return products; } // get api/products/id public ihttpactionresult getproduct(int id) { var product = products.firstordefault((p) => p.id == id); if (product == null) { return notfound(); } return ok(product); } } }
为了使示例尽量简单,产品存储在控制器类的一个固定的数组内。当然,在真实的应用程序中,您将查询或使用其他一些外部数据源。
控制器定义了两个方法,该方法返回产品:
控制器上的每个方法对应于一个或多个uri:
controller method | uri |
---|---|
getallproducts | /api/products |
getproduct | /api/products/id |
有关如何使用web api的http请求路由到控制器方法的更多信息,参见asp.net web api路由。
拓展:
http 的四个主要方法 (get, put, post, delete) 按照下列方式映射为 curd 操作:
通过javascript和jquery调用web api
在这一部分中,我们将添加一个html页面,使用ajax调用web api。我们将使用jquery的ajax调用进行和更新结果页面。
在“解决方案资源管理器”中,右键单击该项目并选择“添加”,然后选择“新建项”。
在添加新项对话框中,选择visual c#节点下的web节点,然后选择html页面项。新建名字为“index . html”的页面。
将index . html文件中的内容用一下代码替换:
all products
search by id
<script src="http://ajax.netcdn.com/ajax/jquery/jquery-2.0.3.min.js"></script><script>
var uri = 'api/products';
$(document).ready(function () {
// send an ajax request
$.getjson(uri)
.done(function (data) {
// on success, 'data' contains a list of products.
$.each(data, function (key, item) {
// add a list item for the product.
$('', { text: formatitem(item) }).appendto($('#products'));
});
});
});
function formatitem(item) {
return item.name + ': $' + item.price;
}
function find() {
var id = $('#prodid').val();
$.getjson(uri + '/' + id)
.done(function (data) {
$('#product').text(formatitem(data));
})
.fail(function (jqxhr, textstatus, err) {
$('#product').text('error: ' + err);
});
}
</script>
有几种方法可以得到jquery。在这个例子中,我使用了微软的ajax cdn。你也可以从下载它,asp.net “web api”项目模板中也包含jquery。
获取产品列表
发送一个http get请求到“/ api /products”,得到一个产品列表。
jquery getjson函数发送一个ajax请求。为响应包含json对象的数组。done函数挂了一个请求成功时的回调。在回调函数中通过产品信息更新dom。
$(document).ready(function () { // send an ajax request $.getjson(apiurl) .done(function (data) { // on success, 'data' contains a list of products. $.each(data, function (key, item) { // add a list item for the product. $('
', { text: formatitem(item) }).appendto($('#products')); }); }); });
通过id获取产品
通过发送一个http get请求到“/api/products/id”获取产品(id是产品id)。
function find() { var id = $('#prodid').val(); $.getjson(apiurl + '/' + id) .done(function (data) { $('#product').text(formatitem(data)); }) .fail(function (jqxhr, textstatus, err) { $('#product').text('error: ' + err); }); }
我们仍然调用getjson发送ajax请求,但这一次我们把id拼接到请求uri里面了。该请求的响应是一个用json表示的产品。
运行应用程序
按f5启动应用调试。网页应该看起来如下:
通过产品id获取产品,输入id点击search:
如果你输入无效的id,服务端将返回一个http error:
拓展:
对于每一个 http 消息, asp.net web api 框架通过路由表决定由哪个控制器处理请求。 当你创建一个新的 web api 项目时, 将会包含一个类似这样的一个默认的路由:
/api/{controller}/{id}
{controller} 和 {id} 是两个占位符, 当遇到一个符合这种样式的 uri , 将将会开始寻找合适的控制器方法进行调用, 规则如下:
{controller} 用来与控制器名称像匹配; http 请求的方法用来与方法名称匹配; (本规则只适用于 get, post, put 和 delete) {id} , 如果有, 将会用于和方法的 id 参数进行匹配;查看http请求和响应
原文是以ie为例讲解的,此处以mozilla firefox浏览器讲解。
现在回到网页并按f5键刷新网页。mozilla firefox将捕获浏览器和web服务器之间的http流量。概要视图显示一个页面的所有网络流量:
如果你点击“json”选项卡,你可以看到产品列表是如何被序列化成json。
喎?>
推荐阅读
-
或许是你应该了解的一些 ASP.NET Core Web API 使用小技巧
-
ASP.NET Web Api 2实现多文件打包并下载文件的实例
-
详解ASP.NET WEB API 之属性路由
-
通过HttpClient 调用ASP.NET Web API示例
-
剖析Asp.Net Web API路由系统---WebHost部署方式
-
asp.net Web Services上传和下载文件(完整代码)第1/2页
-
Asp.net Web Api实现图片点击式图片验证码功能
-
ASP.NET第一次访问慢的解决方法(MVC,Web Api)
-
ASP.NET Web API 2 的返回结果
-
ASP.NET Core Web API 最佳实践指南