[ASP.NET MVC 小牛之路]17 - 捆绑(Bundle)

本文介绍 MVC 4 提供的一个新特性：捆绑（Bundle），一个在  View 和 Layout 中用于组织优化浏览器请求的 CSS 和 JavaScript 文件的技术。

本文目录

当我们创建一个基本模板的 MVC 工程时，VS在Scripts文件夹中默认加入了一些 JavaScript 脚本库。下面是这些脚本库的简单介绍：

• jquery-1.8.2.js，这个就不用解释了。
• jquery-ui-1.8.24.js，在jQuery 基础上的一套界面工具，包括了网页上常见的很多插件和动画特效。
• jquery.validate.js，用于验证用户在表单内input元素输入的数据。
• knockout-2.2.0.js，是一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化，更多：http://knockoutjs.com/documentation/introduction.html。
• modernizr-2.6.2.js，一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。更多：http://www.mhtml5.com/2011/03/676.html 。
• jquery.unobtrusive-ajax.js，MVC 框架中使用 Unobtrusive Ajax 的库，更多：[ASP.NET MVC 小牛之路]14 - Unobtrusive Ajax 。
• jquery.validate.unobtrusive.js，基于 jquery.unobtrusive-ajax.js，更多：[ASP.NET MVC 小牛之路]15 - Model Binding 。

另外还有一个 _references.js 文件，它的作用是通过下面这种方式放入该文件中的JS文件可以被VS智能感知：

/// <reference path="jquery-1.8.2.js" />
/// <reference path="jquery-ui-1.8.24.js" />

相关小技巧：在VS中让一个JS文件智能提示另一个JS文件中的成员 。

在实际的项目中，我们可能远远不止引入上面这些脚本文件，MVC 4提供的“捆绑”新功能可以很方便地对引入的脚本文件进行管理。

准备工作

选择基本模板创建一个MVC工程。和前一篇的示例差不多，创建一个名为 Appointment 的 Model，代码如下：

public class Appointment {
    [Required]
    public string ClientName { get; set; }

    [DataType(DataType.Date)]
    public DateTime Date { get; set; }

    public bool TermsAccepted { get; set; }
}

Appointment