Visual Studio 2012 中 ASP.NET 和 Web 开发的新增功能

项目
11/21/2024

新版本的 Visual Studio 引入了一些增强功能，这些增强功能侧重于改进使用 Web 技术时的体验和性能。适用于 CSS、JavaScript 和 HTML 的 Visual Studio 编辑器已完全修改，包括许多最需要的代码辅助工具，例如 IntelliSense 和自动缩进。关于性能，捆绑和缩小现在已集成为内置功能，以轻松减少页面加载时间。

Visual Studio 使你能够使用最新的网站技术。可以使用跨浏览器 CSS3 代码片段来确保网站无论客户端平台如何工作，同时利用新的 HTML5 元素和功能。

使用此 Visual Studio 版本编写和分析 JavaScript 代码应该更容易。 IntelliSense 列表、集成的 XML 文档和导航功能现在可用于 JavaScript 代码。现在，可以使用指尖上的 JavaScript 目录。此外，还可以检查 ECMAScript5 是否符合脚本，并在早期阶段检测语法错误。

最后，但尤其是此 Visual Studio 版本实现内置捆绑和缩小。脚本文件和样式表将打包和压缩，以便网站执行速度更快。

本实验室将指导你完成以前通过对源文件夹中提供的示例 Web 应用程序应用进行次要更改来介绍的增强功能和新功能。

目标

在此实践实验室中，你将了解如何：

在 CSS 编辑器中使用新功能和改进
在 HTML 编辑器中使用新功能和改进
在 JavaScript 编辑器中使用新功能和改进
配置和使用捆绑和缩小

先决条件

Microsoft Visual Studio Express 2012 for Web 或高级版（请阅读附录 A ，了解如何安装它）。
Windows PowerShell （适用于安装脚本 - 已在 Windows 8 和 Windows Server 2008 R2 上安装）
Internet Explorer 10 - 或符合 HTML5 的浏览器

练习

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

练习 1：CSS 编辑器中的新增功能
练习 2：HTML 编辑器中的新增功能
练习 3：JavaScript 编辑器中的新增功能
练习 4：捆绑和缩小

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

练习 1：CSS 编辑器中的新增功能

Web 开发人员应熟悉与 CSS 编辑相关的许多困难。 CSS 样式设置的最大问题之一是跨浏览器兼容性。通常，在向网站应用样式后，你会注意到，如果在其他浏览器或设备中打开它，它看起来会有所不同。因此，你可能花了很多时间修复这些视觉问题，以意识到，当你最终使其在一个浏览器中工作时，它会在其他人中中断。

Visual Studio 现在包含的功能可帮助开发人员有效地访问、工作和组织 CSS 样式表。在本练习中，你将满足有效组织和版本的新功能，以及用于跨浏览器兼容性的 CSS3 代码片段。

任务 1 - 新的编辑器功能

在此任务中，你将发现 CSS 编辑器的新功能。此新编辑器将帮助你利用新的智能缩进、改进的代码注释和增强的 IntelliSense 列表来提高工作效率。

启动 Visual Studio 并打开位于本实验室的 Source\WhatsNewASPNET 文件夹中的WhatsNewASPNET.sln解决方案。
在解决方案资源管理器中，打开位于“样式”文件夹下的Site.css文件。确保 文本编辑器 工具在工具栏上可见。为此，请选择“视图 | 工具栏”菜单选项，并选中“文本编辑器”选项。你会注意到，由于这个新版本，“批注”按钮（）和“取消注释”按钮（）也为 CSS 编辑器启用。

启用编辑器和 CSS 工具
滚动代码并选择任何 CSS 类定义。 单击“批注” > 按钮可注释所选行。然后，单击“ 取消注释 ”按钮撤消更改。
单击位于文本左边距的“折叠”和“展开”按钮。请注意，现在可以隐藏不用于更简洁视图的样式。

折叠 CSS 类
确保已启用智能缩进功能。选择“工具 | 选项”菜单选项，然后选择屏幕左窗格中的文本编辑器 | CSS | 格式页面。 选中“分层缩进”选项。

启用分层缩进
找到主类定义（.main）并将样式追加到 div 元素。你会注意到代码自动对齐，帮助用户一目了然地查找父类。

CSS
```
.main
{
  padding: 0px 12px;
  margin: 12px 8px 8px 8px;
  min-height: 420px;
}
  .main div
  {
    border: 0px;
  }
```
CSS 中的分层对齐方式
在 .main div 类中，找到边框末尾的 光标：0px; 然后按 Enter 显示 IntelliSense 列表。开始键入顶部，并注意键入时如何筛选列表。该列表将显示包含单词任意部分顶部的元素（在早期版本的 Visual Studio 中，列表按以术语开头的项进行筛选）。

CSS 中的 IntelliSense 增强功能

任务 2 - 颜色选取器

在此任务中，你将发现集成到 Visual Studio IntelliSense 中的新 CSS 颜色选取器。

在Site.css中，找到标头类定义（.header），并将光标放在背景色属性旁边，在该代码行上的“：”和“#”字符之间。

查找游标
删除冒号（:)并再次写入以显示颜色选取器。请注意，你将看到的第一种颜色是网站中最频繁的颜色。如果单击白色，则其 HTML 颜色代码（#fff）将替换样式表中的当前颜色代码。

颜色选取器
按颜色选取器上的“展开”按钮以显示颜色渐变，然后拖动渐变光标以选择其他颜色。之后，单击 “取色器 ”按钮，然后从屏幕中选择任何颜色。请注意，移动光标时背景色值会动态更改。

颜色选取器渐变
在 “不透明度 ”滑块中，将选择器移动到条的中心以减少不透明度。请注意，背景色值现在将其刻度更改为 RGBA。

颜色选取器不透明度

注意

使用 CSS3 中的 RGBA（红色、绿色、蓝色、Alpha）颜色定义，可以定义单个项的颜色不透明度值。与不透明度不同 - 类似的 CSS 属性 - RGBA 颜色也与最新的浏览器兼容。

任务 3 - CSS 兼容的代码片段

在此任务中，你将了解如何使用跨浏览器兼容的 CSS3 代码片段，以便在网站中实现某些功能。

在Site.css文件中，找到标头 CSS 类定义（.header），并将光标置于 /*border radius*/ 占位符下方以添加新代码段。按 Enter 显示 IntelliSense 列表并键入半径以筛选列表。 通过双击从列表中选择边框半径选项，然后按 TAB 键插入代码片段。然后，键入半径大小（以像素为单位），然后按 Enter。例如，键入 15px。

代码片段添加的 CSS3 属性将在大多数 HTML5 符合性浏览器（包括 Mozilla 和基于 WebKit 的浏览器）中呈现圆角边框。

使用边框半径代码段

在页面样式（.page）中应用相同的边框代码片段。

CSS

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
    /*border radius*/
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

按 F5 运行解决方案。请注意，每个页面现在都有圆角边框。

圆角
关闭浏览器并返回到 Visual Studio。
打开位于 Styles 文件夹下的 Custom.css 文件，并将光标置于 div.images ul li img 类定义中。
按 Enter 可显示 IntelliSense 列表，键入 框阴影 ，然后按 Tab 键两次在类定义中插入默认阴影代码片段。将阴影值设置为 10px 10px 5px #888。然后，键入 边框半径 并插入代码片段。键入 15px 以设置半径大小，然后按 Enter。

带阴影的圆角

注意

目前，阴影属性将插入相应的前缀（moz，webkit，o），以支持 Mozilla 和 Webkit（Chrome、Safari、Konkeror）浏览器。
在 div.images ul li img：hover 下创建新的类 div.images ul li img 类定义，并将光标置于括号内。

CSS
```
div.images ul li img
{
  ...
}

div.images ul li img:hover
{

}
```

键入转换并按 TAB 键两次以插入转换代码片段。然后，输入 旋转（-15deg）， 以便在将图像悬停时更改旋转角度值。

CSS

div.images ul li img
{
  padding-top: 50px;
  padding-right: 15px;
  width: 150px;
  ...
}

div.images ul li img:hover
{
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

按 F5 运行解决方案并浏览到 CSS3 页面。请注意，图像具有圆角和框阴影。将鼠标悬停在图像上并观看它们旋转。

转换旋转图像的代码片段

注意

如果使用 Internet Explorer 10 且看不到阴影，请确保文档模式设置为 IE10 标准。按 F12 打开 Internet Explorer 开发人员工具，然后单击 “文档模式 ”以更改为 IE10 标准。

练习 2：HTML 编辑器中的新增功能

Visual Studio 具有改进的 HTML 编辑器。此版本中包括的一些增强功能是 HTML 文档、HTML5 代码片段、HTML 开始和结束标记匹配以及 HTML 验证中的智能缩进。在整个练习中，你将看到这些更改如何在网站标记中提高你的流畅性。

与 CSS 编辑器一样，HTML 编辑器也得到了改进。其中大多数改进都是使 Web 开发人员的生活更加轻松的小型改进。编辑和验证面向 HTML 文档 DOCTYPE 的更多代码片段、智能缩进、匹配开始和结束标记等内容是其中一些改进。

任务 1 - 改进了 DOCTYPE 验证

HTML 编辑器现在能够检查页面的 DOCTYPE，即使定义可能位于母版页中。根据页面的 DOCTYPE，HTML 编辑器将使用正确的规则集进行验证，并筛选考虑 DOCTYPE 元素的 IntelliSense 列表。

在此任务中，你将更改页面的 DOCTYPE，以查看 HTML 编辑器的行为如何相应地更改。

如果尚未打开，请启动 Visual Studio 并打开位于本实验室的 Source\WhatsNewASPNET 文件夹中的 WhatsNewASPNET.sln 解决方案。
打开 Site.Master 页。
请注意验证工具栏的目标架构。 HTML 编辑器的行为方式（验证、IntelliSense 等）将正确更改以适应所选 Doctype。

在 HTML 源编辑工具栏中使用 Doctype
将目标架构更改为 HTML 4.01。

在 HTML 源编辑工具栏中更改 Doctype
将光标置于正文元素下，并开始键入 HTML5 元素的名称（例如视频）。 请注意，该元素在 IntelliSense 列表中不可用。

未列出的 HTML5 元素
撤消对验证工具栏的目标架构所做的更改，从下拉列表中选择 DOCTYPE：XHTML5。

在 HTML 源编辑工具栏中重置 Doctype
将光标置于正文元素下，然后再次开始键入 HTML5 元素（例如，如视频）。请注意，HTML5 元素现在可在 IntelliSense 列表中使用。

列出的 HTML5 元素

任务 2 - 启动/结束标记自动更新

Visual Studio 现在更新要编辑的元素的 HTML 开始或结束标记，以便彼此匹配。此新功能将在编辑 HTML 标记时提高工作效率。

在 Default.aspx 页上，添加 具有标题的 H3 元素（例如 Visual Studio 2012 Rocks！）。

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h3>Visual Studio 2012 Rocks!!</h3>
</asp:Content>

更改 H3 标记和类型 H2 或 H1。

请注意，结束标记会自动更新。还可以修改结束标记，以查看开始标记也会相应地更新。

结束标记的自动更新

任务 3 - 新的 HTML5 代码片段

Visual Studio 现在包含多个 HTML5 代码片段。在此任务中，你将使用这些代码片段中的一些。

将名为音频的新文件夹添加到网站文件夹的根目录。打开 Windows 资源管理器并将任何音频文件复制到WhatsNewASPNET.sln解决方案的音频文件夹中。
在 Default.aspx 页中，找到 Web11 岩石下方的光标！！标头。键入音频并按 Tab 键。

新的 HTML 编辑器包括 HTML5 内容的代码片段。请记得使用正确的 DOCTYPE 定义来启用 HTML5 代码片段。

插入 HTML5 代码片段

将音频源更新为指向现有音频文件。

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h2>Visual Studio 2012 Rocks!!</h2>
  <audio controls="controls">
    <source src="audio/Kalimba.mp3" />
  </audio>
</asp:Content>

注意

需要将音频文件添加到解决方案。

按 F5 运行站点并播放音频。

运行音频控件

注意

还可以尝试 Visual Studio 中包含的更多代码片段，例如视频、数字等。
现在，请尝试在页面的某些部分插入控件。例如，尝试插入 GridView 控件，但不要键入 <Gri，而是开始键入< GV。请注意，IntelliSense 列表显示 asp：GridView 控件。

HTML 编辑器中的 IntelliSense 现在提供标题大小写搜索以及部分匹配（检索包含术语的所有元素）。

使用 IntelliSense 列表插入 GridView

如果键入 <网格 ，将获取与术语匹配的所有项，但 Visual Studio 将建议 gridview 控件：

使用 IntelliSense 列表和部分匹配插入 GridView

任务 4 - HTML 编辑器智能标记

HTML 编辑器中的另一项改进是智能标记功能。智能标记使每个控件可以轻松执行常见或重复的开发任务。此功能已在 HTML 设计器中提供，但在 HTML 编辑器中不可用。

打开 Site.Master 并找到 asp：Menu 元素。将光标放在开始标记上，并注意到元素底部显示的小型字形 - 单击它以打开智能任务菜单。请注意，你可以快速访问与菜单控件相关的某些任务。

菜单控件的智能任务

任务 5 - 智能缩进

HTML 中的最佳做法之一是缩进嵌套元素以保持代码可读性。在 Visual Studio 2012 中，你会注意到编辑器在编写代码时自动缩进元素。

注意

在早期版本的 Visual Studio 中，智能缩进在 XML 编辑器中可用，但在 HTML 编辑器中不可用。

确保 HTML 编辑器上的缩进配置设置为智能缩进。为此，请选择 “工具” |“选项 ”菜单选项，然后选择 “文本编辑器” |HTML | 屏幕左窗格中的选项卡页。选择“智能缩进”选项。

HTML 编辑器设置
在 Default.aspx 页上，删除音频元素下的所有内容。
将光标置于打开 的音频 元素的末尾，并按 Enter。

请注意，游标的新位置具有额外的缩进级别。

HTML 编辑器中的智能缩进
使用已删除的内容还原音频标记，或关闭 Default.aspx 而不保存更改。

任务 6 - 提取到用户控件

Visual Studio 中包含的重构工具（例如将一部分代码提取到函数）是有助于改进和重构现有代码的强大功能。 ASP.NET 页面的对应项是将 HTML 代码提取到用户控件。手动执行此操作涉及几个步骤，例如创建新的用户控件、将代码节移动到用户控件、注册用户控件的标记前缀，最后，在页面上实例化用户控件。现在，新的 “提取到用户控制 ”工具会自动执行所有这些步骤。

在此任务中，将使用新的“提取到用户控件”上下文操作从所选代码生成新的用户控件。

在 Default.aspx 页上，选择 H2 和音频元素。
右键单击并选择“ 提取到用户控件”。

“提取到用户控件”菜单选项
键入新用户控件的名称。例如， Jukebox.ascx，然后单击“ 确定”。

保存提取的用户控件
请注意，所选代码已提取到用户控件，所选代码的原始位置已替换为新用户控件的实例。

页面自动更新为使用新用户控件
按 F5 运行页面并验证控件是否正常工作。

练习 3：JavaScript 编辑器中的新增功能

编写或编辑 JavaScript 代码并非易事，尤其是在应用程序开始大小增长时，你会发现自己处理长文件和数百个函数。脚本开发人员通常必须执行一些额外的工作来维护代码易读性并跨文件导航。随着 JavaScript 库（如 jQuery）的包含，脚本导航由于代码长度而成为挑战本身。

Visual Studio 更新了 JavaScript 编辑器，承诺使代码模式易于访问和组织。 C# 或 VB 编辑器中已存在的许多 Visual Studio 功能现在在 JavaScript 编辑器中实现：在编写时转到定义、自动缩进、文档和验证。使用更新的 IntelliSense 列表，你将有 JavaScript 函数目录的指尖。

在本练习中，你将了解 JavaScript 编辑器的一些新功能和改进。你将浏览示例文件并发现每个新特征，使 JavaScript 编程在 Visual Studio 2012 中更高效。

任务 1 - JavaScript 编辑器新功能

此任务将介绍一些新的 JavaScript 编辑器功能，这些功能侧重于组织代码并提供更好的用户体验。

如果尚未打开，请启动 Visual Studio 并打开位于本实验室的 Source\WhatsNewASPNET 文件夹中的 WhatsNewASPNET.sln 解决方案。
按 F5 运行应用程序，然后单击导航栏中的 JavaScript 链接。多次刷新页面，并检查计数器如何递增。

页面计数器
关闭浏览器并返回到 Visual Studio。
打开JavaScript.aspx页，找到<脚本>块（如下所示）。

以下代码使用 HTML5 本地存储来存储一个 pageLoadCount 变量，该变量存储当前用户访问页面的次数。本地存储是使用 HTML5 标准引入的客户端键值数据库。数据保存在用户浏览器内的本地计算机上。
```
<script>
  addCount(1);
  document.getElementById('count').innerHTML = getCount();

  function getCount() {
    var storage = window.localStorage;
    if (!storage.pageLoadCount)
      storage.pageLoadCount = 0;

    return storage.pageLoadCount;
  }

  function addCount(value) {
    window.localStorage.pageLoadCount = parseInt(getCount(), 10) + value;
  }

  ...   
</script>
```
注意

在继续执行后续步骤之前，请确保 DOCTYPE 设置为 XHTML5。
编辑代码并注意，适用于 JavaScript 的 IntelliSense 包括 HTML5 功能，例如本地存储及其内部方法。

JavaScript 中的 HTML5 JavaScript 功能
从脚本代码中单击任何左括号（{），并注意到括号已突出显示。

突出显示方括号
取消注释函数 testAutoAlign（） （选择三行，可以使用 CTRL + K; Ctrl + U）并在函数代码中定位光标。按 Enter 可追加第二行。请注意，代码现在 已对齐 并 自动缩进。

JavaScript 代码自动对齐

任务 2 - 验证 JavaScript

在此任务中，你将发现 ECMAScript5 标准的新 JavaScript 验证。此功能将帮助你编写合规的 JavaScript 代码，同时防止在站点部署之前出现脚本问题。

注意

Visual Studio 2010 实现了 ECMAStript3 符合性，而 Visual Studio 2012 提供 ECMAScript5 符合性。

打开位于 Scripts\custom 项目文件夹下的ECMA5script5.js。现在，你将测试 ECMAScript5 标准的验证。
```
"use strict";

if (true) {
    function StrictModeError()
    {
    }
}
```
可以在文件的第一行中查看“ 使用严格 ”方向，从而启用 ECMAScript5 严格模式。此模式包含一部分语言，用于阐明过去版本中的歧义，并添加了一些新功能，例如 getter 和 setter、JSON 库支持，以及对对象属性的更完整的反射。
打开错误列表（如果尚未打开）（视图菜单 | 错误列表）。请注意，函数声明带有下划线。这是因为在 ECMA5 标准函数中不能嵌套在语言结构中。在下面的错误列表中，你将看到警告详细信息。

JavaScript 验证错误消息
注释掉 “使用严格” 的方向，并注意到错误消失，但警告仍然存在。
在文件的最后一行中，写入任何字符串（如 “test” ）（包括引号以指示它为字符串）。在字符串旁边编写句点以显示 IntelliSense 列表，然后选择剪裁选项。

在 ECMAScript5 标准中，字符串值和变量还定义了字符串方法，如剪裁、大写、搜索和替换。

JavaScript 中的 IntelliSense 列表

任务 3 - JavaScript 的 XML 文档

在此任务中，你将了解 JavaScript 中 XML 文档的 Visual Studio 功能。现在会看到 JavaScript IntelliSense 列表显示每个函数的 XML 文档。此外，你将在 JavaScript 中发现导航功能。

打开位于 Scripts/自定义项目文件夹中的XMLDoc.js文件。此文件包含每个 JavaScript 函数的 XML 文档。

集成到 IntelliSense 的 JavaScript XML 文档
在XMLDoc.js文件中添加函数下方，创建名为测试的新函数。
在测试函数中，调用接收两个参数的乘法函数。请注意，工具提示框显示乘法函数文档。
```
function test() {
  multiply(
}
```
JavaScript 函数的 XML 文档
完成函数调用语句并键入一个点以打开返回值上的 IntelliSense 列表。请注意，Visual Studio 正在检测文档中的返回值，并将该值视为数字。

返回类型的 XML 文档
现在，插入用于添加函数的调用。请注意，JavaScript 编辑器现在支持函数重载。编写函数名称时，将能够选择文档中指定的任何可用重载。

重载的 XML 文档
打开 GotoDefinition.js 文件，找到 $（）.html（） 函数调用。在 html 上找到光标。
按 F12 并导航到定义。请注意，现在无需使用 Find 工具即可访问和浏览 JavaScript 代码。
在代码文件底部的签名块之前，在 jQuery 指令上找到光标。按 F12。将导航到 jQuery 库文件。请注意，还可以使用 F12 浏览 jQuery 文件。

导航到 jQuery 定义

注意

保存文件之前，请确保GotoDefinition.js没有语法错误。

练习 4：捆绑和缩小

网站包含多个 JavaScript 或 CSS 文件有多少次？这是一种非常常见的方案，捆绑和缩小有助于减小文件大小，并使站点执行速度更快。 ASP.NET 4.5 中的新捆绑功能将一组 JS 或 CSS 文件打包到单个元素中，并通过缩小内容（即删除不需要的空格、删除注释、减少标识符）来减小其大小。

在运行时执行 ASP.NET 4.5 中的捆绑和缩小，以便该过程可以标识用户代理（例如 IE、Mozilla 等），从而通过面向用户浏览器（例如，删除请求来自 IE 时特定于 Mozilla 的内容）来改进压缩。

在本练习中，你将了解如何在 ASP.NET 4.5 中启用和使用不同类型的捆绑和缩小。

任务 1 - 从 NuGet 安装捆绑包和缩小包

如果尚未打开，请启动 Visual Studio 并打开位于本实验室的 Source\WhatsNewASPNET 文件夹中的 WhatsNewASPNET.sln 解决方案。
打开 NuGet 程序包管理器控制台。为此，请使用“查看 | 其他 Windows | ”菜单程序包管理器控制台。

打开包管理器控制台
在程序包管理器控制台中，键入 Install-Package Microsoft.Web.Optimization，然后按 Enter。

任务 2 - 默认捆绑包

使用捆绑和缩小的最简单方法是启用默认捆绑包。此方法使用约定来引用文件夹中 JS 和 CSS 文件的捆绑和缩小版本。

在此任务中，你将了解如何启用和引用捆绑和缩小的 JS 和 CSS 文件并查看生成的输出。

如果尚未打开，请启动 Visual Studio 并打开位于本实验室的 Source\WhatsNewASPNET 文件夹中的 WhatsNewASPNET.sln 解决方案。
在解决方案资源管理器中，展开“样式”、“脚本”\“自定义”和“脚本”\捆绑文件夹。

请注意，应用程序正在使用多个 CSS 和 JS 文件。

应用程序中的多个样式表和 JavaScript 文件
打开 Global.asax.cs 文件。

请注意，新的 Microsoft.Web.Optimization 命名空间在文件的开头注释掉。取消注释 using 指令以包括捆绑和缩小功能。
```
using System;
using Microsoft.Web.Optimization;
```

找到Application_Start方法。

在此方法中，取消注释 EnableDefaultBundles 调用，如以下代码片段所示。这使我们能够通过使用该文件夹的路径以及“CSS”或“JS”后缀来引用文件夹中 CSS 文件的捆绑集合。

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js 
    BundleTable.Bundles.EnableDefaultBundles();

    ...
}

打开Optimization.aspx文件，找到 HeadContent 的内容控件。

请注意 CSS 文件和 JS 文件具有单个引用的标记。
```
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <link href="Styles/CSS" rel="stylesheet" type="text/css" />
  <script src="Scripts/custom/JS"></script>
</asp:Content>
```
注意

此代码用于演示目的。理想情况下，你将引用 Site.Master 文件中的捆绑包。在此示例代码中，你会发现 Site.Master 文件也引用了一些捆绑文件，因此最后一个引用是冗余的。
请注意，链接使用 href 属性中的捆绑约定分别从 Styles 和 Scripts\custom 文件夹中获取所有 CSS 或 JS 文件。

可以使用路径 Scripts/custom/JS，如下所示捆绑和缩小 Scripts/自定义文件夹中的所有 JS 文件。这是默认捆绑包的默认行为。
```
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
```
打开 Styles\Site.css 文件。

请注意，原始 CSS 文件包含缩进的代码、空白和放大文件的注释。（JavaScript 文件还包含空格和注释）。

脚本文件夹中的原始 CSS 文件之一
按 F5 运行应用程序并导航到 “优化 ”页。
单击 CSS 捆绑包 链接以下载并打开该文件。

查看缩小的捆绑文件。你会注意到，已删除所有空白、注释和缩进字符，并生成较小的文件。

捆绑的 CSS 文件
现在，单击 JS 捆绑 链接打开 JavaScript 捆绑文件。可以安全地忽略资源管理器警告。请注意，自定义文件夹下的 JavaScript 文件也会捆绑和缩小。

捆绑的 JavaScript 文件

在以前的 ASP.NET 版本中，为 CSS 或 JS 文件启用压缩要复杂得多。现在，正如你所看到的，只需在 Global.asax 文件中添加一行即可启用捆绑，然后从站点引用捆绑文件。

任务 3 - 静态捆绑包

使用静态捆绑方法可以自定义要捆绑的文件集、引用和缩小方法。

在此任务中，你将配置一个静态捆绑包，以定义要捆绑和缩小的特定文件集。

关闭浏览器。
打开 Global.asax.cs 文件并找到 Application_Start 方法。

取消注释静态捆绑代码，如下面的代码所示。

你正在定义一个静态捆绑包，该捆绑包将使用“~/StaticBundle”虚拟路径引用，并使用 JsMinify 通过 AddFile 方法缩小所有指定文件。最后，将静态捆绑包添加到 BundleTable 并启用它。

请注意，文件不在同一位置;这是默认捆绑的另一个优势。

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    Bundle b = new Bundle("~/StaticBundle", typeof(JsMinify));
    b.AddFile("~/scripts/custom/ECMAScript5.js");
    b.AddFile("~/scripts/custom/GoToDefinition.js");
    b.AddFile("~/scripts/bundle/JScript1.js");
    b.AddFile("~/scripts/bundle/JScript2.js");

    BundleTable.Bundles.Add(b);

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it: http://localhost:54716/scripts/coffee
    // DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    // BundleTable.Bundles.Add(fb);
}

打开 Optimization.aspx 文件。

请注意，指向静态 JS 捆绑包的链接使用在 Global.asax.cs 文件中配置静态捆绑包时声明的路径：/StaticBundle。

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

按 F5 运行应用程序，然后导航到 “优化 ”页。
单击 “静态 JS 捆绑包 ”链接以打开该文件。

请注意，缩小的捆绑 JavaScript 文件是路径“/StaticBundle”下静态捆绑文件中配置的所有 JavaScript 文件的输出。

静态 JavaScript 文件捆绑包
关闭浏览器并返回到 Visual Studio。

任务 4 - 动态文件夹捆绑包

在此任务中，你将了解如何配置动态文件夹捆绑包。动态捆绑的强大功能是，可以包括静态 JavaScript 以及编译为 JavaScript 的语言中的其他文件，因此，在执行捆绑之前需要一些处理。

在此示例中，你将了解如何使用 DynamicFolderBundle 类为使用 CofeeScript 编写的文件创建动态捆绑包。 CofeeScript 是一种编程语言，可编译为 JavaScript 并提供更简单的语法来编写 JavaScript 代码，增强 JavaScript 的简洁性和可读性。

打开 Global.asax.cs 文件并找到 Application_Start 方法。

取消注释动态捆绑代码，如下面的代码所示。

你正在定义一个动态文件夹捆绑包，该捆绑包将使用 CoffeeMinify 自定义缩小处理器，该处理器仅适用于扩展名为“.coffee”的文件（CoffeeScript 文件）。请注意，可以使用搜索模式选择要捆绑在文件夹内的文件，例如“*.coffee”。

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    ...

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it:
         // http://localhost:54716/scripts/coffee
    DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    BundleTable.Bundles.Add(fb);
}

打开 NuGet 程序包管理器控制台。为此，请使用“查看 | 其他 Windows | ”菜单程序包管理器控制台。
在程序包管理器控制台中，键入 Install-Package CoffeeSharp，然后按 Enter。
单击解决方案资源管理器窗口中的“显示所有文件”按钮

显示所有文件
右键单击解决方案资源管理器中的CoffeeMinify.cs文件，然后选择“包含在项目中”

在项目中包括CoffeeMinify.cs文件
打开 CoffeeMinify.cs 文件。

此类继承自 JsMinify 以缩小由 CoffeeScript 代码编译生成的 JavaScript 输出。它调用 CoffeeScript 编译器以先生成 JavaScript 代码，然后将其发送到 JsMinify.Process 方法以缩小生成的代码。
```
public class CoffeeMinify : JsMinify
{
    public override void Process(BundleResponse bundle)
    {
        var compiler = new CoffeeScriptEngine();
        bundle.Content = compiler.Compile(bundle.Content);

        base.Process(bundle);
    }
}
```
从 Scripts/bundle 文件夹中打开 Script1.coffee 和 Script2.coffee 文件。

这些文件将包括要编译的 CoffeScript 代码，同时执行与 CoffeeMinify 类的捆绑。

为简单起见，提供的 CoffeeScript 文件仅包括 CoffeeScript 示例代码。注释由 JsMinify 进程排除。

CoffeeScript 文件

注意

CofeeScript 提供更简单的语法来编写 JavaScript 代码、增强 JavaScript 简洁性和可读性，以及添加数组理解和模式匹配等其他功能。

打开 Optimization.aspx 文件并找到捆绑链接。

请注意，动态 JS 捆绑包的链接是使用为动态文件夹捆绑包配置的 /Coffee 后缀来引用 Scripts/bundle 文件夹。

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

按 F5 运行应用程序，然后导航到 “优化 ”页。
单击 “动态 JS 捆绑包 ”链接以打开生成的文件。

请注意，此捆绑包中包含的内容仅包含 .coffee 文件。你还可以看到 CoffeeScript 代码已编译为 JavaScript，并删除了注释掉的行。

动态 JS 文件捆绑包

注意

此外，可以按照附录 B 将此应用程序部署到 Windows Azure 网站：使用 Web 部署发布 ASP.NET MVC 4 应用程序。

总结

本实验室可帮助你了解 Visual Studio 2012 中 ASP.NET 和 Web 开发中的新增功能，以及如何利用 Visual Studio 2012 中的各种增强功能。

通过完成此动手实验室，你已了解如何在 Visual Studio 2012 编辑器中为 CSS、JavaScript 和 HTML 使用新功能和改进。此外，你还了解了 Visual Studio 2012 如何实现内置捆绑和缩小。

附录 A：安装 Visual Studio Express 2012 for Web

可以使用 Microsoft Web 平台安装程序安装 Microsoft Visual Studio Express 2012 for Web 或其他“Express”版本。以下说明指导你完成使用 Microsoft Web 平台安装程序 安装 Visual Studio Express 2012 for Web 所需的步骤。

转到 [/iis/extensions/introduction-to-iis-express/iis-express-overview？linkid=9810169]（/iis/extensions/introduction-to-iis-express/iis-express-overview？linkid=9810169）。或者，如果已安装 Web 平台安装程序，可以打开它并搜索产品“Visual Studio Express 2012 for Web with Windows Azure SDK”。
单击“立即安装”。如果没有 Web 平台安装程序 ，将重定向以先下载并安装它。
Web 平台安装程序打开后，单击“安装”以启动安装程序。

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

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

安装进度
安装完成后，单击“ 完成”。

安装已完成
单击“退出”关闭 Web 平台安装程序。
若要打开 Visual Studio Express for Web，请转到“开始”屏幕并开始编写“VS Express”，然后单击 VS Express for Web 磁贴。

VS Express for Web 磁贴

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

本附录介绍如何从 Windows Azure 管理门户创建新网站，并发布通过遵循实验室获取的应用程序，并利用 Windows Azure 提供的 Web 部署发布功能。

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

转到 Windows Azure 管理门户，使用与订阅关联的Microsoft凭据登录。

注意

借助 Windows Azure，可以免费托管 10 个 ASP.NET 网站，然后在流量增长时进行缩放。可以在此处注册。

登录到 Windows Azure 管理门户
单击命令栏上的“ 新建 ”。

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

注意

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

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

浏览到新网站

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

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

注意

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

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

保存发布配置文件

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

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

需要SQL 数据库服务器来存储应用程序数据库。可以在 Sql 数据库服务器 | 服务器的仪表板的 Windows 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 解决方案。在解决方案资源管理器中，右键单击网站项目并选择“发布”。

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

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

注意

在“验证连接”按钮旁边显示绿色复选标记后，验证将完成。

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

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

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

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

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

发布到 Windows Azure 的应用程序