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

项目
07/13/2023

新版本的 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 解决方案。
在解决方案资源管理器中，打开 Styles 文件夹下的Site.css 文件。确保 “文本编辑器” 工具在工具栏上可见。为此，请选择“视图 | 工具栏”菜单选项，然后检查“文本编辑器”选项。你会注意到，自此新版本以来，CSS 编辑器还启用了“ 注释 ”按钮 ( ) “和” 取消注释 “按钮 ( ) 。

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

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

启用分层缩进
找到main类定义 (.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 列表，并键入 radius 以筛选列表。双击从列表中选择 边框半径 选项，然后按 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 列表，键入 box-shadow 并按 TAB 键两次以在类定义中插入默认阴影代码片段。将阴影值设置为 10px 10px 5px #888。然后，键入 border-radius 并插入代码片段。键入 15px 以设置半径大小，然后按 Enter。

带

带阴影的圆角

注意

此时，阴影属性插入了相应的前缀 (moz、webkit、o) ，以支持 Mozilla 和 Webkit (Chrome、Safari、Konkeror) 浏览器。
在 div.images ul li img 类 定义下方创建新的 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 页面。请注意，图像具有圆角和框阴影。将鼠标悬停在图像上，watch它们旋转。

转换旋转图像的代码片段

注意

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

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

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

与 CSS 编辑器一样，HTML 编辑器也得到了改进。这些改进大多是小型改进，使 Web 开发人员的生活更轻松。其中一些改进包括 HTML5 代码片段、智能缩进、在编辑和验证 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
将光标置于 body 元素下，然后开始键入 HTML5 元素的名称， (例如视频) 。请注意，元素在 IntelliSense 列表中不可用。

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

在 HTML 源编辑工具栏中重置 Doctype
将光标置于 body 元素下，然后再次开始键入 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 代码片段。在此任务中，你将使用其中一些代码片段。

将名为 audio 的新文件夹添加到网站文件夹的根目录。打开 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

如果键入 <grid ，将获取与字词匹配的所有项，但 Visual Studio 将建议 gridview 控件：

插入具有 IntelliSense 列表和部分匹配的 GridView

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

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

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

菜单

菜单控件的智能任务

任务 5 - 智能缩进

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

注意

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

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

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

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

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

任务 6 - 提取到用户控件

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

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

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

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

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

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

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

编写或编辑 JavaScript 代码并非易事，尤其是当应用程序开始增大，并且你发现自己需要处理长文件和数百个函数时。脚本开发人员通常必须执行一些额外的工作来保持代码的可读性和跨文件导航。随着 jQuery 等 JavaScript 库的加入，由于代码长度的原因，脚本导航本身就成了一项挑战。

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 中的导航功能。

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

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

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

重

重载的 XML 文档
打开 GotoDefinition.js 文件并找到 $ () .html () 函数调用。在 html 上找到光标。
按 F12 并导航到定义。请注意，现在无需使用 “查找 ”工具即可访问和浏览 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/custom 文件夹中的所有 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 文件还包含空格和注释) 。

Scripts 文件夹中的原始 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 文件。

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

为简单起见，提供的 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：使用 Web 部署发布 ASP.NET MVC 4 应用程序，将此应用程序部署到 Windows Azure 网站。

总结

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

通过完成本Hands-On实验室，你已了解如何使用适用于 CSS、JavaScript 和 HTML 的 Visual Studio 2012 编辑器中的新功能和改进。此外，你还了解了 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 所需的步骤。

转到 [https://go.microsoft.com/?linkid=9810169] (https://go.microsoft.com/?linkid=9810169) 。或者，如果已安装 Web 平台安装程序，则可以打开它并搜索产品“Visual Studio Express 2012 for Web with Windows Azure SDK”。
单击“ 立即安装”。如果没有 Web 平台安装程序 ，将重定向到先下载并安装它。
Web 平台安装程序 打开后，单击“ 安装 ”以启动安装程序。

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

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

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

安装已完成
单击“ 退出 ”关闭 Web 平台安装程序。
若要打开 web Visual Studio Express，请转到“开始”屏幕并开始编写“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 网站，然后随着流量的增长而扩展。可以在此处注册。

登录到 Microsoft 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 网站。

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

保存发布配置文件

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

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

需要一个SQL 数据库服务器来存储应用程序数据库。可以在 Windows Azure 管理门户中的 Sql 数据库服务器 | | 服务器的仪表板中查看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 的应用程序