第08章 在ASPNET中使用jQuery

1、第第8章章 在在ASP.NET中使中使用用jquery2022年5月30日星期一2第8章 在ASP.NET中使用jQuery8.1 jQuery UI及其基本操作及其基本操作8.2 联合使用联合使用ASP.NET AJAX和和jQuery UI8.3 jQuery代码和代码和C#代码之间的数据交互代码之间的数据交互8.4 利用利用jQuery Validate实现客户端数据验证实现客户端数据验证2022年5月30日星期一38.1 jQuery UI及其基本操作及其基本操作ljQuery UI是一套专门用于界面交互的是一套专门用于界面交互的JavaScript库，开发人库，开发人员利用它可以非常

2、方便地控制页面的互动效果，快速在客户端员利用它可以非常方便地控制页面的互动效果，快速在客户端开发出风格一致的开发出风格一致的Web界面。界面。下载下载jQuery UI的方式很简单，从的方式很简单，从jQuery的官方网站直接免费下的官方网站直接免费下载即可。载即可。下载时，下载时，jQuery UI提供了不同的主题（提供了不同的主题（Themes）供开发人员）供开发人员选择和定制。选择和定制。 也可以从微软的也可以从微软的CDN免费下载或引用免费下载或引用jQuery UI，该网站同时提，该网站同时提供了针对供了针对VS2010的的jQuery智能提示，并给出了在智能提示，并给出了在ASP.

3、NET中使中使用用jQuery UI的基本用法。的基本用法。 8.1.1 jQuery UI的选项和方法的选项和方法l1方法（方法（method）每个每个jQuery UI都提供了一些方法，这些方法一般用于对选项（都提供了一些方法，这些方法一般用于对选项（option）进行操作。）进行操作。 基本格式为：基本格式为：$(selector).方法名方法名(参数参数);l 2初始化选项（初始化选项（option）每个每个jQuery UI方法中都提供了很多选项（方法中都提供了很多选项（option），通过），通过jQuery提供的方法初始化提供的方法初始化UI对象时，可以在方法的参数中同时初始化选

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

5、不带value参数时，表示获取选项的值，带参数时，表示获取选项的值，带value参数时表示设置参数时表示设置选项的值。选项的值。 u例如：例如：u/获取获取disabled选项的值选项的值uvar disabled = $( .selector ).accordion( option, disabled );u/设置设置disabled选项的值选项的值u$( .selector ).accordion( option, disabled, true );9.1.2 拖动（拖动（draggable）ljQuery UI提供的提供的draggable方法用于控制块级元素的鼠标拖动方法用于控制块级元

6、素的鼠标拖动，被拖动的元素一般用，被拖动的元素一般用div来实现。来实现。 下面的代码说明了下面的代码说明了draggable的基本用法：的基本用法：可拖放可拖放$(#div1).draggable();l【例例8-1】演示利用演示利用jQuery UI实现鼠标拖动的基本用法。实现鼠标拖动的基本用法。 8.1.3 拖放（拖放（Droppable）ljQuery UI提供的提供的droppable方法用于控制将拖放元素放置到拖方法用于控制将拖放元素放置到拖放目标区域内的行为，它和放目标区域内的行为，它和draggable的用法相似。的用法相似。l【例例8-2】演示用鼠标拖放某个元素到另一个目标元

7、素的基本演示用鼠标拖放某个元素到另一个目标元素的基本用法。用法。 8.1.4 改变元素大小（改变元素大小（resizable）ljQuery UI提供的提供的resizable方法用于改变元素的宽和高，既可方法用于改变元素的宽和高，既可以分别改变宽和高的值，也可以按比例改变宽和高的值。以分别改变宽和高的值，也可以按比例改变宽和高的值。l利用利用resizable缩放某个子窗口非常方便。缩放某个子窗口非常方便。 l【例例8-3】演示演示resizable的基本用法。的基本用法。 8.1.5 选择（选择（selectable）ljQuery UI提供的提供的selectable方法一般用于选择一个

8、或多个选项方法一般用于选择一个或多个选项l【例例8-4】演示演示selectable的基本用法。的基本用法。 8.1.6 排序（排序（sortable）ljQuery UI提供的提供的sortable方法用于对元素排序。方法用于对元素排序。l将将selectable和和sortable结合起来，能通过鼠标拖放动态设置结合起来，能通过鼠标拖放动态设置元素的顺序。元素的顺序。l【例例8-5】演示演示sortable的基本用法。的基本用法。 8.2 联合使用联合使用ASP.NET AJAX和和jQuery UIlASP.NET AJAX为基于服务器的为基于服务器的ajax开发提供了方便的开发架开发提

9、供了方便的开发架构，构，jQuery UI则为客户端界面提供了方便的设计手段。联合使则为客户端界面提供了方便的设计手段。联合使用这两种技术，能使用这两种技术，能使Web开发的效率如虎添翼。开发的效率如虎添翼。ljQuery UI提供的界面互动构件（提供的界面互动构件（widget）实现了对块级元素）实现了对块级元素的界面互动功能，这里的构件是指由多个的界面互动功能，这里的构件是指由多个HTML元素构成的元素构成的UI组件，也包括组件，也包括ASP.NET Web服务器控件。服务器控件。 l最理想的办法就是将最理想的办法就是将ASP.NET AJAX和和jQuery结合起来，这结合起来，这样可以

10、同时集成两种架构的优点，既能快速解决服务器和客户样可以同时集成两种架构的优点，既能快速解决服务器和客户端开发中遇到的难题，又能大大简化设计的难度，既缩短了项端开发中遇到的难题，又能大大简化设计的难度，既缩短了项目开发周期，也保证了程序的健壮性。目开发周期，也保证了程序的健壮性。 8.2.1 PageRequestManager类类lPageRequestManager类在类在ASP.NET客户端架构的客户端架构的Sys.WebForms命名空间下，该类提供了异步发送和回传的客命名空间下，该类提供了异步发送和回传的客户端事件，利用这些事件，就可以在户端事件，利用这些事件，就可以在ASP.NET

11、AJAX中同时使中同时使用服务器控件、用服务器控件、HTML元素以及元素以及jQuery UI，而且也能快速实现，而且也能快速实现页面局部更新的效果。页面局部更新的效果。 l要使用这些客户端事件、属性和方法，首先需要利用客户端脚要使用这些客户端事件、属性和方法，首先需要利用客户端脚本获取本获取ASP.NET AJAX自动生成的自动生成的PageRequestManager对对象：象：var prm = Sys.WebForms.PageRequestManager.getInstance();8.2.1 PageRequestManager类类l在在ASP.NET AJAX的的Web窗体页面的

12、生命周期中，客户端第窗体页面的生命周期中，客户端第1次加载页面时，将首先触发次加载页面时，将首先触发PageRequestManager对象的对象的pageLoaded事件，以后每次异步请求和回发都会依次触发下事件，以后每次异步请求和回发都会依次触发下面的事件：面的事件：initializeRequest事件、事件、beginRequest事件、事件、pageLoading事件、事件、pageLoaded事件、事件、endRequest事件。事件。l1. initializeRequest事件事件该事件在异步请求的回送被初始化之前触发。该事件在异步请求的回送被初始化之前触发。 l2. begi

13、nRequest事件事件 该事件在异步请求初始化完成后、向服务器提交请求之前触发。该事件在异步请求初始化完成后、向服务器提交请求之前触发。 8.2.1 PageRequestManager类类l3. pageLoading事件事件 该事件在异步请求已经被服务器接收并响应，但还没有对页面进该事件在异步请求已经被服务器接收并响应，但还没有对页面进行任何更新之前触发。行任何更新之前触发。l4. pageLoaded事件事件 该事件在异步回送完成而且页面区域被更新之后触发。该事件在异步回送完成而且页面区域被更新之后触发。在这个事件中，我们可以利用在这个事件中，我们可以利用jQuery UI处理处理HT

14、ML元素和服务器元素和服务器控件对象。控件对象。8.2.1 PageRequestManager类类l5. endRequest事件事件 该事件在异步请求和回送处理完毕后触发。该事件在异步请求和回送处理完毕后触发。一般在该事件中结束动画告知用户异步请求处理完毕。一般在该事件中结束动画告知用户异步请求处理完毕。在客户端脚本中，还可以利用在客户端脚本中，还可以利用endRequest事件的事件的arg参数处理异参数处理异步回送的结果。步回送的结果。 l6.在异步处理过程中可以使用的方法在异步处理过程中可以使用的方法 prm.get_isInAsyncPostBack()：判断是否为异步回送。：判断

15、是否为异步回送。prm.abortPostBack()：取消正在执行的异步回送。：取消正在执行的异步回送。8.2.2 拉帘式折叠面板（拉帘式折叠面板（accordion）ljQuery UI的拉帘式折叠面板的效果就像拉帘式窗帘一样，可以全部折叠所有项，也的拉帘式折叠面板的效果就像拉帘式窗帘一样，可以全部折叠所有项，也可以展开其中的某一项。可以展开其中的某一项。 l用用jQuery UI构造构造accordion构件时，每一项的标题块用构件时，每一项的标题块用h标记来实现，标题块内的标记来实现，标题块内的标题用标题用a标记实现；对应项的内容用标记实现；对应项的内容用div来实现。定义来实现。定义

16、HTML后，调用后，调用accordion()方方法即可。法即可。 First header First content Second header Second content $(#accordion).accordion();8.2.2 拉帘式折叠面板（拉帘式折叠面板（accordion）l常用方法常用方法l1. accordion(options)该方法用于初始化一个或多个选项，每个选项的选项名和选项值该方法用于初始化一个或多个选项，每个选项的选项名和选项值之间用冒号分隔，多个选项之间用逗号分隔。之间用冒号分隔，多个选项之间用逗号分隔。 l2. accordion( option ,

17、optionName , value ) 该方法用于获取或设置指定的选项。该方法用于获取或设置指定的选项。不指定不指定value值时为获取值时为获取optionName选项的值，指定选项的值，指定value值时值时为设置为设置optionName选项的值为选项的值为value。 u$(“#accordion”).accordion(“option”,“disable”); /禁用折叠禁用折叠l3. accordion(optionName) 该方法用于执行选项名指定的功能，参数该方法用于执行选项名指定的功能，参数optionName表示选项表示选项名。名。 8.2.2 拉帘式折叠面板（拉帘式折

18、叠面板（accordion）l常用事件常用事件 l1. create事件事件 事件类型：事件类型：accordioncreate，当创建可折叠面板时触发。例如，当创建可折叠面板时触发。例如 初始化：初始化：$( .selector ).accordion(create: function(event, ui) . );绑定创建事件：绑定创建事件：$( .selector ).bind( accordioncreate, function(event, ui) .);l2. change事件事件 事件类型：事件类型：accordionchange，当更改，当更改accordion时触发。如果时触

19、发。如果有动画，则动画完成后触发，否则立即触发。有动画，则动画完成后触发，否则立即触发。 8.2.2 拉帘式折叠面板（拉帘式折叠面板（accordion）l【例例8-6】演示在演示在UpdatePanel内利用内利用accordion实现折叠面板实现折叠面板的基本用法，单击左侧的基本用法，单击左侧accordion内的按钮时，在右侧用动画内的按钮时，在右侧用动画表示异步提交和更新的过程。表示异步提交和更新的过程。8.2.3 自动完成（自动完成（autocomplete）l当在文本框中输入一些文字内容时，利用当在文本框中输入一些文字内容时，利用jQuery UI的的autocomplete实现自

20、动完成选项提示，能让用户快速选择键实现自动完成选项提示，能让用户快速选择键入的内容。入的内容。l【例例8-7】演示在演示在ASP.NET AJAX中实现自动完成功能的基本中实现自动完成功能的基本用法。用法。 8.2.4 按钮（按钮（button）ljQuery UI的的button的作用是将指定的元素显示为按钮样式。的作用是将指定的元素显示为按钮样式。常用有两种方法：常用有两种方法：$(selector).button(); /将选择器选择的元素作为按钮样式将选择器选择的元素作为按钮样式$(selector).buttonset(); /将选择器选择的元素作为按钮选项将选择器选择的元素作为按钮

21、选项 l【例例8-8】演示按钮的基本用法。演示按钮的基本用法。 8.2.5 日期选择（日期选择（datepicker）ljQuery UI的日期选择用于显示一个日历，然后让用户从中选的日期选择用于显示一个日历，然后让用户从中选择年、月、日，选择的内容将自动添加到文本框中。择年、月、日，选择的内容将自动添加到文本框中。l常用选项常用选项 maxDate : Date、Number、String，默认为，默认为null。 u功能：设置一个最大的可选日期。可以是功能：设置一个最大的可选日期。可以是Date对象，或者是数字（对象，或者是数字（从今天算起，例如从今天算起，例如+7），或者有效的字符串（）

22、，或者有效的字符串（y代表年代表年, m代表月代表月, w代表周代表周, d代表日，例如：代表日，例如：+1m +7d）。）。 minDate : Date、Number、String，默认为，默认为null u功能：设置一个最小的可选日期。用法与功能：设置一个最小的可选日期。用法与maxDate相似。相似。numberOfMonths : Number、Array，默认为，默认为1。 u功能：设置一次要显示多少个月份。功能：设置一次要显示多少个月份。 8.2.5 日期选择（日期选择（datepicker）l常用方法常用方法 destory：从元素中移除拖拽功能。用法：从元素中移除拖拽功能。用

23、法：.datepicker( destroy );disable：禁用元素的拖拽功能。用法：禁用元素的拖拽功能。用法：.datepicker( disable );enable：启用元素的拖拽功能。用法：启用元素的拖拽功能。用法：.datepicker( enable );option：获取或设置元素的参数。用法：获取或设置元素的参数。用法：.datepicker( option , optionName , value );l多语言支持多语言支持 多语言支持实际上就是本地化（多语言支持实际上就是本地化（Localization）设置。）设置。如果不做本地化处理，如果不做本地化处理，jQuer

24、y默认使用英文。默认使用英文。 本书用的日期中文语言包插件见本书用的日期中文语言包插件见jquery.ui.datepicker-cn.js。8.2.5 日期选择（日期选择（datepicker）l【例例8-9】演示演示datepicker的基本用法。的基本用法。 8.2.6 对话框（对话框（dialog）ljQuery UI的对话框是一个浮动窗口，一般用的对话框是一个浮动窗口，一般用div来实现，其中来实现，其中包含标题栏和内容区域。包含标题栏和内容区域。 l调用调用$(selector).dialog()时，将初始化对话框实例并自动打开时，将初始化对话框实例并自动打开对话框。对话框。l如果

25、要重复使用一个对话框，最简单的方法是禁用如果要重复使用一个对话框，最简单的方法是禁用“自动打开自动打开”选项（选项（autoOpen: false）和使用）和使用$(selector).dialog(open)打开它。打开它。l使用使用$( selector).dialog(close)关闭打开的对话框。关闭打开的对话框。8.2.6 对话框（对话框（dialog）l【例例8-10】演示演示jQuery UI模式对话框的基本用法。模式对话框的基本用法。 8.2.6 对话框（对话框（dialog）l【例例8-11】演示演示jQuery UI非模式对话框的基本用法。当在文非模式对话框的基本用法。当在

26、文本框内单击时，自动弹出提示对话框，鼠标离开文本框，对话本框内单击时，自动弹出提示对话框，鼠标离开文本框，对话框自动消失。框自动消失。 8.2.7 进度条（进度条（progressbar）l利用利用jQuery UI的的progressbar可以显示某项工作的进度。可以显示某项工作的进度。l【例例8-12】演示演示progressbar的基本用法。的基本用法。 8.2.8 滑动条（滑动条（slider）ljQuery UI的滑动条与进度条用法类似，区别是滑动条可以拖的滑动条与进度条用法类似，区别是滑动条可以拖动，一般用于控制某些区域范围的数值。动，一般用于控制某些区域范围的数值。l【例例8-1

27、3】演示演示slider的基本用法。的基本用法。 8.2.9 页签（页签（tabs）ljQuery UI的的tabs和我们在和我们在C/S模式中使用的模式中使用的TabControl控件控件的功能相似。的功能相似。l【例例8-14】演示演示tabs的基本用法。的基本用法。 8.3 jQuery代码和代码和C#代码之间的数据交互代码之间的数据交互l这一节我们主要解决以下几个问题：这一节我们主要解决以下几个问题：（1）客户端）客户端jQuery代码如何和服务器端代码如何和服务器端C#代码之间传递或共享代码之间传递或共享数据。数据。（2）服务器如何用）服务器如何用C#定义定义Web Service供

28、各种操作系统平台的供各种操作系统平台的各种语言访问。各种语言访问。（3）客户端如何通过）客户端如何通过jQuery ajax调用服务器的调用服务器的Web Service。（4）代码隐藏类如何通过）代码隐藏类如何通过C#调用服务器的调用服务器的Web Service。 8.3.1 通过通过HiddenField控件传递数据控件传递数据l在客户端用在客户端用jQuery通过通过id获取或设置获取或设置HiddenField控件的值，控件的值，在服务器端用在服务器端用C#通过对象获取或设置通过对象获取或设置HiddenField控件的值。控件的值。 l【例例8-15】演示如何通过演示如何通过Hid

29、denField控件实现服务器和客户控件实现服务器和客户端之间的数据共享。端之间的数据共享。 8.3.2 通过通过HTML5的的data特性传递数据特性传递数据l在在HTML5中，我们可以直接定义某个标记的附加数据，这些中，我们可以直接定义某个标记的附加数据，这些附加数据以附加数据以“data-”为前缀的自定义特性来声明，其中为前缀的自定义特性来声明，其中“data-”是关键字，其后是自定义的特性名称。例如：是关键字，其后是自定义的特性名称。例如：l【例例8-16】利用自定义附加数据特性，完成进度条更新功能。利用自定义附加数据特性，完成进度条更新功能。 9.3.3 通过通过RegisterDa

30、taItem方法传递数据方法传递数据l使用使用Scriptmanager对象的对象的RegisterDataItem方法可在异步回方法可在异步回发期间将数据从服务器发送到客户端，而不需要考虑接收数据发期间将数据从服务器发送到客户端，而不需要考虑接收数据的控件是否位于的控件是否位于UpdatePanel控件中。控件中。l【例例9-17】演示通过演示通过Scriptmanager对象的对象的RegisterDataItem方法传递数据的基本用法。方法传递数据的基本用法。 8.3.4 通过通过jQuery ajax和和Web服务实现服务实现jQuery和和C#的交互的交互l1. 客户端调用客户端调用

31、Web服务的基本原理服务的基本原理l在在ASP.NET AJAX中，有三种服务形式：中，有三种服务形式：一种是一种是ASP.NET Web服务，文件扩展名为服务，文件扩展名为.asmx，简称，简称Web服服务；务；另一种是另一种是WCF服务，文件扩展名为服务，文件扩展名为.svc；第三种是第三种是ASP.NET内置的应用程序服务，包括用户的身份验证、内置的应用程序服务，包括用户的身份验证、角色和配置文件信息。角色和配置文件信息。l这三种服务都可以通过服务器这三种服务都可以通过服务器C#代码和客户端代码和客户端jQuery直接访直接访问。问。 8.3.4 通过通过jQuery ajax和和Web

32、服务实现服务实现jQuery和和C#的交互的交互l2. 在服务器端定义在服务器端定义Web服务或者服务或者WCF服务服务l3. 在客户端通过在客户端通过ASP.NET AJAX和和jQuery调用服务器端的调用服务器端的Web服务服务在在和和之间，可以直接使用之间，可以直接使用ServiceReferences元素指定引用的元素指定引用的Web服务（服务（asmx服务或者服务或者WCF服务）服务）l4. 在客户端直接使用在客户端直接使用jQuery ajax调用调用Web服务服务8.3.4 通过通过jQuery ajax和和Web服务实现服务实现jQuery和和C#的交互的交互l【例例8-18

33、】演示在演示在ASP.NET AJAX中，客户端脚本调用中，客户端脚本调用Web服务的基本用法。服务的基本用法。 8.4 利用利用jQuery Validate实现客户端数据实现客户端数据验证验证l开发开发Web页面时，有两种常用的数据验证技术。页面时，有两种常用的数据验证技术。一种是使用一种是使用jQuery验证插件在客户端进行验证；验证插件在客户端进行验证；另一种是在客户端和服务器端同时进行验证。另一种是在客户端和服务器端同时进行验证。l在实际的项目开发中，一般将这两种技术结合使用。在实际的项目开发中，一般将这两种技术结合使用。ljQuery Validate是是jQuery官方网站提供的免费插件，也可以官方网站提供的免费插件，也可以从微软的从微软的CDN网站上下载该插件的各种版本。网站上下载该插件的各种版本。 l本书使用的本书使用的jQuery Validate为为1.9版版 ；ljQuery Validate默认使用英文，如果希望使