XML与WEB Service技术(微软)：第08章 在ASPNET中使用jQuery

1、第8章 在ASP.NET中使用jquery08 七月 20222第8章 在ASP.NET中使用jQuery8.1 jQuery UI及其基本操作8.2 联合使用ASP.NET AJAX和jQuery UI8.3 jQuery代码和C#代码之间的数据交互8.4 利用jQuery Validate实现客户端数据验证08 七月 202238.1 jQuery UI及其基本操作jQuery UI是一套专门用于界面交互的JavaScript库，开发人员利用它可以非常方便地控制页面的互动效果，快速在客户端开发出风格一致的Web界面。下载jQuery UI的方式很简单，从jQuery的官方网站直接免费下载即

2、可。下载时，jQuery UI提供了不同的主题（Themes）供开发人员选择和定制。 也可以从微软的CDN免费下载或引用jQuery UI，该网站同时提供了针对VS2010的jQuery智能提示，并给出了在ASP.NET中使用jQuery UI的基本用法。 8.1.1 jQuery UI的选项和方法1方法（method）每个jQuery UI都提供了一些方法，这些方法一般用于对选项（option）进行操作。 基本格式为：$(selector).方法名(参数); 2初始化选项（option）每个jQuery UI方法中都提供了很多选项（option），通过jQuery提供的方法初始化UI对象时，

3、可以在方法的参数中同时初始化选项的值。基本格式为：.方法名(选项名1:值1, 选项名2:值2, , 选项名n:值n)参数中每个选项（option）由optionName和value组成 8.1.1 jQuery UI的选项和方法3获取或设置选项的值利用初始化方法创建jQuery对象以后，即可获取或设置这些选项的值。基本格式为： $(selector).方法(option,optionName,value)不带value参数时，表示获取选项的值，带value参数时表示设置选项的值。 例如：/获取disabled选项的值var disabled = $( .selector ).accordion

4、( option, disabled );/设置disabled选项的值$( .selector ).accordion( option, disabled, true );9.1.2 拖动（draggable）jQuery UI提供的draggable方法用于控制块级元素的鼠标拖动，被拖动的元素一般用div来实现。 下面的代码说明了draggable的基本用法：可拖放$(#div1).draggable();【例8-1】演示利用jQuery UI实现鼠标拖动的基本用法。 8.1.3 拖放（Droppable）jQuery UI提供的droppable方法用于控制将拖放元素放置到拖放目标区域内

5、的行为，它和draggable的用法相似。【例8-2】演示用鼠标拖放某个元素到另一个目标元素的基本用法。 8.1.4 改变元素大小（resizable）jQuery UI提供的resizable方法用于改变元素的宽和高，既可以分别改变宽和高的值，也可以按比例改变宽和高的值。利用resizable缩放某个子窗口非常方便。 【例8-3】演示resizable的基本用法。 8.1.5 选择（selectable）jQuery UI提供的selectable方法一般用于选择一个或多个选项【例8-4】演示selectable的基本用法。 8.1.6 排序（sortable）jQuery UI提供的sor

6、table方法用于对元素排序。将selectable和sortable结合起来，能通过鼠标拖放动态设置元素的顺序。【例8-5】演示sortable的基本用法。 8.2 联合使用ASP.NET AJAX和jQuery UIASP.NET AJAX为基于服务器的ajax开发提供了方便的开发架构，jQuery UI则为客户端界面提供了方便的设计手段。联合使用这两种技术，能使Web开发的效率如虎添翼。jQuery UI提供的界面互动构件（widget）实现了对块级元素的界面互动功能，这里的构件是指由多个HTML元素构成的UI组件，也包括ASP.NET Web服务器控件。 最理想的办法就是将ASP.NE

7、T AJAX和jQuery结合起来，这样可以同时集成两种架构的优点，既能快速解决服务器和客户端开发中遇到的难题，又能大大简化设计的难度，既缩短了项目开发周期，也保证了程序的健壮性。 8.2.1 PageRequestManager类PageRequestManager类在ASP.NET客户端架构的Sys.WebForms命名空间下，该类提供了异步发送和回传的客户端事件，利用这些事件，就可以在ASP.NET AJAX中同时使用服务器控件、HTML元素以及jQuery UI，而且也能快速实现页面局部更新的效果。 要使用这些客户端事件、属性和方法，首先需要利用客户端脚本获取ASP.NET AJAX自

8、动生成的PageRequestManager对象：var prm = Sys.WebForms.PageRequestManager.getInstance();8.2.1 PageRequestManager类在ASP.NET AJAX的Web窗体页面的生命周期中，客户端第1次加载页面时，将首先触发PageRequestManager对象的pageLoaded事件，以后每次异步请求和回发都会依次触发下面的事件：initializeRequest事件、beginRequest事件、pageLoading事件、pageLoaded事件、endRequest事件。1. initializeRequ

9、est事件该事件在异步请求的回送被初始化之前触发。 2. beginRequest事件 该事件在异步请求初始化完成后、向服务器提交请求之前触发。 8.2.1 PageRequestManager类3. pageLoading事件 该事件在异步请求已经被服务器接收并响应，但还没有对页面进行任何更新之前触发。4. pageLoaded事件 该事件在异步回送完成而且页面区域被更新之后触发。在这个事件中，我们可以利用jQuery UI处理HTML元素和服务器控件对象。8.2.1 PageRequestManager类5. endRequest事件 该事件在异步请求和回送处理完毕后触发。一般在该事件中结

10、束动画告知用户异步请求处理完毕。在客户端脚本中，还可以利用endRequest事件的arg参数处理异步回送的结果。 6.在异步处理过程中可以使用的方法 prm.get_isInAsyncPostBack()：判断是否为异步回送。prm.abortPostBack()：取消正在执行的异步回送。8.2.2 拉帘式折叠面板（accordion）jQuery UI的拉帘式折叠面板的效果就像拉帘式窗帘一样，可以全部折叠所有项，也可以展开其中的某一项。 用jQuery UI构造accordion构件时，每一项的标题块用h标记来实现，标题块内的标题用a标记实现；对应项的内容用div来实现。定义HTML后，调

11、用accordion()方法即可。 First header First content Second header Second content $(#accordion).accordion();8.2.2 拉帘式折叠面板（accordion）常用方法1. accordion(options)该方法用于初始化一个或多个选项，每个选项的选项名和选项值之间用冒号分隔，多个选项之间用逗号分隔。 2. accordion( option , optionName , value ) 该方法用于获取或设置指定的选项。不指定value值时为获取optionName选项的值，指定value值时为设置op

12、tionName选项的值为value。 $(“#accordion”).accordion(“option”,“disable”); /禁用折叠3. accordion(optionName) 该方法用于执行选项名指定的功能，参数optionName表示选项名。 8.2.2 拉帘式折叠面板（accordion）常用事件 1. create事件 事件类型：accordioncreate，当创建可折叠面板时触发。例如 初始化：$( .selector ).accordion(create: function(event, ui) . );绑定创建事件：$( .selector ).bind( ac

13、cordioncreate, function(event, ui) .);2. change事件 事件类型：accordionchange，当更改accordion时触发。如果有动画，则动画完成后触发，否则立即触发。 8.2.2 拉帘式折叠面板（accordion）【例8-6】演示在UpdatePanel内利用accordion实现折叠面板的基本用法，单击左侧accordion内的按钮时，在右侧用动画表示异步提交和更新的过程。8.2.3 自动完成（autocomplete）当在文本框中输入一些文字内容时，利用jQuery UI的autocomplete实现自动完成选项提示，能让用户快速选择键

14、入的内容。【例8-7】演示在ASP.NET AJAX中实现自动完成功能的基本用法。 8.2.4 按钮（button）jQuery UI的button的作用是将指定的元素显示为按钮样式。常用有两种方法：$(selector).button(); /将选择器选择的元素作为按钮样式$(selector).buttonset(); /将选择器选择的元素作为按钮选项 【例8-8】演示按钮的基本用法。 8.2.5 日期选择（datepicker）jQuery UI的日期选择用于显示一个日历，然后让用户从中选择年、月、日，选择的内容将自动添加到文本框中。常用选项 maxDate : Date、Number、

15、String，默认为null。 功能：设置一个最大的可选日期。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串（y代表年, m代表月, w代表周, d代表日，例如：+1m +7d）。 minDate : Date、Number、String，默认为null 功能：设置一个最小的可选日期。用法与maxDate相似。numberOfMonths : Number、Array，默认为1。 功能：设置一次要显示多少个月份。 8.2.5 日期选择（datepicker）常用方法 destory：从元素中移除拖拽功能。用法：.datepicker( destroy );disabl

16、e：禁用元素的拖拽功能。用法：.datepicker( disable );enable：启用元素的拖拽功能。用法：.datepicker( enable );option：获取或设置元素的参数。用法：.datepicker( option , optionName , value );多语言支持 多语言支持实际上就是本地化（Localization）设置。如果不做本地化处理，jQuery默认使用英文。 本书用的日期中文语言包插件见jquery.ui.datepicker-cn.js。8.2.5 日期选择（datepicker）【例8-9】演示datepicker的基本用法。 8.2.6 对话

17、框（dialog）jQuery UI的对话框是一个浮动窗口，一般用div来实现，其中包含标题栏和内容区域。 调用$(selector).dialog()时，将初始化对话框实例并自动打开对话框。如果要重复使用一个对话框，最简单的方法是禁用“自动打开”选项（autoOpen: false）和使用$(selector).dialog(open)打开它。使用$( selector).dialog(close)关闭打开的对话框。8.2.6 对话框（dialog）【例8-10】演示jQuery UI模式对话框的基本用法。 8.2.6 对话框（dialog）【例8-11】演示jQuery UI非模式对话框的

18、基本用法。当在文本框内单击时，自动弹出提示对话框，鼠标离开文本框，对话框自动消失。 8.2.7 进度条（progressbar）利用jQuery UI的progressbar可以显示某项工作的进度。【例8-12】演示progressbar的基本用法。 8.2.8 滑动条（slider）jQuery UI的滑动条与进度条用法类似，区别是滑动条可以拖动，一般用于控制某些区域范围的数值。【例8-13】演示slider的基本用法。 8.2.9 页签（tabs）jQuery UI的tabs和我们在C/S模式中使用的TabControl控件的功能相似。【例8-14】演示tabs的基本用法。 8.3 jQu

19、ery代码和C#代码之间的数据交互这一节我们主要解决以下几个问题：（1）客户端jQuery代码如何和服务器端C#代码之间传递或共享数据。（2）服务器如何用C#定义Web Service供各种操作系统平台的各种语言访问。（3）客户端如何通过jQuery ajax调用服务器的Web Service。（4）代码隐藏类如何通过C#调用服务器的Web Service。 8.3.1 通过HiddenField控件传递数据在客户端用jQuery通过id获取或设置HiddenField控件的值，在服务器端用C#通过对象获取或设置HiddenField控件的值。 【例8-15】演示如何通过HiddenField

20、控件实现服务器和客户端之间的数据共享。 8.3.2 通过HTML5的data特性传递数据在HTML5中，我们可以直接定义某个标记的附加数据，这些附加数据以“data-”为前缀的自定义特性来声明，其中“data-”是关键字，其后是自定义的特性名称。例如：【例8-16】利用自定义附加数据特性，完成进度条更新功能。 9.3.3 通过RegisterDataItem方法传递数据使用Scriptmanager对象的RegisterDataItem方法可在异步回发期间将数据从服务器发送到客户端，而不需要考虑接收数据的控件是否位于UpdatePanel控件中。【例9-17】演示通过Scriptmanager

21、对象的RegisterDataItem方法传递数据的基本用法。 8.3.4 通过jQuery ajax和Web服务实现jQuery和C#的交互1. 客户端调用Web服务的基本原理在ASP.NET AJAX中，有三种服务形式：一种是ASP.NET Web服务，文件扩展名为.asmx，简称Web服务；另一种是WCF服务，文件扩展名为.svc；第三种是ASP.NET内置的应用程序服务，包括用户的身份验证、角色和配置文件信息。这三种服务都可以通过服务器C#代码和客户端jQuery直接访问。 8.3.4 通过jQuery ajax和Web服务实现jQuery和C#的交互2. 在服务器端定义Web服务或者

22、WCF服务3. 在客户端通过ASP.NET AJAX和jQuery调用服务器端的Web服务在和之间，可以直接使用ServiceReferences元素指定引用的Web服务（asmx服务或者WCF服务）4. 在客户端直接使用jQuery ajax调用Web服务8.3.4 通过jQuery ajax和Web服务实现jQuery和C#的交互【例8-18】演示在ASP.NET AJAX中，客户端脚本调用Web服务的基本用法。 8.4 利用jQuery Validate实现客户端数据验证开发Web页面时，有两种常用的数据验证技术。一种是使用jQuery验证插件在客户端进行验证；另一种是在客户端和服务器端同时进行验证。在实际的项目开发中，一般将这两种技术结合使用。jQuery Validate是jQuery官方网站提供的免费插件，也可以从微软的CDN网站上下载该插件的各种版本。 本书使用的jQuery Validate为1.9版 ；jQuery Validate默认使用英文，如果希望使用中文提示，可以自定义一个插件，本书用的自定义中文