使用ASP.NET Web API构建RESTful API
近年来，很明显，HTTP不仅仅是为了提供HTML页面。它也是构建Web API的强大平台，使用少量动词（GET，POST等）加上一些简单的概念，如URI和头文件。ASP.NET Web API是一组简化HTTP编程的组件。因为它构建在ASP.NET MVC运行时之上，Web API自动处理HTTP的低级传输细节。同时，Web API自然地暴露了HTTP编程模型。事实上，Web API的一个目标是不要抽象出HTTP的现实。因此，Web API既灵活又易于扩展。在这个动手实验中，您将使用Web API为联系人管理器应用程序构建一个简单的REST API。您还将构建一个客户端来使用API。REST架构风格已被证明是利用HTTP的有效方法 - 尽管它当然不是唯一有效的HTTP方法。联系人经理将公开RESTful列表，添加和删除联系人等。此实验室需要对HTTP，REST的基本了解，并假设您具有HTML，JavaScript和jQuery的基本工作知识。
注意
ASP.NET网站在[https://asp.net/web-api](https://asp.net/web-api）上专用于ASP.NET Web API框架）。该网站将继续提供与Web API相关的最新信息，示例和新闻，如果您想深入了解创建可用于任何设备或开发框架的自定义Web API的技术，请经常检查。
与ASP.NET MVC 4类似的ASP.NET Web API在将服务层与控制器分离方面具有很大的灵活性，允许您很容易地使用几个可用的依赖注入框架。在MSDN中有一个很好的示例，显示了如何在ASP.NET Web API项目中使用Ninject进行依赖注入，您可以从这里下载它。
所有示例代码和代码段都包含在Web Camps培训工具包中，可从https://go.microsoft.com/fwlink/?LinkID=248297&clcid=0x409获取。
目标
在这个动手实验中，您将学习如何：
实现RESTful Web API
从HTML客户端调用API
先决条件
完成此动手实验室需要以下内容：
适用于Web或上级的Microsoft Visual Studio Express 2012（有关如何安装的说明，请参阅附录B）。
建立
安装代码片段
为方便起见，您将在本实验中管理的大部分代码可用作Visual Studio代码片段。要安装代码片段运行。\ Source \ Setup \ CodeSnippets.vsi文件。
如果您不熟悉Visual Studio代码片段，并想了解如何使用它们，可以参考本文档“ 附录A：使用代码段 ”中的附录。
演习
这个动手实验室包括以下练习：
练习1：创建只读Web API
练习2：创建一个读/写Web API
练习3：从HTML客户端使用Web API
注意
每个练习都附带一个End文件夹，其中包含您在完成练习后应获得的最终解决方案。如果您需要额外的帮助，您可以使用此解决方案作为指导。
预计完成本实验的时间：60分钟。
练习1：创建只读Web API
在本练习中，您将为联系人管理器实现只读GET方法。
任务1 - 创建API项目
在此任务中，您将使用新的ASP.NET Web项目模板来创建Web API Web应用程序。
运行Visual Studio 2012 Express for Web，执行此操作转到“ 开始”，然后键入VS Express for Web，然后按Enter键。
从文件菜单中，选择新建项目。选择Visual C＃| Web项目类型从项目类型树视图，然后选择ASP.NET MVC 4 Web应用程序项目类型。将项目的名称设置为ContactManager，并将解决方案名称设置为开始，然后单击确定。
创建一个新的ASP.NET MVC 4.0 Web应用程序项目
在ASP.NET MVC 4项目类型对话框中，选择Web API项目类型。单击确定。
指定Web API项目类型
任务2 - 创建Contact Manager API控制器
在此任务中，您将创建API方法所在的控制器类。
删除文件名为ValuesController.cs内控制器从项目文件夹。
右键单击项目中的Controllers文件夹，然后选择Add | 控制器从上下文菜单。
在项目中添加一个新的控制器
在显示的添加控制器对话框中，从模板菜单中选择空API控制器。命名控制器类ContactController。然后，单击添加。
使用添加控制器对话框创建一个新的Web API控制器
将以下代码添加到ContactController中。
（代码片段 - Web API实验室 - Ex01 - 获取API方法）
C＃
复制
public string[] Get()
{
return new string[]
{
"Hello",
"World"
};
}
按F5调试应用程序。出现Web API项目的默认主页。
ASP.NET Web API应用程序的默认主页
在Internet Explorer窗口中，按F12键打开“ 开发工具”窗口。单击网络选项卡，然后单击开始捕获按钮开始捕获到窗口中的网络流量。
打开网络选项卡并启动网络捕获
使用/ api / contact在浏览器的地址栏中附加URL，然后按Enter键。传输详细信息将显示在网络捕获窗口中。请注意，响应的MIME类型是application / json。这演示了默认输出格式如何是JSON。
在网络视图中查看Web API请求的输出
注意
此时Internet Explorer 10的默认行为将是询问用户是否希望保存或打开Web API调用产生的流。输出将是包含Web API URL调用的JSON结果的文本文件。不要取消对话框，以便能够通过开发人员工具窗口来观看响应的内容。
点击转到详细视图按钮查看有关此API调用的响应的更多详细信息。
切换到详细视图
单击“ 响应体”选项卡以查看实际的JSON响应文本。
查看网络监视器中的JSON输出文本
任务3 - 创建联系人模型并增加联系人控制器
在此任务中，您将创建API方法所在的控制器类。
右键单击Models文件夹，然后选择Add | 类...从上下文菜单。
向Web应用程序添加新模型
在“ 添加新项目”对话框中，命名新文件Contact.cs，然后单击“ 添加”。
创建新的联系人类文件
将以下突出显示的代码添加到Contact类中。
（代码片段 - Web API实验室 - Ex01 - 联系课）
复制
[!code-csharp[Main](build-restful-apis-with-aspnet-web-api/samples/sample2.cs)]
In the ContactController class, select the word string in method definition of the Get method, and type the word Contact. Once the word is typed in, an indicator will appear at the beginning of the word Contact. Either hold down the Ctrl key and press the period (.) key or click the icon using your mouse to open up the assistance dialog in the code editor, to automatically fill in the using directive for the Models namespace.
Using Intellisense assistance for namespace declarations
Modify the code for the Get method so that it returns an array of Contact model instances.
(Code Snippet - Web API Lab - Ex01 - Returning a list of contacts)
C#
Copy
public Contact[] Get()
{
return new Contact[]
{
new Contact
{
Id = 1,
Name = "Glenn Block"
},
new Contact
{
Id = 2,
Name = "Dan Roth"
}
};
}
Press F5 to debug the web application in the browser. To view the changes made to the response output of the API, perform the following steps.
Once the browser opens, press F12 if the developer tools are not open yet.
Click the Network tab.
Press the Start Capturing button.
Add the URL suffix /api/contact to the URL in the address bar and press the Enter key.
Press the Go to detailed view button.
选择响应体选项卡。您应该看到一个JSON字符串，表示Contact实例数组的序列化形式。
JSON序列化输出复杂的Web API方法调用
任务4 - 将功能提取到服务层
此任务将演示如何将功能提取到服务层，以便开发人员轻松将其服务功能与控制器层分开，从而实现实际执行的服务的可重用性。
在解决方案root中创建一个新文件夹，并将其命名为Services。为此，右键单击ContactManager项目，选择添加 | 新建文件夹，将其命名为服务。
创建服务文件夹
右键单击“ 服务”文件夹，然后选择“ 添加” 类...从上下文菜单。
向Services文件夹添加一个新类
当出现添加新项目对话框时，命名新类ContactRepository，然后单击添加。
创建一个类文件以包含Contact Repository服务层的代码
将一个using指令添加到ContactRepository.cs文件以包含模型命名空间。
复制
[!code-csharp[Main](build-restful-apis-with-aspnet-web-api/samples/sample4.cs)]
将以下突出显示的代码添加到ContactRepository.cs文件中以实现GetAllContacts方法。
（代码段 - Web API实验室 - Ex01 - Contact Repository）
C＃
复制
public class ContactRepository
{
public Contact[] GetAllContacts()
{
return new Contact[]
{
new Contact
{
Id = 1,
Name = "Glenn Block"
},
new Contact
{
Id = 2,
Name = "Dan Roth"
}
};
}
}
Open the ContactController.cs file if it is not already open.
Add the following using statement to the namespace declaration section of the file.
Copy
[!code-csharp[Main](build-restful-apis-with-aspnet-web-api/samples/sample6.cs)]
Add the following highlighted code to the ContactController.cs class to add a private field to represent the instance of the repository, so that the rest of the class members can make use of the service implementation.
(Code Snippet - Web API Lab - Ex01 - Contact Controller)
C#
Copy
public class ContactController : ApiController
{
private ContactRepository contactRepository;
public ContactController()
{
this.contactRepository = new ContactRepository();
}
...
}
Change the Get method so that it makes use of the contact repository service.
(Code Snippet - Web API Lab - Ex01 - Returning a list of contacts via the repository)
C#
Copy
public Contact[] Get()
{
return contactRepository.GetAllContacts();
}
Put a breakpoint on the ContactController's Get method definition.
Adding breakpoints to the contact controller
Press F5 to run the application.
When the browser opens, press F12 to open the developer tools.
Click the Network tab.
Click the Start Capturing button.
Append the URL in the address bar with the suffix /api/contact and press Enter to load the API controller.
Visual Studio 2012 should break once Get method begins execution.
Breaking within the Get method
Press F5 to continue.
如果尚未对焦，请返回到Internet Explorer。注意网络捕获窗口。
Internet Explorer中的网络视图显示Web API调用的结果
单击转到详细视图按钮。
单击响应体选项卡。请注意API调用的JSON输出，以及它如何表示由服务层检索的两个联系人。
在开发人员工具窗口中查看Web API中的JSON输出
练习2：创建一个读/写Web API
在本练习中，您将为联系人管理员实施POST和PUT方法，使其具有数据编辑功能。
任务1 - 打开Web API项目
在此任务中，您将准备增强在练习1中创建的Web API项目，以便它可以接受用户输入。
运行Visual Studio 2012 Express for Web，执行此操作转到“ 开始”，然后键入VS Express for Web，然后按Enter键。
打开位于Source / Ex02-ReadWriteWebAPI / Begin /文件夹的Begin解决方案。否则，您可以继续使用通过完成上一个练习获得的最终解决方案。
如果您打开提供的Begin解决方案，则需要在继续之前下载一些缺少的NuGet软件包。为此，单击项目菜单并选择管理NuGet软件包。
在“ 管理NuGet软件包”对话框中，单击“恢复”，以便下载丢失的软件包。
最后，单击Build | 构建解决方案 生成解决方案。
注意
使用NuGet的优点之一是您不必在项目中运送所有库，从而减少了项目的大小。使用NuGet电动工具，通过在Packages.config文件中指定软件包版本，您可以在首次运行项目时下载所有必需的库。这就是为什么在打开本实验室的现有解决方案之后，您必须运行这些步骤。
打开Services / ContactRepository.cs文件。
任务2 - 将数据持久性功能添加到联系人库实现
在此任务中，您将扩展在练习1中创建的Web API项目的ContactRepository类，以便它可以持久化并接受用户输入和新的Contact实例。
将以下常量添加到ContactRepository类以在本练习中稍后表示Web服务器缓存项目键名称的名称。
C＃
复制
private const string CacheKey = "ContactStore";
向包含以下代码的ContactRepository添加构造函数。
（代码片段 - Web API实验室 - Ex02 - 联系人存储库构造函数）
C＃
复制
public ContactRepository()
{
var ctx = HttpContext.Current;
if (ctx != null)
{
if (ctx.Cache[CacheKey] == null)
{
var contacts = new Contact[]
{
new Contact
{
Id = 1, Name = "Glenn Block"
},
new Contact
{
Id = 2, Name = "Dan Roth"
}
};
ctx.Cache[CacheKey] = contacts;
}
}
}
修改GetAllContacts方法的代码，如下所示。
（代码片段 - Web API实验室 - Ex02 - 获取所有联系人）
C＃
复制
public Contact[] GetAllContacts()
{
var ctx = HttpContext.Current;
if (ctx != null)
{
return (Contact[])ctx.Cache[CacheKey];
}
return new Contact[]
{
new Contact
{
Id = 0,
Name = "Placeholder"
}
};
}
注意
This example is for demonstration purposes and will use the web server's cache as a storage medium, so that the values will be available to multiple clients simultaneously, rather than use a Session storage mechanism or a Request storage lifetime. One could use Entity Framework, XML storage, or any other variety in place of the web server cache.
Implement a new method named SaveContact to the ContactRepository class to do the work of saving a contact. The SaveContact method should take a single Contact parameter and return a Boolean value indicating success or failure.
(Code Snippet - Web API Lab - Ex02 - Implementing the SaveContact Method)
C#
Copy
public bool SaveContact(Contact contact)
{
var ctx = HttpContext.Current;
if (ctx != null)
{
try
{
var currentData = ((Contact[])ctx.Cache[CacheKey]).ToList();
currentData.Add(contact);
ctx.Cache[CacheKey] = currentData.ToArray();
return true;
}
catch (Exception ex)
{
Console.WriteLine(ex.ToString());
return false;
}
}
return false;
}
Exercise 3: Consume the Web API from an HTML Client
In this exercise, you will create an HTML client to call the Web API. This client will facilitate data exchange with the Web API using JavaScript and will display the results in a web browser using HTML markup.
Task 1 - Modifying the Index View to Provide a GUI for Displaying Contacts
In this task, you will modify the default Index view of the web application to support the requirement of displaying the list of existing contacts in an HTML browser.
Open Visual Studio 2012 Express for Web if it is not already open.
Open the Begin solution located at Source/Ex03-ConsumingWebAPI/Begin/ folder. Otherwise, you might continue using the End solution obtained by completing the previous exercise.
如果您打开提供的Begin解决方案，则需要在继续之前下载一些缺少的NuGet软件包。为此，单击项目菜单并选择管理NuGet软件包。
在“ 管理NuGet软件包”对话框中，单击“恢复”，以便下载丢失的软件包。
最后，单击Build | 构建解决方案 生成解决方案。
注意
使用NuGet的优点之一是您不必在项目中运送所有库，从而减少了项目的大小。使用NuGet电动工具，通过在Packages.config文件中指定软件包版本，您可以在首次运行项目时下载所有必需的库。这就是为什么在打开本实验室的现有解决方案之后，您必须运行这些步骤。
打开位于Views / Home文件夹的Index.cshtml文件。
用id body替换div元素中的HTML代码，使其看起来像以下代码。
复制
[!code-html[Main](build-restful-apis-with-aspnet-web-api/samples/sample13.html)]
在文件底部添加以下Javascript代码，以执行对Web API的HTTP请求。
复制
[!code-cshtml[Main](build-restful-apis-with-aspnet-web-api/samples/sample14.cshtml)]
打开ContactController.cs文件（如果尚未打开）。
在ContactController类的Get方法上放置一个断点。
在API控制器的Get方法上放置一个断点
按F5运行项目。浏览器将加载HTML文档。
注意
确保您正在浏览应用程序的根URL。
一旦页面加载并且JavaScript执行，断点将被击中，代码执行将在控制器中暂停。
使用Visual Studio 2012 Express for Web调试Web API调用
删除断点，然后按F5或调试工具栏的“ 继续”按钮继续在浏览器中加载视图。Web API调用完成后，您将看到从Web API调用返回的联系人显示为浏览器中的列表项。
作为列表项显示在浏览器中的API调用结果
停止调试
任务2 - 修改索引视图以提供用于创建联系人的GUI
在此任务中，您将继续修改MVC应用程序的索引视图。一个表单将添加到HTML页面中，该页面将捕获用户输入并将其发送到Web API以创建新的联系人，并且将创建一个新的Web API控制器方法以从GUI收集日期。
打开ContactController.cs文件。
向名为Post的控制器类添加一个新方法，如下面的代码所示。
（代码段 - Web API实验室 - Ex03 - Post方法）
复制
[!code-csharp[Main](build-restful-apis-with-aspnet-web-api/samples/sample15.cs)]
如果Visual Studio中尚未打开，请打开Index.cshtml文件。
将下面的HTML代码添加到上一个任务中添加的无序列表之后的文件中。
复制
[!code-html[Main](build-restful-apis-with-aspnet-web-api/samples/sample16.html)]
在文档底部的脚本元素中，添加以下突出显示的代码来处理按钮单击事件，这将使用HTTP POST调用将数据发布到Web API。
HTML
复制
在ContactController.cs中，在Post方法上放置一个断点。
按F5在浏览器中运行应用程序。
页面在浏览器中加载后，输入新的联系人姓名和ID，然后单击保存按钮。
在浏览器中加载的客户端HTML文档
当Post方法中的调试器窗口中断时，请查看contact参数的属性。这些值应与您在表单中输入的数据相匹配。
Contact对象从客户端发送到Web API
在调试器中遍历方法，直到创建响应变量。在调试器的“ 本地”窗口中进行检查后，您将看到所有属性都已设置。
在调试器中创建后的响应
如果按F5或在调试器中单击继续，则请求将完成。一旦您切换回浏览器，新的联系人已被添加到由ContactRepository实现存储的联系人列表中。
浏览器反映了新的联系人实例的成功创建
注意
此外，您可以将此应用程序部署到Azure，方法如下：附录C：使用Web Deploy发布ASP.NET MVC 4应用程序。
概要
This lab has introduced you to the new ASP.NET Web API framework and to the implementation of RESTful Web APIs using the framework. From here, you could create a new repository that facilitates data persistence using any number of mechanisms and wire that service up rather than the simple one provided as an example in this lab. Web API supports a number of additional features, such as enabling communication from non-HTML clients written in any language that supports HTTP and JSON or XML. The ability to host a Web API outside of a typical web application is also possible, as well as is the ability to create your own serialization formats.
The ASP.NET Web site has an area dedicated to the ASP.NET Web API framework at [https://asp.net/web-api](https://asp.net/web-api). This site will continue to provide late-breaking information, samples, and news related to Web API, so check it frequently if you'd like to delve deeper into the art of creating custom Web APIs available to virtually any device or development framework.
Appendix A: Using Code Snippets
With code snippets, you have all the code you need at your fingertips. The lab document will tell you exactly when you can use them, as shown in the following figure.
Using Visual Studio code snippets to insert code into your project
To add a code snippet using the keyboard (C# only)
Place the cursor where you would like to insert the code.
Start typing the snippet name (without spaces or hyphens).
Watch as IntelliSense displays matching snippets' names.
Select the correct snippet (or keep typing until the entire snippet's name is selected).
Press the Tab key twice to insert the snippet at the cursor location.
Start typing the snippet name
Press Tab to select the highlighted snippet
Press Tab again and the snippet will expand
To add a code snippet using the mouse (C#, Visual Basic and XML)
Right-click where you want to insert the code snippet.
Select Insert Snippet followed by My Code Snippets.
Pick the relevant snippet from the list, by clicking on it.
Right-click where you want to insert the code snippet and select Insert Snippet
Pick the relevant snippet from the list, by clicking on it
Appendix B: Installing Visual Studio Express 2012 for Web
You can install Microsoft Visual Studio Express 2012 for Web or another "Express" version using the Microsoft Web Platform Installer. The following instructions guide you through the steps required to install Visual studio Express 2012 for Web using Microsoft Web Platform Installer.
Go to [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Alternatively, if you already have installed Web Platform Installer, you can open it and search for the product "Visual Studio Express 2012 for Web with Azure SDK".
点击立即安装。如果您没有Web平台安装程序，您将被重定向下载并首先安装。
一旦Web平台安装程序打开后，点击安装，开始安装。
安装Visual Studio Express
阅读所有产品的许可证和条款，然后单击我接受以继续。
接受许可条款
等待下载和安装过程完成。
安装进度
安装完成后，单击完成。
安装完成
单击退出以关闭Web平台安装程序。
要打开Visual Studio Express for Web，请转到“ 开始”屏幕并开始编写“ VS Express ”，然后单击VS Express for Web tile。
VS Express for Web瓦片
附录C：使用Web Deploy发布ASP.NET MVC 4应用程序
本附录将向您展示如何从Azure Portal创建新的网站，并发布您通过实验室获得的应用程序，利用Azure提供的Web部署发布功能。
任务1 - 从Azure Portal创建新的网站
转到Azure管理门户并使用与您的订阅关联的Microsoft凭据登录。
注意
使用Azure，您可以免费托管10个ASP.NET网站，然后随着流量的增长而扩展。你可以注册在这里。
登录到Portal
在命令栏上单击新建。
创建一个新的网站
单击计算 | 网站。然后选择快速创建选项。为新网站提供可用的URL，然后单击创建网站。
注意
Azure是运行在云中的Web应用程序的主机，可以进行控制和管理。“快速创建”选项允许您从门户外部署完整的Web应用程序到Azure。它不包括设置数据库的步骤。
使用快速创建创建一个新的网站
等到创建新的网站。
创建网站后，请单击URL列下的链接。检查新的网站是否正常工作。
浏览新的网站
网站运行
返回门户网站，单击“名称” 列下的网站名称以显示管理页面。
打开网站管理页面
在“ 仪表板”页面中的快速浏览部分下，单击“ 下载发布配置文件”链接。
注意
将发布配置文件包含所有发布的Web应用程序到Azure的每个被允许的出版物方法所需要的信息。发布配置文件包含连接到和启用发布方法的每个端点进行身份验证所需的URL，用户凭据和数据库字符串。Microsoft WebMatrix 2，用于Web和Microsoft Visual Studio 2012的Microsoft Visual Studio Express支持阅读发布配置文件，以自动配置这些将Web应用程序发布到Azure的程序。
下载网站发布个人资料
将发布配置文件下载到已知位置。进一步在本练习中，您将看到如何使用此文件将Web应用程序从Visual Studio发布到Azure。
保存发布配置文件
任务2 - 配置数据库服务器
如果您的应用程序使用SQL Server数据库，则需要创建一个SQL数据库服务器。如果要部署一个不使用SQL Server的简单应用程序，则可以跳过此任务。
您将需要一个用于存储应用程序数据库的SQL数据库服务器。您可以从您在Azure管理门户网站的订阅查看SQL数据库服务器SQL数据库 | 服务器 | 服务器的仪表盘。如果您没有创建服务器，可以使用命令栏上的“ 添加”按钮创建一个服务器。记下服务器名称和URL，管理员登录名和密码，您将在下一个任务中使用它们。不要创建数据库，因为它将在稍后的阶段创建。
SQL数据库服务器仪表板
在下一个任务中，您将从Visual Studio测试数据库连接，因此您需要将本地IP地址包含在服务器的允许的IP地址列表中。为此，单击配置，从当前客户端IP地址中选择IP地址，并将其粘贴到“ 开始IP地址和结束IP地址”文本框中，然后单击该按钮。
添加客户端IP地址
将客户端IP地址添加到允许的IP地址列表后，单击保存以确认更改。
确认更改
任务3 - 使用Web Deploy发布ASP.NET MVC 4应用程序
回到ASP.NET MVC 4解决方案。在解决方案资源管理器中，右键单击网站项目，然后选择发布。
发布网站
导入您保存在第一个任务中的发布配置文件。
导入发布配置文件
单击验证连接。验证完成后，单击下一步。
注意
一旦您在验证连接按钮旁边看到绿色复选标记，验证就会完成。
验证连接
在“ 设置”页面的“ 数据库”部分下，单击数据库连接的文本框旁边的按钮（即DefaultConnection）。
Web部署配置
配置数据库连接如下：
在服务器名称中，使用tcp： prefix 键入SQL数据库服务器URL 。
在用户名中输入您的服务器管理员登录名。
在密码中键入服务器管理员登录密码。
键入新的数据库名称，例如：MVC4SampleDB。
配置目标连接字符串
然后单击确定。当提示创建数据库时，单击是。
创建数据库
您将用于连接到Windows Azure中的SQL数据库的连接字符串显示在“默认连接”文本框中。然后单击下一步。
指向SQL数据库的连接字符串
在“ 预览”页面中，单击“ 发布”。
发布Web应用程序
一旦发布过程完成，您的默认浏览器将打开已发布的网站。
应用程序发布到Azure
注意
ASP.NET网站在[https://asp.net/web-api](https://asp.net/web-api）上专用于ASP.NET Web API框架）。该网站将继续提供与Web API相关的最新信息，示例和新闻，如果您想深入了解创建可用于任何设备或开发框架的自定义Web API的技术，请经常检查。
与ASP.NET MVC 4类似的ASP.NET Web API在将服务层与控制器分离方面具有很大的灵活性，允许您很容易地使用几个可用的依赖注入框架。在MSDN中有一个很好的示例，显示了如何在ASP.NET Web API项目中使用Ninject进行依赖注入，您可以从这里下载它。
所有示例代码和代码段都包含在Web Camps培训工具包中，可从https://go.microsoft.com/fwlink/?LinkID=248297&clcid=0x409获取。
目标
在这个动手实验中，您将学习如何：
实现RESTful Web API
从HTML客户端调用API
先决条件
完成此动手实验室需要以下内容：
适用于Web或上级的Microsoft Visual Studio Express 2012（有关如何安装的说明，请参阅附录B）。
建立
安装代码片段
为方便起见，您将在本实验中管理的大部分代码可用作Visual Studio代码片段。要安装代码片段运行。\ Source \ Setup \ CodeSnippets.vsi文件。
如果您不熟悉Visual Studio代码片段，并想了解如何使用它们，可以参考本文档“ 附录A：使用代码段 ”中的附录。
演习
这个动手实验室包括以下练习：
练习1：创建只读Web API
练习2：创建一个读/写Web API
练习3：从HTML客户端使用Web API
注意
每个练习都附带一个End文件夹，其中包含您在完成练习后应获得的最终解决方案。如果您需要额外的帮助，您可以使用此解决方案作为指导。
预计完成本实验的时间：60分钟。
练习1：创建只读Web API
在本练习中，您将为联系人管理器实现只读GET方法。
任务1 - 创建API项目
在此任务中，您将使用新的ASP.NET Web项目模板来创建Web API Web应用程序。
运行Visual Studio 2012 Express for Web，执行此操作转到“ 开始”，然后键入VS Express for Web，然后按Enter键。
从文件菜单中，选择新建项目。选择Visual C＃| Web项目类型从项目类型树视图，然后选择ASP.NET MVC 4 Web应用程序项目类型。将项目的名称设置为ContactManager，并将解决方案名称设置为开始，然后单击确定。
创建一个新的ASP.NET MVC 4.0 Web应用程序项目
在ASP.NET MVC 4项目类型对话框中，选择Web API项目类型。单击确定。
指定Web API项目类型
任务2 - 创建Contact Manager API控制器
在此任务中，您将创建API方法所在的控制器类。
删除文件名为ValuesController.cs内控制器从项目文件夹。
右键单击项目中的Controllers文件夹，然后选择Add | 控制器从上下文菜单。
在项目中添加一个新的控制器
在显示的添加控制器对话框中，从模板菜单中选择空API控制器。命名控制器类ContactController。然后，单击添加。
使用添加控制器对话框创建一个新的Web API控制器
将以下代码添加到ContactController中。
（代码片段 - Web API实验室 - Ex01 - 获取API方法）
C＃
复制
public string[] Get()
{
return new string[]
{
"Hello",
"World"
};
}
按F5调试应用程序。出现Web API项目的默认主页。
ASP.NET Web API应用程序的默认主页
在Internet Explorer窗口中，按F12键打开“ 开发工具”窗口。单击网络选项卡，然后单击开始捕获按钮开始捕获到窗口中的网络流量。
打开网络选项卡并启动网络捕获
使用/ api / contact在浏览器的地址栏中附加URL，然后按Enter键。传输详细信息将显示在网络捕获窗口中。请注意，响应的MIME类型是application / json。这演示了默认输出格式如何是JSON。
在网络视图中查看Web API请求的输出
注意
此时Internet Explorer 10的默认行为将是询问用户是否希望保存或打开Web API调用产生的流。输出将是包含Web API URL调用的JSON结果的文本文件。不要取消对话框，以便能够通过开发人员工具窗口来观看响应的内容。
点击转到详细视图按钮查看有关此API调用的响应的更多详细信息。
切换到详细视图
单击“ 响应体”选项卡以查看实际的JSON响应文本。
查看网络监视器中的JSON输出文本
任务3 - 创建联系人模型并增加联系人控制器
在此任务中，您将创建API方法所在的控制器类。
右键单击Models文件夹，然后选择Add | 类...从上下文菜单。
向Web应用程序添加新模型
在“ 添加新项目”对话框中，命名新文件Contact.cs，然后单击“ 添加”。
创建新的联系人类文件
将以下突出显示的代码添加到Contact类中。
（代码片段 - Web API实验室 - Ex01 - 联系课）
复制
[!code-csharp[Main](build-restful-apis-with-aspnet-web-api/samples/sample2.cs)]
In the ContactController class, select the word string in method definition of the Get method, and type the word Contact. Once the word is typed in, an indicator will appear at the beginning of the word Contact. Either hold down the Ctrl key and press the period (.) key or click the icon using your mouse to open up the assistance dialog in the code editor, to automatically fill in the using directive for the Models namespace.
Using Intellisense assistance for namespace declarations
Modify the code for the Get method so that it returns an array of Contact model instances.
(Code Snippet - Web API Lab - Ex01 - Returning a list of contacts)
C#
Copy
public Contact[] Get()
{
return new Contact[]
{
new Contact
{
Id = 1,
Name = "Glenn Block"
},
new Contact
{
Id = 2,
Name = "Dan Roth"
}
};
}
Press F5 to debug the web application in the browser. To view the changes made to the response output of the API, perform the following steps.
Once the browser opens, press F12 if the developer tools are not open yet.
Click the Network tab.
Press the Start Capturing button.
Add the URL suffix /api/contact to the URL in the address bar and press the Enter key.
Press the Go to detailed view button.
选择响应体选项卡。您应该看到一个JSON字符串，表示Contact实例数组的序列化形式。
JSON序列化输出复杂的Web API方法调用
任务4 - 将功能提取到服务层
此任务将演示如何将功能提取到服务层，以便开发人员轻松将其服务功能与控制器层分开，从而实现实际执行的服务的可重用性。
在解决方案root中创建一个新文件夹，并将其命名为Services。为此，右键单击ContactManager项目，选择添加 | 新建文件夹，将其命名为服务。
创建服务文件夹
右键单击“ 服务”文件夹，然后选择“ 添加” 类...从上下文菜单。
向Services文件夹添加一个新类
当出现添加新项目对话框时，命名新类ContactRepository，然后单击添加。
创建一个类文件以包含Contact Repository服务层的代码
将一个using指令添加到ContactRepository.cs文件以包含模型命名空间。
复制
[!code-csharp[Main](build-restful-apis-with-aspnet-web-api/samples/sample4.cs)]
将以下突出显示的代码添加到ContactRepository.cs文件中以实现GetAllContacts方法。
（代码段 - Web API实验室 - Ex01 - Contact Repository）
C＃
复制
public class ContactRepository
{
public Contact[] GetAllContacts()
{
return new Contact[]
{
new Contact
{
Id = 1,
Name = "Glenn Block"
},
new Contact
{
Id = 2,
Name = "Dan Roth"
}
};
}
}
Open the ContactController.cs file if it is not already open.
Add the following using statement to the namespace declaration section of the file.
Copy
[!code-csharp[Main](build-restful-apis-with-aspnet-web-api/samples/sample6.cs)]
Add the following highlighted code to the ContactController.cs class to add a private field to represent the instance of the repository, so that the rest of the class members can make use of the service implementation.
(Code Snippet - Web API Lab - Ex01 - Contact Controller)
C#
Copy
public class ContactController : ApiController
{
private ContactRepository contactRepository;
public ContactController()
{
this.contactRepository = new ContactRepository();
}
...
}
Change the Get method so that it makes use of the contact repository service.
(Code Snippet - Web API Lab - Ex01 - Returning a list of contacts via the repository)
C#
Copy
public Contact[] Get()
{
return contactRepository.GetAllContacts();
}
Put a breakpoint on the ContactController's Get method definition.
Adding breakpoints to the contact controller
Press F5 to run the application.
When the browser opens, press F12 to open the developer tools.
Click the Network tab.
Click the Start Capturing button.
Append the URL in the address bar with the suffix /api/contact and press Enter to load the API controller.
Visual Studio 2012 should break once Get method begins execution.
Breaking within the Get method
Press F5 to continue.
如果尚未对焦，请返回到Internet Explorer。注意网络捕获窗口。
Internet Explorer中的网络视图显示Web API调用的结果
单击转到详细视图按钮。
单击响应体选项卡。请注意API调用的JSON输出，以及它如何表示由服务层检索的两个联系人。
在开发人员工具窗口中查看Web API中的JSON输出
练习2：创建一个读/写Web API
在本练习中，您将为联系人管理员实施POST和PUT方法，使其具有数据编辑功能。
任务1 - 打开Web API项目
在此任务中，您将准备增强在练习1中创建的Web API项目，以便它可以接受用户输入。
运行Visual Studio 2012 Express for Web，执行此操作转到“ 开始”，然后键入VS Express for Web，然后按Enter键。
打开位于Source / Ex02-ReadWriteWebAPI / Begin /文件夹的Begin解决方案。否则，您可以继续使用通过完成上一个练习获得的最终解决方案。
如果您打开提供的Begin解决方案，则需要在继续之前下载一些缺少的NuGet软件包。为此，单击项目菜单并选择管理NuGet软件包。
在“ 管理NuGet软件包”对话框中，单击“恢复”，以便下载丢失的软件包。
最后，单击Build | 构建解决方案 生成解决方案。
注意
使用NuGet的优点之一是您不必在项目中运送所有库，从而减少了项目的大小。使用NuGet电动工具，通过在Packages.config文件中指定软件包版本，您可以在首次运行项目时下载所有必需的库。这就是为什么在打开本实验室的现有解决方案之后，您必须运行这些步骤。
打开Services / ContactRepository.cs文件。
任务2 - 将数据持久性功能添加到联系人库实现
在此任务中，您将扩展在练习1中创建的Web API项目的ContactRepository类，以便它可以持久化并接受用户输入和新的Contact实例。
将以下常量添加到ContactRepository类以在本练习中稍后表示Web服务器缓存项目键名称的名称。
C＃
复制
private const string CacheKey = "ContactStore";
向包含以下代码的ContactRepository添加构造函数。
（代码片段 - Web API实验室 - Ex02 - 联系人存储库构造函数）
C＃
复制
public ContactRepository()
{
var ctx = HttpContext.Current;
if (ctx != null)
{
if (ctx.Cache[CacheKey] == null)
{
var contacts = new Contact[]
{
new Contact
{
Id = 1, Name = "Glenn Block"
},
new Contact
{
Id = 2, Name = "Dan Roth"
}
};
ctx.Cache[CacheKey] = contacts;
}
}
}
修改GetAllContacts方法的代码，如下所示。
（代码片段 - Web API实验室 - Ex02 - 获取所有联系人）
C＃
复制
public Contact[] GetAllContacts()
{
var ctx = HttpContext.Current;
if (ctx != null)
{
return (Contact[])ctx.Cache[CacheKey];
}
return new Contact[]
{
new Contact
{
Id = 0,
Name = "Placeholder"
}
};
}
注意
This example is for demonstration purposes and will use the web server's cache as a storage medium, so that the values will be available to multiple clients simultaneously, rather than use a Session storage mechanism or a Request storage lifetime. One could use Entity Framework, XML storage, or any other variety in place of the web server cache.
Implement a new method named SaveContact to the ContactRepository class to do the work of saving a contact. The SaveContact method should take a single Contact parameter and return a Boolean value indicating success or failure.
(Code Snippet - Web API Lab - Ex02 - Implementing the SaveContact Method)
C#
Copy
public bool SaveContact(Contact contact)
{
var ctx = HttpContext.Current;
if (ctx != null)
{
try
{
var currentData = ((Contact[])ctx.Cache[CacheKey]).ToList();
currentData.Add(contact);
ctx.Cache[CacheKey] = currentData.ToArray();
return true;
}
catch (Exception ex)
{
Console.WriteLine(ex.ToString());
return false;
}
}
return false;
}
Exercise 3: Consume the Web API from an HTML Client
In this exercise, you will create an HTML client to call the Web API. This client will facilitate data exchange with the Web API using JavaScript and will display the results in a web browser using HTML markup.
Task 1 - Modifying the Index View to Provide a GUI for Displaying Contacts
In this task, you will modify the default Index view of the web application to support the requirement of displaying the list of existing contacts in an HTML browser.
Open Visual Studio 2012 Express for Web if it is not already open.
Open the Begin solution located at Source/Ex03-ConsumingWebAPI/Begin/ folder. Otherwise, you might continue using the End solution obtained by completing the previous exercise.
如果您打开提供的Begin解决方案，则需要在继续之前下载一些缺少的NuGet软件包。为此，单击项目菜单并选择管理NuGet软件包。
在“ 管理NuGet软件包”对话框中，单击“恢复”，以便下载丢失的软件包。
最后，单击Build | 构建解决方案 生成解决方案。
注意
使用NuGet的优点之一是您不必在项目中运送所有库，从而减少了项目的大小。使用NuGet电动工具，通过在Packages.config文件中指定软件包版本，您可以在首次运行项目时下载所有必需的库。这就是为什么在打开本实验室的现有解决方案之后，您必须运行这些步骤。
打开位于Views / Home文件夹的Index.cshtml文件。
用id body替换div元素中的HTML代码，使其看起来像以下代码。
复制
[!code-html[Main](build-restful-apis-with-aspnet-web-api/samples/sample13.html)]
在文件底部添加以下Javascript代码，以执行对Web API的HTTP请求。
复制
[!code-cshtml[Main](build-restful-apis-with-aspnet-web-api/samples/sample14.cshtml)]
打开ContactController.cs文件（如果尚未打开）。
在ContactController类的Get方法上放置一个断点。
在API控制器的Get方法上放置一个断点
按F5运行项目。浏览器将加载HTML文档。
注意
确保您正在浏览应用程序的根URL。
一旦页面加载并且JavaScript执行，断点将被击中，代码执行将在控制器中暂停。
使用Visual Studio 2012 Express for Web调试Web API调用
删除断点，然后按F5或调试工具栏的“ 继续”按钮继续在浏览器中加载视图。Web API调用完成后，您将看到从Web API调用返回的联系人显示为浏览器中的列表项。
作为列表项显示在浏览器中的API调用结果
停止调试
任务2 - 修改索引视图以提供用于创建联系人的GUI
在此任务中，您将继续修改MVC应用程序的索引视图。一个表单将添加到HTML页面中，该页面将捕获用户输入并将其发送到Web API以创建新的联系人，并且将创建一个新的Web API控制器方法以从GUI收集日期。
打开ContactController.cs文件。
向名为Post的控制器类添加一个新方法，如下面的代码所示。
（代码段 - Web API实验室 - Ex03 - Post方法）
复制
[!code-csharp[Main](build-restful-apis-with-aspnet-web-api/samples/sample15.cs)]
如果Visual Studio中尚未打开，请打开Index.cshtml文件。
将下面的HTML代码添加到上一个任务中添加的无序列表之后的文件中。
复制
[!code-html[Main](build-restful-apis-with-aspnet-web-api/samples/sample16.html)]
在文档底部的脚本元素中，添加以下突出显示的代码来处理按钮单击事件，这将使用HTTP POST调用将数据发布到Web API。
HTML
复制
在ContactController.cs中，在Post方法上放置一个断点。
按F5在浏览器中运行应用程序。
页面在浏览器中加载后，输入新的联系人姓名和ID，然后单击保存按钮。
在浏览器中加载的客户端HTML文档
当Post方法中的调试器窗口中断时，请查看contact参数的属性。这些值应与您在表单中输入的数据相匹配。
Contact对象从客户端发送到Web API
在调试器中遍历方法，直到创建响应变量。在调试器的“ 本地”窗口中进行检查后，您将看到所有属性都已设置。
在调试器中创建后的响应
如果按F5或在调试器中单击继续，则请求将完成。一旦您切换回浏览器，新的联系人已被添加到由ContactRepository实现存储的联系人列表中。
浏览器反映了新的联系人实例的成功创建
注意
此外，您可以将此应用程序部署到Azure，方法如下：附录C：使用Web Deploy发布ASP.NET MVC 4应用程序。
概要
This lab has introduced you to the new ASP.NET Web API framework and to the implementation of RESTful Web APIs using the framework. From here, you could create a new repository that facilitates data persistence using any number of mechanisms and wire that service up rather than the simple one provided as an example in this lab. Web API supports a number of additional features, such as enabling communication from non-HTML clients written in any language that supports HTTP and JSON or XML. The ability to host a Web API outside of a typical web application is also possible, as well as is the ability to create your own serialization formats.
The ASP.NET Web site has an area dedicated to the ASP.NET Web API framework at [https://asp.net/web-api](https://asp.net/web-api). This site will continue to provide late-breaking information, samples, and news related to Web API, so check it frequently if you'd like to delve deeper into the art of creating custom Web APIs available to virtually any device or development framework.
Appendix A: Using Code Snippets
With code snippets, you have all the code you need at your fingertips. The lab document will tell you exactly when you can use them, as shown in the following figure.
Using Visual Studio code snippets to insert code into your project
To add a code snippet using the keyboard (C# only)
Place the cursor where you would like to insert the code.
Start typing the snippet name (without spaces or hyphens).
Watch as IntelliSense displays matching snippets' names.
Select the correct snippet (or keep typing until the entire snippet's name is selected).
Press the Tab key twice to insert the snippet at the cursor location.
Start typing the snippet name
Press Tab to select the highlighted snippet
Press Tab again and the snippet will expand
To add a code snippet using the mouse (C#, Visual Basic and XML)
Right-click where you want to insert the code snippet.
Select Insert Snippet followed by My Code Snippets.
Pick the relevant snippet from the list, by clicking on it.
Right-click where you want to insert the code snippet and select Insert Snippet
Pick the relevant snippet from the list, by clicking on it
Appendix B: Installing Visual Studio Express 2012 for Web
You can install Microsoft Visual Studio Express 2012 for Web or another "Express" version using the Microsoft Web Platform Installer. The following instructions guide you through the steps required to install Visual studio Express 2012 for Web using Microsoft Web Platform Installer.
Go to [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Alternatively, if you already have installed Web Platform Installer, you can open it and search for the product "Visual Studio Express 2012 for Web with Azure SDK".
点击立即安装。如果您没有Web平台安装程序，您将被重定向下载并首先安装。
一旦Web平台安装程序打开后，点击安装，开始安装。
安装Visual Studio Express
阅读所有产品的许可证和条款，然后单击我接受以继续。
接受许可条款
等待下载和安装过程完成。
安装进度
安装完成后，单击完成。
安装完成
单击退出以关闭Web平台安装程序。
要打开Visual Studio Express for Web，请转到“ 开始”屏幕并开始编写“ VS Express ”，然后单击VS Express for Web tile。
VS Express for Web瓦片
附录C：使用Web Deploy发布ASP.NET MVC 4应用程序
本附录将向您展示如何从Azure Portal创建新的网站，并发布您通过实验室获得的应用程序，利用Azure提供的Web部署发布功能。
任务1 - 从Azure Portal创建新的网站
转到Azure管理门户并使用与您的订阅关联的Microsoft凭据登录。
注意
使用Azure，您可以免费托管10个ASP.NET网站，然后随着流量的增长而扩展。你可以注册在这里。
登录到Portal
在命令栏上单击新建。
创建一个新的网站
单击计算 | 网站。然后选择快速创建选项。为新网站提供可用的URL，然后单击创建网站。
注意
Azure是运行在云中的Web应用程序的主机，可以进行控制和管理。“快速创建”选项允许您从门户外部署完整的Web应用程序到Azure。它不包括设置数据库的步骤。
使用快速创建创建一个新的网站
等到创建新的网站。
创建网站后，请单击URL列下的链接。检查新的网站是否正常工作。
浏览新的网站
网站运行
返回门户网站，单击“名称” 列下的网站名称以显示管理页面。
打开网站管理页面
在“ 仪表板”页面中的快速浏览部分下，单击“ 下载发布配置文件”链接。
注意
将发布配置文件包含所有发布的Web应用程序到Azure的每个被允许的出版物方法所需要的信息。发布配置文件包含连接到和启用发布方法的每个端点进行身份验证所需的URL，用户凭据和数据库字符串。Microsoft WebMatrix 2，用于Web和Microsoft Visual Studio 2012的Microsoft Visual Studio Express支持阅读发布配置文件，以自动配置这些将Web应用程序发布到Azure的程序。
下载网站发布个人资料
将发布配置文件下载到已知位置。进一步在本练习中，您将看到如何使用此文件将Web应用程序从Visual Studio发布到Azure。
保存发布配置文件
任务2 - 配置数据库服务器
如果您的应用程序使用SQL Server数据库，则需要创建一个SQL数据库服务器。如果要部署一个不使用SQL Server的简单应用程序，则可以跳过此任务。
您将需要一个用于存储应用程序数据库的SQL数据库服务器。您可以从您在Azure管理门户网站的订阅查看SQL数据库服务器SQL数据库 | 服务器 | 服务器的仪表盘。如果您没有创建服务器，可以使用命令栏上的“ 添加”按钮创建一个服务器。记下服务器名称和URL，管理员登录名和密码，您将在下一个任务中使用它们。不要创建数据库，因为它将在稍后的阶段创建。
SQL数据库服务器仪表板
在下一个任务中，您将从Visual Studio测试数据库连接，因此您需要将本地IP地址包含在服务器的允许的IP地址列表中。为此，单击配置，从当前客户端IP地址中选择IP地址，并将其粘贴到“ 开始IP地址和结束IP地址”文本框中，然后单击该按钮。
添加客户端IP地址
将客户端IP地址添加到允许的IP地址列表后，单击保存以确认更改。
确认更改
任务3 - 使用Web Deploy发布ASP.NET MVC 4应用程序
回到ASP.NET MVC 4解决方案。在解决方案资源管理器中，右键单击网站项目，然后选择发布。
发布网站
导入您保存在第一个任务中的发布配置文件。
导入发布配置文件
单击验证连接。验证完成后，单击下一步。
注意
一旦您在验证连接按钮旁边看到绿色复选标记，验证就会完成。
验证连接
在“ 设置”页面的“ 数据库”部分下，单击数据库连接的文本框旁边的按钮（即DefaultConnection）。
Web部署配置
配置数据库连接如下：
在服务器名称中，使用tcp： prefix 键入SQL数据库服务器URL 。
在用户名中输入您的服务器管理员登录名。
在密码中键入服务器管理员登录密码。
键入新的数据库名称，例如：MVC4SampleDB。
配置目标连接字符串
然后单击确定。当提示创建数据库时，单击是。
创建数据库
您将用于连接到Windows Azure中的SQL数据库的连接字符串显示在“默认连接”文本框中。然后单击下一步。
指向SQL数据库的连接字符串
在“ 预览”页面中，单击“ 发布”。
发布Web应用程序
一旦发布过程完成，您的默认浏览器将打开已发布的网站。
应用程序发布到Azure