今天们要介绍的是在ASP.NET MVC 2中使用jQuery UI控件，其实在在Visual Studio 2015中创建新的MVC 2项目时，实际上已经包括了jQuery核心库。
AD： Xtreme Toolkit Pro - 界面套包 —正版、购买、下载、价格、销售、代理、授权、技术支持尽在控件中国网
问：想给ASP.NET MVC输入表单添加一个日期选择控件，但模型-视图-控制器（MVC）并没有提供这样的辅助方法，该如何添加控件？
答：和ASP.NET Web表单不一样，MVC架构没有提供可以在设计面板中拖放的有状态的服务端控件，相反，MVC鼓励使用简单的HTML布局元素和基于数据的标签作为页面布局的要素，功能和最终的布局用客户端JavaScript和CSS样式表控制。
MVC提供了一套基于HtmlHelper的扩展方法渲染大部分HTML标签，对于更复杂的功能，你需要自己编写HTML/JavaScript代码，购买第三方MVC控件包或使用开源的JavaScript库，目前最流行的开源JavaScript库是jQuery，当你在Visual Studio 2015中创建新的MVC 2项目时，实际上已经包括了jQuery核心库。
jQuery架构一直遵循 不唐突JavaScript（Unobtrusive JavaScript） 的原则，它将HTML标签和添加客户端行为的JavaScript脚本分离开来，使用这个技术，开发人员可以使用简单的 div ， span 和 table 标签及class属性创建页面布局，使用没有连接JavaScript事件的HTML列表，锚和基于表单的标签收集和显示数据，最终的页面将会很干净，在任何浏览器中都能显示，并且更适合搜索引擎机器人抓取。开发人员在文档对象模型（DOM）中给选中的控件添加jQuery脚本，并添加属性、事件和额外的标签，这个脚本创建具体的外观，对UI行为进行响应，执行动画和管理远程调用。
jQuery库细分为核心库和其它插件库，包括一套UI小部件，核心库提供选择、设定样式、DOM操作和Ajax功能，jQuery库可以通过创建插件的形式进行扩展，jQuery UI是一套插件，它包括许多高级行为，如对话框、拖放和调整大小、主题部件，如自动完成，侧边栏，标签和日期选择器。
jQuery UI插件Xtreme Toolkit Pro - 界面套包 —正版、购买、下载、价格、销售、代理、授权、技术支持尽在控件中国网
如果要使用UI库，必须先从jQuery UI网站下载它，在网站主页你可以生成一个自定义版本下载，在准备好下载前，请注意选择你要使用的组件（默认选中了所有组件），组件版本（通常应该选择最新版本）和一个预配置的主题，然后下载并解压.zip文件，在解压后的文件夹下，你应该会看到多个文件夹，包括CSS和JS文件夹。
将你下载的自定义主题添加到项目中，从CSS目录下将style文件夹复制到MVC项目的Content文件夹下，从js文件夹下将自定义jQuery UI脚本库复制到项目的Script文件夹下。下载了最新的1.8.4版本，如果你想使用Web部署包部署项目，一定要添加style文件夹和JavaScript文件到Visual Studio项目中，否则你会发现程序在本地环境中可以运行，但到了生产环境就会失败。
ASP.NET MVC架构由模型、视图和控制器组成，模型简单说就是使用DataAnnotation属性装饰过的数据类，所有URL都转换成调用控制器上的公共方法，控制器操作传递给它的数据，并创建视图需要的数据，视图的主要任务是渲染控制器创建的数据，视图和ASP.NET页面有点类似，但它后面没有代码，视图可以是强类型，这意味着它们期望建立一个数据对象控件传递给它们进行渲染，这个对象在整个视图中可以通过一个强类型模型变量访问，为了渲染基于表单的控件，如文本框和单选按钮变得更容易，视图使用了一套HtmlHelper方法，通过一个叫做Html的变量访问。这些扩展方法通常基于Model类和字段上的DataAnnotation属性访问模型的模型数据和元数据。
将下面的脚本添加到视图页面的Master页面（默认是Site.Master），用你下载的jQuery UI库替换 your style here ，这里使用 微软 风格。
link href= %=Url.Content( ~/Content/ your style here /jquery-ui-1.8.4.custom.css )% rel= stylesheet type= text/ css / script type= text/javascript src= %=Url.Content( ~/Scripts/ jquery-1.4.1.min.js )% /script script type= text/javascript src= %=Url.Content( ~/Scripts/ jquery-ui-1.8.4.custom.min.js )%
确保jQuery核心库（这里是jquery-1.4.1.min.js）的script标签出现在jQuery UI库的标签前，否则当你运行程序时，你会收到一个类似于 jQuery未定义 的脚本错误。
为了给视图页面增加日历控件，首先使用HtmlHelper TextBox扩展方法给视图添加一个TextBox：
%= Html.TextBox( TestDatePicker , Model.TestDatePicker.ToString( d ), new { @class = myDatePickerClass })%
所有获得代表一个C#类实例的Model变量的强类型视图页面通过控制器传递给视图，在这个例子中，Model指的是包含一个DateTime字符（TestDatePicker）的类，注意TextBox使用ToString()方法为TestDate-Picker字段设置了一个初始格式化的值，这是必需的，因为jQuery DatePicker控件只有当你在日历控件中选择了一个日期后才会应用它的dateFormat选项。
接下来，向Master页面添加下面的jQuery脚本，myDatePickerClass类必须和添加到TextBox的类匹配。
script type= text/javascript $(document).ready( function () { $( .myDatePickerClass ).datepicker({ buttonImage: ' %=Url.Content( ~/Content/ images/calendar.gif )% ', dateFormat: 'm/d/yy', showOn: 'button', buttonImageOnly: true }) } ); /script
打开页面，当你点击文本框右侧的日历图标时，将会看到一个如图1所示的日历控件，选择一个日期填充到文本框中，你也可以修改文本框中的日期，弹出的日历控件会做出相应的变化，注意jQuery不会允许你在文本框中输入一个无效的日期。
Xtreme Toolkit Pro - 界面套包 —正版、购买、下载、价格、销售、代理、授权、技术支持尽在控件中国网