Visual Studio 2010中的Web开发

目前，Visual Studio 2010 支持 HTML 代码片段。利用这些代码片段，可以生成高质量的代码。Visual Studio 中附带了很多代码片段，开发人员也可以创建自己的代码片段。

Visual Studio 2010 提供的另一个新功能是转换 web.config 文件，以用于部署。Visual Studio 2010 支持一种富配置转换语言，使开发人员可以更改 web.config 文件中的元素，包括连接字符串、文件路径位置和服务地址。

现在，基于 Visual Studio 2010 中的新功能包和部署功能，ASP.NET Web 应用程序的部署更为简洁。可以轻松地将 Web 应用程序发布到构建机器中的特定位置（甚至是 ZIP 文件中），并将其部署到 Visual Studio Web Server 或 Windows Internet Information Server (IIS)。 目标

在本次动手实验中，您将学习如何：

• 使用 HTML 代码片段开发 ASP.NET Web 应用程序页面 • 创建和部署您自己的自定义 HTML 代码片段

• 在跨环境部署 Web 应用程序时，创建和自动转换 web.config。

• 为您的 ASP.NET Web 应用程序创建部署程序包，将应用程序部署到 Visual Studio Development Web 服务器或 Windows Internet Information Server (IIS) 中。 练习

本次动手实验由以下练习组成：

• 使用 Visual Studio 2010 中的 HTML 代码片段 • 转换 web.config 文件以便部署

• 打包 Web 应用程序并将其部署到 Visual Studio Development Web Server

• 打包 Web 应用程序并将其部署到 Windows Internet Information Server (IIS)

完成本实验的估计时间：60 分钟。 系统要求

您必须拥有以下工具才能完成本实验： • Microsoft Visual Studio 2010 Beta 2 • IIS 7.0 安装

使用 Configuration Wizard 验证本实验的所有先决条件。要确保正确配置所有内容，请按照以下步骤进行。

注意：要执行安装步骤，您需要使用管理员权限在命令行窗口中运行脚本。 1.如果之前没有执行，运行 Training Kit 的 Configuration Wizard。为此，运行位于 %TrainingKitInstallationFolder%\\Labs\\IntroToWF\\Setup 文件夹下的 CheckDependencies.cmd 脚本。安装先决条件中没有安装的软件（如有必要请重新扫描），并完成向导。 初始材料

这次动手实验包括以下初始材料。

• Visual Studio 解决方案：本练习为您提供了一个 Visual Studio 解决方案，您可以使用此解决方案作为实验练习的起点。您可以在以下位置找到该解决方案：%TrainingKitInstallFolder%\\Labs \\WebDevelopment\\Source\\Ex01-HTMLCodeSnippets\\begin\\C#\\HTMLLab

◦ HTMLLab.sln：本解决方案包含一个简单的 Web 应用程序，该应用程序可用作练习 1 和后续练习的起点。

注意：每个练习都有一个 End 文件夹，其中包含完成练习后生成的解决方案。 注意：在所有包含 <用户名> 标签的路径引用中，用户将使用适当的名称值进行替换。

注意：要验证每个步骤是否正确执行，建议在每次任务结束时生成解决方案。

下一步

练习 1：使用 Visual Studio 2010 中的 HTML 代码片段 练习 1：使用 Visual Studio 2010 中的 HTML 代码片段

在本练习中，您将了解如何使用 Visual Studio 2010 中的 HTML 代码片段，还将了解如何创建您自己的自定义 HTML 代码片段。

任务 1 –使用 HTML 代码片段将新 ListView 添加到 HTML 页面中

在本任务中，您将打开一个现有的 ASP.NET Web 应用程序，并使用代码片段将 ListView 控件添加到一个现有 Web 页面中。

1.导航到 Start | All Programs | Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010。选择 File | Open | Project/Solution…菜单命令。在 Open Project 对话框中，导航到 %TrainingKitInstallFolder%\\Labs\\WebDevelopment\\Source\\Ex01-HTMLCodeSnippets\\begin\\C#\\HTMLLab 并选择 HTMLLab.sln 文件。

2.双击 Solution Explorer 中的 Default.aspx 文件将其打开。查看页面中显示的代码。注意，该页面中包含一个 GridView 控件，其中含有产品 ID。

图 1

Default.aspx 中现有的 Grid View 控件

3.在 Default.aspx 页面中，添加 ListView 控件。将光标放在结束 GridView 标记 () 之后，然后按回车键。按下“<”键调用完成列表。

图 2 完成列表

注意：每个完成项旁边的小图标表示完成项的类型： 表示完成项也是一个代码片段关键字 表示一个代码片段关键字 表示一个完成条目

4.从完成列表中选择 ListView，按下 TAB 键两次插入代码片段。

图 3 插入的代码段

5.要继续进行，您需要添加布局，并设置一个临时占位符。输入以下代码，定义 LayoutTemplate： XML

图 4

完成的代码片段

注意：在本任务中，键入“<”字符以调出完成列表。另一种显示该列表的方法为使用 CTRL + J 快捷键。但是，还有一种方法是使用 CTRL + K 和 CTRL + X 快捷键来调用代码片段选取器。在某种程度上，这种方法可能占有一定的速度优势，因为您可以对代码片段进行分组，如下所示：

通过选择 ASP.NET 文件夹，并按下 TAB 键，您将会看到一系列特定的 ASP.NET 代码片段：

您可以按 ESC 键中止此操作。此时，请不要在此页面中添加其他控件。

任务 2 –创建自定义的 HTML 代码片段

在此任务中，您将创建一个自定义的 HTML 代码片段，在 Visual Studio 2010 IDE 内部使用。新的代码片段将创建一个标签控件，其中含有预设的默认值。所有已实现的自定义代码片段都将作为 XML 文件存储在已知目录中。 1.在 Visual Studio 2010 中，从菜单中选择 File | New | File…，打开 New File 对话框。在 New File 对话框中，从 Categories 中选择 General，从 Templates 中选择 XML File，并单击 Add。

2.要创建代码片段的结构，您将使用一个现有代码片段。在 XML 文件编辑器中，按下 CTRL + K、CTRL + X 显示代码片段列表。

图 5 代码片段列表

3.从列表中选择 Snippet。一个 XML 代码片段将被插入到文件中。

图 6

一个代码段列表的 XML 定义

4.为显示的 XML 元素提供以下值： 字段 标题 描述

值

“Address Block”

“XML snippet to create a quick address block.”

Shortcut “AddrBlock”

代码片段选取器使用 Title 值显示代码片段的名称。完成列表使用 Shortcut 值选择代码片段。

5.在 节点下，删除第一个包含 SurroundsWith 值的 XML 元素。请确保保留了包含 Expansion 值的 XML 元素。 6.删除整个 Declarations XML 节点。

7.从代码片段 XML 元素中，删除包含 CDATA 值的 Code XML 节点。 删除文件顶部的 XML 元素。完成这些操作后，您的代码片段将如下图所示： XML ...

在 system.web 节点下，添加以下代码。 XML

部署完成后，上面的转换将指导进行 MSBuild 进程，找到 appSettings XML 节点中的 EnvironmentName 节点，然后使用下面定义的一个值替换值属性：“Staging”。

3.可使用相同的方法，通过添加以下代码来转换连接字符串 XML： XML

将 ISS Web Application Name 元素替换为以下内容： XML

注意： HTMLLab.SetParameters.xml 文件将位于 HTMLLab 项目的 obj\\Staging\\Package\\ 文件夹中。

2.单击 File | Save 保存 HTMLLab.SetParameters.xml 文件。 3.接下来，您将在 Trial 模式下部署应用程序。

注意：Trial 或 What If 模式不实际执行部署，但如果安装软件包，则会为您显示所执行的操作。这在将包转手给部署团队或服务器管理员时非常有用。这样，团队或管理员可在 What If 模式中运行软件包，查看其对服务器造成的影响。 导航到 Start | All Programs | Microsoft Visual Studio 10 | Visual Studio Tools，然后单击 Visual Studio 2010 Command Prompt 打开命令提示符。 4.在命令提示符中键入以下命令，将当前目录更改为 C:\\Program Files\\IIS\\Microsoft Web Deploy\\：

cd \"C:\\Program Files\\IIS\\Microsoft Web Deploy\\\"

5.使用 /t 标志（表示 Trial）执行 HTMLLab.deploy.cmd 批处理文件。例如，如果您还在使用练习 1 中的 HTMLLab 项目，则键入：

\"%TrainingKitInstallFolder%\\Labs\\WebDevelopment\\Source\\Ex01-HTMLCodeSnippets\\begin\\C#\\HTMLLab\\obj\\Staging\\Package\\HTMLLab.deploy.cmd\" /t

图 31

在 Trial 模式下执行部署命令行批处理文件 6.查看 Trial 部署的输出。

图 32

Trial 部署的结果

MSDeploy 已将另外五个文件添加到指定位置。

7.重新运行 HTMLLab.deploy.cmd 批处理文件，执行部署。在此实例中，删除 /t（表示 trail）标志并将其替换为 /y（表示 Yes）标签，方法为键入以下内容：

\"%TrainingKitInstallFolder%\\Labs\\WebDevelopment\\Source\\Ex01-HTMLCodeSnippets\\begin\\C#\\HTMLLab\\obj\\Staging\\Package\\HTMLLab.deploy.cmd\" /y

图 33

在 Yes 模式下执行部署命令行批处理文件 8.查看部署的输出。

图 34

在 Yes 模式下执行部署命令行批处理文件 MSBuild 已在指定物理位置中部署了软件包。

图 35

已部署的 Web 应用程序软件包 下一步 练习 3：验证 练习 3：验证

在此验证中，您将验证 Web 应用程序是否已成功部署。

1.在 IIS Manager 中，右键单击 HTMLWebApp Web 应用程序，并从菜单中选择 Switch to Content View。随即出现 HTMLWebApp 的内容视图。

图 36

HTMLWebApp 内容视图

2.右键单击 Default.aspx文件，并从菜单中选择 Browse。 3.验证 Default.aspx 页是否加载了 HTMLWebApp。

图 37

部署 web 应用程序 下一步

练习 4：为 Internet Information Server (IIS) 打包和部署 web 应用程序 练习 4：为 Internet Information Server (IIS) 打包和部署 web 应用程序 在前面的练习中，您已经在 Visual Studio Development Studio 中部署了一个 Web 应用程序。在本练习中，您将在 IIS 中部署同一个 Web 应用程序。要完成本练习，您需要以管理员身份启动 Visual Studio，方法是在开始菜单中右键单击 Visual Studio 2010 图标，并选择 Run as Administrator。

注意：要完成本练习中的任务，您必须完成练习 3 中的所有任务，或使用 %TrainingKitInstallFolder%\\Labs\\WebDevelopment\\Source\\Ex04-PackageDeployIIS\\begin\\C#\\HTMLLab 文件夹中的解决方案。

任务 1 –打开项目属性发布页，设置 Web 应用程序以使用 IIS 并创建软件包。 在本任务中，您将打开产品的属性页面，设置 Web 应用程序以使用 IIS，检查某些可用的功能和设置。

1.使用 Windows 资源管理器，创建一个新的文件夹“C:\\HTMLLab”

2.在 Visual Studio 中，右键单击 HTMLLab 项目并从菜单中选择 Properties，打开 HTMLLab 项目的属性页。 3.单击 Web 选项卡。

4.在属性页的 Server 部分，单击单选按钮 Use Local IIS Web Server：

图 38

设置 Web 应用程序以使用本地 IIS 服务器

5.单击 Create Virtual Directory 按钮，在 IIS 的本地实例上创建一个虚拟目录。

6.单击 Package/Publish 选项卡在 Web Deployment Tool Settings 部分，查看是否选中了 Include all the IIS settings for this web project as configured in IIS Manager 复选框。

图 39

IIS 设置已启用

选中此框，确保 MSBuild 打包了 Web 应用程序的所有 IIS 设置。 7.选中 Include all the IIS settings for this web project as configured in IIS Manager 复选框以及 Include Application Pool 设置。

8.选中 Create web package as a ZIP file 复选框。注意 Package Location 文本框中的路径。构建过程将在这里创建软件包。 9.将 C:\\HTMLLab\\ 设置为目标应用程序物理路径

图 40

将包创建为 ZIP 文件和输出路径

10.确保将活动配置设置为 Staging，然后选择 Project 菜单并单击 Package -> Create Package。在 Output 窗口中查看构建和发布过程是否成功。

图 41

成功构建和发布

11.使用 Windows 资源管理器，导航到在上面提到的 Package Location 文本框中的相对路径。例如，如果您仍使用练习 1 中的 HTMLLab 项目，则导航到 %TrainingKitInstallFolder%\\Labs\\WebDevelopment\\Source\\Ex01-HTMLCodeSnippets\\begin\\C#\\HTMLLab\\obj 文件夹。

12.注意，已为选中的配置 (Staging) 创建了文件夹。双击该文件夹。在该文件夹中，创建一个新的文件夹 Package。双击 Package 文件夹将其打开。

图 42

打包的 web 应用程序

注意，此文件夹中包含的内容与前面练习中包含的内容相同。 任务 2 –部署包

在该任务中，您将包部署到上一个任务中创建的 web 应用程序中。

1.导航到 Start | All Programs | Accessories 并单击 run。在 run 框类型中：“inetmgr”然后单击 OK ，出现 Internet Information Services Manager。 2.在左边的 Connections 树视图中，展开本地机器节点。在该节点中，展开站点节点。

图 43 本地网站列表

3.展开 Default Web Site 节点。验证其中是否列出了 HTMLLab Web 应用程序（在前面的任务中，单击 Create Virtual Directory 按钮后，将创建此应用程序。）

图 44

创建的 HTMLLab 虚拟目录

4.接下来您将在 Trial 模式下部署应用程序。

注意：Trial 或 What If 模式不实际执行部署，但如果安装软件包，则会为您显示所执行的操作。这在将包转手给部署团队或服务器管理员时非常有用。这样，团队或管理员可在 Trial 模式中运行软件包，查看其对服务器造成的影响。

导航到 Start | All Programs | Microsoft Visual Studio 2010 | Visual Studio Tools。右键单击 Visual Studio 2010 Command Prompt 并选择 Run as Administrator，打开命令提示符。

5.在命令提示符中键入以下命令，将当前目录更改为 C:\\Program Files\\IIS\\Microsoft Web Deploy\\：

cd \"C:\\Program Files\\IIS\\Microsoft Web Deploy\\\"

6.使用 /t 标志（表示 Trial）执行 HTMLLab.deploy.cmd 批处理文件。例如，如果您还在使用练习 1 中的 HTMLLab 项目，则键入：

\"%TrainingKitInstallFolder%\\Labs\\WebDevelopment\\Source\\Ex01-HTMLCodeSnippets\\begin\\C#\\HTMLLab\\obj\\Staging\\Package\\HTMLLab.deploy.cmd\" /t

图 45

在 Trial 模式下执行部署命令行批处理文件 7.查看 Trial 部署的输出。

图 46

Trial 模式部署的结果

在本例中，可以看到 MSDeploy 对服务器做了 9 处改动。

8.重新运行 HTMLLab.deploy.cmd 批处理文件，执行部署。在此实例中，删除 /t（表示 trail）标签并将其替换为 /y（表示 Yes）标签。.例如，如果您还在使用练习 1 中的 HTMLLab 项目，则键入：

\"%TrainingKitInstallFolder%\\Labs\\WebDevelopment\\Source\\Ex01-HTMLCodeSnippets\\begin\\C#\\HTMLLab\\obj\\Staging\\Package\\HTMLLab.deploy.cmd\" /y

图 47

在 Yes 模式下执行部署命令行批处理文件 9.查看部署的输出。

图 48

在 Yes 模式下执行部署命令行批处理文件 MSBuild 已在指定物理位置中部署了软件包。 下一步 练习 4：验证 练习 4：验证

在此验证中，您将验证 Web 应用程序是否已成功部署。

1.在 IIS Manager 中，选择 Default Web Site 并在窗口右侧的 Actions 窗格中单击 Refresh。

2.这样，您就会在默认的网站下看到一个 HTMLLab_deploy 目录。

3.右键单击 HTMLLab_deploy 应用程序，并从菜单中选择 Switch to Content View。出现 HTMLLab_deploy 应用程序的内容视图：

图 49

HTMLLab 内容视图

4.右键单击 Default.aspx文件，并从菜单中选择 Browse。 5.验证是否出现了 HTMLLab_deploy 应用程序的默认页。

图 50

部署 web 应用程序 总结

在本实验中，您了解了如何使用 HTML 代码片段来提高 Web 应用程序的开发速度，并创建了您自己的自定义代码片段。您还创建了一个 XML 转换文件，该文件可针对您 Web 应用程序的 web.config 文件进行一系列适当的更改，因此被推荐用于各种环境中。最后，您还了解了 ASP.NET Web 应用程序的新的打包和发布功能。