学习 Web API

关注爱学习公众号
扫码手机阅读更方便

栏目

使用 ASP.NET Web API 生成 RESTful API

动手实验：使用 ASP.NET 4.x 中的 Web API 生成联系人管理器应用程序的简单 REST API。你还将生成一个使用 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 既灵活又易于扩展。已证明 REST 体系结构样式是利用 HTTP 的有效方法，但它当然不是 HTTP 的唯一有效方法。联系人管理器将公开 RESTful 以列出、添加和删除联系人，等等。

此实验室需要基本了解 HTTP、REST，并假定你具有 HTML、JavaScript 和 jQuery 的基本工作知识。

Note

ASP.NET 网站有一个专用于https://asp.net/web-apiASP.NET Web API 框架的区域。此站点将继续提供与 Web API 相关的最新信息、示例和新闻，因此，如果想要深入了解如何创建可用于几乎任何设备或开发框架的自定义 Web Api，请经常查看。

与 ASP.NET MVC 4 类似，ASP.NET Web API，在将服务层与控制器分离时具有很大的灵活性，使您可以很轻松地使用几个可用的依赖项注入框架。 MSDN 中提供了一个很好的示例，演示了如何在 ASP.NET Web API 项目中使用 Ninject 进行依赖关系注入，可从此处下载。

所有示例代码和代码段都包含在 Web 训练营培训工具包中， https://go.microsoft.com/fwlink/?LinkID=248297&clcid=0x409提供。

目标

在本动手实验中，您将了解如何：

实现 RESTful Web API
从 HTML 客户端调用 API

系统必备

完成本动手实验需要以下各项：

适用于 Web 或高级的 Microsoft Visual Studio Express 2012 （有关如何安装的说明，请参阅附录 B ）。

安装

安装代码片段

为方便起见，你将通过此实验室管理的大部分代码都作为 Visual Studio code 片段提供。若要安装代码段，请运行 .\Source\Setup\CodeSnippets.vsi文件。

如果你不熟悉 Visual Studio Code 代码段，并且想要了解如何使用它们，则可以参考本文档中的附录A "附录 A：使用代码段"。

练习

此动手实验包括以下练习：

练习1：创建只读 Web API
练习2：创建读/写 Web API
练习3：使用 HTML 客户端中的 Web API

Note

每个练习都带有一个结束文件夹，其中包含在完成练习后应获得的结果解决方案。如果需要更多帮助，请使用此解决方案作为指导。

完成本实验的估计时间： 60 分钟。

练习1：创建只读 Web API

在此练习中，您将实现联系人管理器的只读 GET 方法。

任务 1-创建 API 项目

在此任务中，你将使用新的 ASP.NET web 项目模板创建 Web API web 应用程序。

运行Visual Studio 2012 Express For Web，若要执行此操作，请单击 "开始"，然后键入VS Express for Web然后按enter。
从 "文件" 菜单中选择 "新建项目"。选择视觉对象C# | "项目类型" 树视图中的 "web 项目类型"，然后选择 " ASP.NET MVC 4 Web 应用程序" 项目类型。将项目的名称设置为ContactManager ，将解决方案名称设置为 "开始"，然后单击 "确定" 。

创建新的 ASP.NET MVC 4.0 Web 应用程序项目
在 "ASP.NET MVC 4 项目类型" 对话框中，选择 " WEB API " 项目类型。单击“确定”。

指定 Web API 项目类型

任务 2-创建联系人管理器 API 控制器

在此任务中，将创建 API 方法将驻留的控制器类。

从项目中删除 "控制器" 文件夹中名为 " ValuesController.cs " 的文件。
右键单击项目中的 "控制器" 文件夹，然后选择 "添加 | 上下文菜单中的 "控制器"。

向项目添加新控制器
在出现的 "添加控制器" 对话框中，从 "模板" 菜单中选择 "空 API 控制器"。将 controller 类命名为ContactController。然后单击 "添加"。

![使用 "添加控制器" 对话框创建新的 Web API 控制器](build-restful-apis-with-aspnet-web-api/_static/image4.png "使用 "添加控制器" 对话框创建新的 Web API 控制器")

使用 "添加控制器" 对话框创建新的 Web API 控制器

将以下代码添加到ContactController中。

（代码段- WEB API Ex01-获取 API 方法）

public string[] Get()
{
    return new string[]
    {
        "Hello",
        "World"
    };
}

按 F5 调试应用程序。 Web API 项目的默认主页应该会出现。

ASP.NET Web API 应用程序的默认主页
在 Internet Explorer 窗口中，按F12键打开 "开发人员工具" 窗口。单击 "网络" 选项卡，然后单击 "开始捕获" 按钮，开始将网络流量捕获到该窗口中。

![打开 "网络" 选项卡并启动网络捕获](build-restful-apis-with-aspnet-web-api/_static/image6.png "打开 "网络" 选项卡并启动网络捕获")

打开 "网络" 选项卡并启动网络捕获
在浏览器的地址栏中追加 /api/contact ，并按 enter。传输详细信息将出现在 "网络捕获" 窗口中。请注意，响应的 MIME 类型为application/json。这说明了默认输出格式为 JSON。

![在 "网络" 视图中查看 Web API 请求的输出](build-restful-apis-with-aspnet-web-api/_static/image7.png "在 "网络" 视图中查看 Web API 请求的输出")

在 "网络" 视图中查看 Web API 请求的输出

Note

此时，Internet Explorer 10 的默认行为将询问用户是否想要保存或打开由 Web API 调用导致的流。输出将是一个文本文件，其中包含 Web API URL 调用的 JSON 结果。不要取消对话框以便能够通过 "开发人员工具" 窗口监视响应的内容。
单击 "中转到详细视图" 按钮，查看有关此 API 调用响应的详细信息。

切换到详细视图
单击 "响应正文" 选项卡以查看实际的 JSON 响应文本。

查看网络监视器中的 JSON 输出文本

任务 3-创建联系人模型并增强联系人控制器

在此任务中，将创建 API 方法将驻留的控制器类。

右键单击 "模型" 文件夹，然后选择 "添加 |类 ... 从上下文菜单中。

向 web 应用程序添加新模型
在 "添加新项" 对话框中，将新文件命名为Contact.cs ，然后单击 "添加"。

创建新的 Contact 类文件

将以下突出显示的代码添加到Contact类。

（代码段- WEB API Ex01-Contact 类）

public class Contact
{
    public int Id { get; set; }

    public string Name { get; set; }
}

在ContactController类中，选择Get方法的 "方法定义" 中的单词字符串，然后键入 "联系人"。键入单词后，就会在 word联系人的开头显示一个指示器。按住Ctrl键并按句点（.）键，或使用鼠标单击图标在代码编辑器中打开 "帮助" 对话框，以自动填充 "模型" 命名空间的using指令。

使用 Intellisense 帮助命名空间声明

修改Get方法的代码，使其返回联系人模型实例的数组。

（代码段- WEB API Ex01-返回联系人列表）

public Contact[] Get()
{
    return new Contact[]
    {
        new Contact
        {
            Id = 1,
            Name = "Glenn Block"
        },
        new Contact
        {
            Id = 2,
            Name = "Dan Roth"
        }
    };
}

按F5在浏览器中调试 web 应用程序。若要查看对 API 的响应输出所做的更改，请执行以下步骤。
1. 打开浏览器后，如果开发人员工具尚未打开，请按F12 。
2. 单击 "网络" 选项卡。
3. 按 "开始捕获" 按钮。
4. 将 URL 后缀 /api/contact添加到地址栏中的 url，然后按enter键。
5. 按 "中转到详细视图" 按钮。
6. 选择 "响应正文" 选项卡。应该会看到一个 JSON 字符串，表示联系人实例的序列化形式。
  
  复杂的 Web API 方法调用的 JSON 序列化输出

任务 4-将功能提取到服务层

此任务将演示如何将功能提取到服务层，使开发人员可以轻松地将其服务功能与控制器层分开，从而实现实际执行工作的服务的可重用性。

在解决方案根文件夹中创建一个新文件夹并将其命名为 "it服务"。为此，请右键单击 " ContactManager项目"，选择 "添加 | 新建文件夹，将it服务命名为"。

正在创建服务文件夹
右键单击 "服务" 文件夹，然后选择 "添加 |类 ... 从上下文菜单中。

将新类添加到服务文件夹
当 "添加新项" 对话框出现时，将新类命名为contacts.json ，然后单击 "添加"。

创建类文件以包含联系人存储库服务层的代码
向ContactRepository.cs文件添加 using 指令以包括模型命名空间。
```
using ContactManager.Models;
```

将以下突出显示的代码添加到ContactRepository.cs文件，以实现 GetAllContacts 方法。

（代码段- WEB API Ex01-联系存储库）

public class ContactRepository
{
    public Contact[] GetAllContacts()
    {
        return new Contact[]
        {
            new Contact
            {
                Id = 1,
                Name = "Glenn Block"
            },
            new Contact
            {
                Id = 2,
                Name = "Dan Roth"
            }
        };
    }
}

打开ContactController.cs文件（如果尚未打开）。
将以下 using 语句添加到文件的命名空间声明部分。
```
using ContactManager.Services;
```
将以下突出显示的代码添加到ContactController.cs类，以添加一个私有字段以表示存储库的实例，以便其他类成员可以使用服务实现。

（代码段- WEB API Ex01-联系人控制器）
```
public class ContactController : ApiController
{
    private ContactRepository contactRepository;

    public ContactController()
    {
        this.contactRepository = new ContactRepository();
    } 
    ...
}
```
更改Get方法，使其能够使用联系人存储库服务。

（代码段- WEB API Ex01-通过存储库返回联系人列表）
```
public Contact[] Get()
{
    return contactRepository.GetAllContacts();
}
```
在ContactController的Get方法定义中放置一个断点。

向联系人控制器添加断点

向联系人控制器添加断点 11. 按 F5 运行该应用程序。 12. 当浏览器打开时，按F12打开开发人员工具。 13. 单击 "网络" 选项卡。 14. 单击 "开始捕获" 按钮。 15. 在地址栏中附加带有后缀 /api/contact的 URL，然后按enter加载 api 控制器。 16. Get方法开始执行时，Visual Studio 2012 应中断。

在 Get 方法内中断

在 Get 方法内中断 17. 按 F5继续。 18. 返回到 Internet Explorer （如果它尚未处于焦点上）。请注意 "网络捕获" 窗口。

<span data-ttu-id="75563-254">![Internet Explorer 中显示 Web API 调用结果的网络视图](build-restful-apis-with-aspnet-web-api/_static/image19.png "Internet Explorer 中显示 Web API 调用结果的网络视图")</span><span class="sxs-lookup"><span data-stu-id="75563-254">![Network view in Internet Explorer showing results of the Web API call](build-restful-apis-with-aspnet-web-api/_static/image19.png "Network view in Internet Explorer showing results of the Web API call")</span></span>

<span data-ttu-id="75563-255">*Internet Explorer 中显示 Web API 调用结果的网络视图*</span><span class="sxs-lookup"><span data-stu-id="75563-255">*Network view in Internet Explorer showing results of the Web API call*</span></span>

单击 "中转到详细视图" 按钮。
单击 "响应正文" 选项卡。请注意 API 调用的 JSON 输出，以及它如何表示服务层检索到的两个联系人。

![在 "开发人员工具" 窗口中查看 Web API 的 JSON 输出](build-restful-apis-with-aspnet-web-api/_static/image20.png "在 "开发人员工具" 窗口中查看 Web 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/ Folder 的begin解决方案。否则，你可以继续使用通过完成前一练习所获得的最终解决方案。
1. 如果你打开了提供的开始解决方案，则需要下载一些缺少的 NuGet 包，然后再继续。为此，请单击 "项目" 菜单并选择 "管理 NuGet 包"。
2. 在 "管理 NuGet 包" 对话框中，单击 "还原" 以下载缺少的包。
3. 最后，通过单击 "生成 | 生成解决方案" 来生成解决方案。
  
  Note
  
  使用 NuGet 的优点之一是，无需将所有库都送到项目中，从而减少了项目的大小。使用 NuGet 功能，通过在包 .config 文件中指定包版本，你可以在首次运行项目时下载所有必需的库。这就是在从此实验室打开现有解决方案之后需要运行这些步骤的原因。
打开Services/contacts.json文件。

任务 2-将数据持久性功能添加到联系人存储库实现

在此任务中，您将补充在练习1中创建的 Web API 项目的 Contacts.json 类，使其可以持久保存并接受用户输入和新的联系人实例。

将以下常量添加到contacts.json类中，以表示在本练习后面的 web 服务器缓存项密钥名称。
```
private const string CacheKey = "ContactStore";
```

将构造函数添加到包含以下代码的contacts.json 。

（代码段- WEB API Ex02-Contact Repository 构造函数）

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-获取所有联系人）
```
public Contact[] GetAllContacts()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        return (Contact[])ctx.Cache[CacheKey];
    }

    return new Contact[]
        {
            new Contact
            {
                Id = 0,
                Name = "Placeholder"
            }
        };
}
```
Note

此示例用于演示目的，并将 web 服务器的缓存用作存储介质，使多个客户端的值可以同时用于多个客户端，而不是使用会话存储机制或请求存储生存期。可以使用实体框架、XML 存储或任何其他种类的 web 服务器缓存。

为contacts.json类实现一个名为SaveContact的新方法，以便保存联系人。 SaveContact方法应采用单个Contact参数，并返回指示成功或失败的布尔值。

（代码段- WEB API Ex02-实现 SaveContact 方法）

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;
}

练习3：使用 HTML 客户端中的 Web API

在此练习中，您将创建一个 HTML 客户端来调用 Web API。此客户端将使用 JavaScript 简化与 Web API 的数据交换，并使用 HTML 标记在 web 浏览器中显示结果。

任务 1-修改索引视图以提供用于显示联系人的 GUI

在此任务中，您将修改 web 应用程序的默认索引视图，以支持在 HTML 浏览器中显示现有联系人列表的要求。

如果尚未打开，请打开Visual Studio 2012 Express For Web 。
打开位于Source/Ex03-ConsumingWebAPI/begin/ Folder 的begin解决方案。否则，你可以继续使用通过完成前一练习所获得的最终解决方案。
1. 如果你打开了提供的开始解决方案，则需要下载一些缺少的 NuGet 包，然后再继续。为此，请单击 "项目" 菜单并选择 "管理 NuGet 包"。
2. 在 "管理 NuGet 包" 对话框中，单击 "还原" 以下载缺少的包。
3. 最后，通过单击 "生成 | 生成解决方案" 来生成解决方案。
  
  Note
  
  使用 NuGet 的优点之一是，无需将所有库都送到项目中，从而减少了项目的大小。使用 NuGet 功能，通过在包 .config 文件中指定包版本，你可以在首次运行项目时下载所有必需的库。这就是在从此实验室打开现有解决方案之后需要运行这些步骤的原因。
打开位于Views/Home文件夹中的索引 cshtml文件。
用 id体替换 div 元素中的 HTML 代码，使其类似于以下代码。
```
<div id="body">
    <ul id="contacts"></ul>
</div>
```

在文件底部添加以下 Javascript 代码，以对 Web API 执行 HTTP 请求。

@section scripts{
<script type="text/javascript">
$(function()
{
        $.getJSON('/api/contact', function(contactsJsonPayload)
        {
            $(contactsJsonPayload).each(function(i, item)
            {
                $('#contacts').append('<li>' + item.Name + '</li>');
            });
        });
});
</script>
}

打开ContactController.cs文件（如果尚未打开）。
在ContactController类的Get方法上放置一个断点。

在 API 控制器的 Get 方法上放置断点
按 F5 运行项目。浏览器将加载 HTML 文档。

Note

确保浏览到应用程序的根 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 方法）

public HttpResponseMessage Post(Contact contact)
{
    this.contactRepository.SaveContact(contact);

    var response = Request.CreateResponse<Contact>(System.Net.HttpStatusCode.Created, contact);

    return response;
}

在 Visual Studio 中打开索引 cshtml文件（如果尚未打开）。

将以下 HTML 代码添加到文件中，就在上一个任务中添加的未排序列表之后。

<form id="saveContactForm" method="post">
<h3>Create a new Contact</h3>
<p>
    <label for="contactId">Contact Id:</label>
    <input type="text" name="Id" />
</p>
<p>
    <label for="contactName">Contact Name:</label>
    <input type="text" name="Name" />
</p>
<input type="button" id="saveContact" value="Save" />
</form>

在文档底部的脚本元素中，添加以下突出显示的代码以处理按钮单击事件，这会使用 HTTP POST 调用将数据发布到 Web API。

<script type="text/javascript">
... 
$('#saveContact').click(function()
         {
              $.post("api/contact",
                    $("#saveContactForm").serialize(),
                    function(value)
                    {
                         $('#contacts').append('<li>' + value.Name + '</li>');
                    },
                    "json"
              );
         });
</script>

在ContactController.cs中，将一个断点置于Post方法上。
按F5在浏览器中运行该应用程序。
在浏览器中加载页面后，键入新的联系人名称和 Id，并单击 "保存" 按钮。

在浏览器中加载的客户端 HTML 文档
调试器窗口在Post方法中中断时，查看contact参数的属性。值应与您在窗体中输入的数据匹配。

要从客户端发送到 Web API 的联系人对象
在调试器中单步执行方法，直到创建了响应变量为止。在调试器的 "局部变量" 窗口中进行检查后，您将看到已设置所有属性。

在调试器中创建后的响应

在调试器中创建后的响应 11. 如果按F5或单击调试器中的 "继续"，请求将会完成。切换回浏览器后，会将新联系人添加到contacts.json实现存储的联系人列表中。

浏览器反映新联系人实例的创建成功

浏览器反映新联系人实例的创建成功

Note

此外，你可以遵循附录 C：使用 Web 部署发布 ASP.NET MVC 4 应用程序，将此应用程序部署到 Azure。

摘要

此实验室已向你介绍了新的 ASP.NET Web API 框架，以及如何使用框架实现 RESTful Web Api。从这里，你可以创建一个新的存储库，该存储库使用任意数量的机制和网络连接，而不是在此实验室中作为示例提供的简单数据。 Web API 支持多种附加功能，例如，从以支持 HTTP 和 JSON 或 XML 的任何语言编写的非 HTML 客户端进行通信。还可以在典型的 web 应用程序之外承载 Web API，还可以创建自己的序列化格式。

ASP.NET 网站有一个专用于[https://asp.net/web-api](https://asp.net/web-api)ASP.NET Web API 框架的区域。此站点将继续提供与 Web API 相关的最新信息、示例和新闻，因此，如果想要深入了解如何创建可用于几乎任何设备或开发框架的自定义 Web Api，请经常查看。

附录 A：使用代码片段

使用代码片段，您可以随时获得所需的全部代码。实验室文档将告诉你何时可以使用它们，如下图所示。

使用 Visual Studio code 代码段将代码插入到项目中

使用 Visual Studio code 代码段将代码插入到项目中

使用键盘添加代码片段（C#仅限）

将光标放在要插入代码的位置。
开始键入代码片段名称（不含空格或连字符）。
请注意，IntelliSense 显示匹配的代码段名称。
选择正确的代码段（或保留键入内容，直到选择了整个代码段的名称）。
按 Tab 键两次，将代码段插入到光标位置。

开始键入代码片段名称

按 Tab 键以选择突出显示的代码段

再次按 Tab 键，代码片段将展开

使用鼠标添加代码片段（C#、VISUAL BASIC 和 XML）

右键单击要插入代码片段的位置。
选择 "插入代码片段"，然后选择 "我的代码片段" 。
通过单击从列表中选择相关的代码片段。

![右键单击要插入代码片段的位置，然后选择 "插入代码片段"](build-restful-apis-with-aspnet-web-api/_static/image32.png "右键单击要插入代码片段的位置，然后选择 "插入代码片段"")

右键单击要插入代码片段的位置，然后选择 "插入代码片段"

通过单击从列表中选择相关的代码片段

附录 B：安装 Web Visual Studio Express 2012

您可以使用 Microsoft Web 平台安装程序 为 Web 或其他 "Express" 版本安装Microsoft Visual Studio Express 2012 。以下说明将指导你完成使用Microsoft Web 平台安装程序安装Visual studio Express 2012 for Web的步骤。

请参阅[https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169)。或者，如果你已经安装了 Web 平台安装程序，则可以打开它，并使用 AZURE SDK"搜索 Visual Studio Express 2012 For web的产品 "。
单击 "立即安装"。如果你没有Web 平台安装程序，则会重定向到 "下载并安装"。
Web 平台安装程序打开后，单击 "安装" 以启动安装程序。

安装 Visual Studio Express
阅读所有产品的许可证和条款，单击 "我接受" 以继续。

接受许可条款
等待下载和安装过程完成。

安装进度
安装完成后，单击 "完成"。

安装完成
单击 "退出" 以关闭 Web 平台安装程序。
若要打开 Web Visual Studio Express，请在 "开始" 屏幕上，开始书写 "VS Express"，然后单击 " VS Express for Web " 磁贴。

VS Express for Web 磁贴

附录 C：使用 Web 部署发布 ASP.NET MVC 4 应用程序

本附录将演示如何从 Azure 门户创建新网站，以及如何利用 Azure 提供的 Web 部署发布功能，发布通过实验室获取的应用程序。

任务 1-从 Azure 门户创建新网站

请使用Azure 管理门户，并使用与你的订阅关联的 Microsoft 凭据登录。

Note

借助 Azure，你可以免费托管10个 ASP.NET 的网站，然后随着流量的增长进行扩展。你可以在此处注册。

登录到门户
单击命令栏上的 "新建"。

创建新网站
单击 "计算 | 网站"。然后选择 "快速创建" 选项。为新网站提供可用 URL，并单击 "创建网站"。

Note

Azure 是在云中运行的 web 应用程序的宿主，你可以控制和管理这些应用程序。使用 "快速创建" 选项，可以从门户外部将已完成的 web 应用程序部署到 Azure。它不包括设置数据库的步骤。

使用 "快速创建" 创建新网站
请等到新网站创建完毕。
创建网站后，单击 " URL " 列下的链接。检查新网站是否正常工作。

浏览到新网站

网站正在运行
返回到门户，并在 "名称" 列下单击网站的名称以显示管理页面。

打开网站管理页
在 "仪表板" 页的 "速览" 部分下，单击 "下载发布配置文件" 链接。

Note

发布配置文件包含为每个已启用的发布方法将 web 应用程序发布到 Azure 所需的所有信息。发布配置文件包含有连接到并且验证该发布方法启用的每个端点所需的 URL、用户凭据和数据库字符串。 Microsoft WebMatrix 2、 Microsoft Visual Studio Express for Web和Microsoft Visual Studio 2012支持读取发布配置文件，以便自动配置这些程序以将 Web 应用程序发布到 Azure。

下载网站发布配置文件
将发布配置文件下载到已知位置。在本练习中，你将了解如何使用此文件从 Visual Studio 将 web 应用程序发布到 Azure。

正在保存发布配置文件

任务 2-配置数据库服务器

如果应用程序使用 SQL Server 数据库，则需要创建 SQL 数据库服务器。如果要部署不使用 SQL Server 的简单应用程序，则可以跳过此任务。

你将需要一个用于存储应用程序数据库的 SQL 数据库服务器。可以在 Azure 管理门户中的sql 数据库 | server | 服务器的仪表板上的 Azure 管理门户中查看 sql 数据库服务器。如果尚未创建服务器，可以使用命令栏上的 "添加" 按钮创建一个服务器。记下服务器名称和 URL、管理员登录名和密码，因为你将在后续任务中使用它们。请不要创建数据库，因为它将在后面的阶段创建。

SQL 数据库服务器仪表板
在下一任务中，您将从 Visual Studio 测试数据库连接，因此，需要在服务器的允许 IP 地址列表中包含本地 ip 地址。为此，请单击 "配置"，从 "当前客户端 IP 地址" 中选择 IP 地址，并将其粘贴到 "起始 Ip 地址" 和 "结束 ip 地址" 文本框，然后单击 "" 按钮。

添加客户端 IP 地址
将客户端 Ip 地址添加到 "允许的 IP 地址" 列表中后，单击 "保存" 以确认更改。

确认更改

任务 3-使用 Web 部署发布 ASP.NET MVC 4 应用程序

返回到 ASP.NET MVC 4 解决方案。在解决方案资源管理器中，右键单击网站项目，然后选择 "发布"。

发布网站
导入您在第一个任务中保存的发布配置文件。

导入发布配置文件
单击 "验证连接"。验证完成后，单击 "下一步"。

Note

验证完成后，"验证连接" 按钮旁边会出现一个绿色的复选标记。

正在验证连接
在 "设置" 页的 "数据库" 部分下，单击数据库连接的文本框旁边的按钮（即DefaultConnection）。

Web 部署配置
按如下所示配置数据库连接：
- 在 "服务器名称" 中，键入您的 SQL 数据库服务器 URL，使用tcp： prefix。
- 在 "用户名" 中键入服务器管理员登录名。
- 在 "密码" 中键入服务器管理员登录密码。
- 键入新的数据库名称，例如： MVC4SampleDB。
  
  正在配置目标连接字符串
然后单击 “确定” 。系统提示创建数据库时，单击 "是" 。

创建数据库
将用于连接到 Windows Azure 中的 SQL 数据库的连接字符串显示在 "默认连接" 文本框中。再单击 “下一步” 。

指向 SQL 数据库的连接字符串
在 "预览" 页上，单击 "发布"。

发布 web 应用程序
发布过程完成后，您的默认浏览器将打开已发布的网站。

已将应用程序发布到 Azure