ASP.NET MVC 2中使用jQuery UI控件详解

  问:我想给我的ASP.NET MVC输入表单添加一个日期选择控件,但模型-视图-控制器(MVC)并没有提供这样的辅助方法,我该如何添加控件?

  答:和ASP.NET Web表单不一样,MVC架构没有提供可以在设计面板中拖放的有状态的服务端控件,相反,MVC鼓励使用简单的HTML布局元素和基于数据的标签作为页面布局的要素,功能和最终的布局用客户端JavaScript和CSS样式表控制。

  MVC提供了一套基于HtmlHelper的扩展方法渲染大部分HTML标签,对于更复杂的功能,你需要自己编写HTML/JavaScript代码,购买第三方MVC控件包或使用开源JavaScript库,目前最流行的开源JavaScript库是jQuery,当你在Visual Studio 2010中创建新的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插件

  如果要使用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")%>" >

NET技术ASP.NET MVC 2中使用jQuery UI控件详解,转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。