XML與WEB Service技術(shù)(微軟)：第08章 在ASPNET中使用jQuery

1、第8章 在ASP.NET中使用jquery08 七月 20222第8章 在ASP.NET中使用jQuery8.1 jQuery UI及其基本操作8.2 聯(lián)合使用ASP.NET AJAX和jQuery UI8.3 jQuery代碼和C#代碼之間的數(shù)據(jù)交互8.4 利用jQuery Validate實(shí)現(xiàn)客戶端數(shù)據(jù)驗(yàn)證08 七月 202238.1 jQuery UI及其基本操作jQuery UI是一套專門用于界面交互的JavaScript庫，開發(fā)人員利用它可以非常方便地控制頁面的互動(dòng)效果，快速在客戶端開發(fā)出風(fēng)格一致的Web界面。下載jQuery UI的方式很簡單，從jQuery的官方網(wǎng)站直接免費(fèi)下載即

2、可。下載時(shí)，jQuery UI提供了不同的主題（Themes）供開發(fā)人員選擇和定制。 也可以從微軟的CDN免費(fèi)下載或引用jQuery UI，該網(wǎng)站同時(shí)提供了針對(duì)VS2010的jQuery智能提示，并給出了在ASP.NET中使用jQuery UI的基本用法。 8.1.1 jQuery UI的選項(xiàng)和方法1方法（method）每個(gè)jQuery UI都提供了一些方法，這些方法一般用于對(duì)選項(xiàng)（option）進(jìn)行操作。 基本格式為：$(selector).方法名(參數(shù)); 2初始化選項(xiàng)（option）每個(gè)jQuery UI方法中都提供了很多選項(xiàng)（option），通過jQuery提供的方法初始化UI對(duì)象時(shí)，

3、可以在方法的參數(shù)中同時(shí)初始化選項(xiàng)的值?；靖袷綖椋?方法名(選項(xiàng)名1:值1, 選項(xiàng)名2:值2, , 選項(xiàng)名n:值n)參數(shù)中每個(gè)選項(xiàng)（option）由optionName和value組成 8.1.1 jQuery UI的選項(xiàng)和方法3獲取或設(shè)置選項(xiàng)的值利用初始化方法創(chuàng)建jQuery對(duì)象以后，即可獲取或設(shè)置這些選項(xiàng)的值。基本格式為： $(selector).方法(option,optionName,value)不帶value參數(shù)時(shí)，表示獲取選項(xiàng)的值，帶value參數(shù)時(shí)表示設(shè)置選項(xiàng)的值。 例如：/獲取disabled選項(xiàng)的值var disabled = $( .selector ).accordion

4、( option, disabled );/設(shè)置disabled選項(xiàng)的值$( .selector ).accordion( option, disabled, true );9.1.2 拖動(dòng)（draggable）jQuery UI提供的draggable方法用于控制塊級(jí)元素的鼠標(biāo)拖動(dòng)，被拖動(dòng)的元素一般用div來實(shí)現(xiàn)。 下面的代碼說明了draggable的基本用法：可拖放$(#div1).draggable();【例8-1】演示利用jQuery UI實(shí)現(xiàn)鼠標(biāo)拖動(dòng)的基本用法。 8.1.3 拖放（Droppable）jQuery UI提供的droppable方法用于控制將拖放元素放置到拖放目標(biāo)區(qū)域內(nèi)

5、的行為，它和draggable的用法相似?！纠?-2】演示用鼠標(biāo)拖放某個(gè)元素到另一個(gè)目標(biāo)元素的基本用法。 8.1.4 改變?cè)卮笮。╮esizable）jQuery UI提供的resizable方法用于改變?cè)氐膶捄透?，既可以分別改變寬和高的值，也可以按比例改變寬和高的值。利用resizable縮放某個(gè)子窗口非常方便。 【例8-3】演示resizable的基本用法。 8.1.5 選擇（selectable）jQuery UI提供的selectable方法一般用于選擇一個(gè)或多個(gè)選項(xiàng)【例8-4】演示selectable的基本用法。 8.1.6 排序（sortable）jQuery UI提供的sor

6、table方法用于對(duì)元素排序。將selectable和sortable結(jié)合起來，能通過鼠標(biāo)拖放動(dòng)態(tài)設(shè)置元素的順序?！纠?-5】演示sortable的基本用法。 8.2 聯(lián)合使用ASP.NET AJAX和jQuery UIASP.NET AJAX為基于服務(wù)器的ajax開發(fā)提供了方便的開發(fā)架構(gòu)，jQuery UI則為客戶端界面提供了方便的設(shè)計(jì)手段。聯(lián)合使用這兩種技術(shù)，能使Web開發(fā)的效率如虎添翼。jQuery UI提供的界面互動(dòng)構(gòu)件（widget）實(shí)現(xiàn)了對(duì)塊級(jí)元素的界面互動(dòng)功能，這里的構(gòu)件是指由多個(gè)HTML元素構(gòu)成的UI組件，也包括ASP.NET Web服務(wù)器控件。 最理想的辦法就是將ASP.NE

7、T AJAX和jQuery結(jié)合起來，這樣可以同時(shí)集成兩種架構(gòu)的優(yōu)點(diǎn)，既能快速解決服務(wù)器和客戶端開發(fā)中遇到的難題，又能大大簡化設(shè)計(jì)的難度，既縮短了項(xiàng)目開發(fā)周期，也保證了程序的健壯性。 8.2.1 PageRequestManager類PageRequestManager類在ASP.NET客戶端架構(gòu)的Sys.WebForms命名空間下，該類提供了異步發(fā)送和回傳的客戶端事件，利用這些事件，就可以在ASP.NET AJAX中同時(shí)使用服務(wù)器控件、HTML元素以及jQuery UI，而且也能快速實(shí)現(xiàn)頁面局部更新的效果。 要使用這些客戶端事件、屬性和方法，首先需要利用客戶端腳本獲取ASP.NET AJAX自

8、動(dòng)生成的PageRequestManager對(duì)象：var prm = Sys.WebForms.PageRequestManager.getInstance();8.2.1 PageRequestManager類在ASP.NET AJAX的Web窗體頁面的生命周期中，客戶端第1次加載頁面時(shí)，將首先觸發(fā)PageRequestManager對(duì)象的pageLoaded事件，以后每次異步請(qǐng)求和回發(fā)都會(huì)依次觸發(fā)下面的事件：initializeRequest事件、beginRequest事件、pageLoading事件、pageLoaded事件、endRequest事件。1. initializeRequ

9、est事件該事件在異步請(qǐng)求的回送被初始化之前觸發(fā)。 2. beginRequest事件 該事件在異步請(qǐng)求初始化完成后、向服務(wù)器提交請(qǐng)求之前觸發(fā)。 8.2.1 PageRequestManager類3. pageLoading事件 該事件在異步請(qǐng)求已經(jīng)被服務(wù)器接收并響應(yīng)，但還沒有對(duì)頁面進(jìn)行任何更新之前觸發(fā)。4. pageLoaded事件 該事件在異步回送完成而且頁面區(qū)域被更新之后觸發(fā)。在這個(gè)事件中，我們可以利用jQuery UI處理HTML元素和服務(wù)器控件對(duì)象。8.2.1 PageRequestManager類5. endRequest事件 該事件在異步請(qǐng)求和回送處理完畢后觸發(fā)。一般在該事件中結(jié)

10、束動(dòng)畫告知用戶異步請(qǐng)求處理完畢。在客戶端腳本中，還可以利用endRequest事件的arg參數(shù)處理異步回送的結(jié)果。 6.在異步處理過程中可以使用的方法 prm.get_isInAsyncPostBack()：判斷是否為異步回送。prm.abortPostBack()：取消正在執(zhí)行的異步回送。8.2.2 拉簾式折疊面板（accordion）jQuery UI的拉簾式折疊面板的效果就像拉簾式窗簾一樣，可以全部折疊所有項(xiàng)，也可以展開其中的某一項(xiàng)。 用jQuery UI構(gòu)造accordion構(gòu)件時(shí)，每一項(xiàng)的標(biāo)題塊用h標(biāo)記來實(shí)現(xiàn)，標(biāo)題塊內(nèi)的標(biāo)題用a標(biāo)記實(shí)現(xiàn)；對(duì)應(yīng)項(xiàng)的內(nèi)容用div來實(shí)現(xiàn)。定義HTML后，調(diào)

11、用accordion()方法即可。 First header First content Second header Second content $(#accordion).accordion();8.2.2 拉簾式折疊面板（accordion）常用方法1. accordion(options)該方法用于初始化一個(gè)或多個(gè)選項(xiàng)，每個(gè)選項(xiàng)的選項(xiàng)名和選項(xiàng)值之間用冒號(hào)分隔，多個(gè)選項(xiàng)之間用逗號(hào)分隔。 2. accordion( option , optionName , value ) 該方法用于獲取或設(shè)置指定的選項(xiàng)。不指定value值時(shí)為獲取optionName選項(xiàng)的值，指定value值時(shí)為設(shè)置op

12、tionName選項(xiàng)的值為value。 $(“#accordion”).accordion(“option”,“disable”); /禁用折疊3. accordion(optionName) 該方法用于執(zhí)行選項(xiàng)名指定的功能，參數(shù)optionName表示選項(xiàng)名。 8.2.2 拉簾式折疊面板（accordion）常用事件 1. create事件 事件類型：accordioncreate，當(dāng)創(chuàng)建可折疊面板時(shí)觸發(fā)。例如 初始化：$( .selector ).accordion(create: function(event, ui) . );綁定創(chuàng)建事件：$( .selector ).bind( ac

13、cordioncreate, function(event, ui) .);2. change事件 事件類型：accordionchange，當(dāng)更改accordion時(shí)觸發(fā)。如果有動(dòng)畫，則動(dòng)畫完成后觸發(fā)，否則立即觸發(fā)。 8.2.2 拉簾式折疊面板（accordion）【例8-6】演示在UpdatePanel內(nèi)利用accordion實(shí)現(xiàn)折疊面板的基本用法，單擊左側(cè)accordion內(nèi)的按鈕時(shí)，在右側(cè)用動(dòng)畫表示異步提交和更新的過程。8.2.3 自動(dòng)完成（autocomplete）當(dāng)在文本框中輸入一些文字內(nèi)容時(shí)，利用jQuery UI的autocomplete實(shí)現(xiàn)自動(dòng)完成選項(xiàng)提示，能讓用戶快速選擇鍵

14、入的內(nèi)容。【例8-7】演示在ASP.NET AJAX中實(shí)現(xiàn)自動(dòng)完成功能的基本用法。 8.2.4 按鈕（button）jQuery UI的button的作用是將指定的元素顯示為按鈕樣式。常用有兩種方法：$(selector).button(); /將選擇器選擇的元素作為按鈕樣式$(selector).buttonset(); /將選擇器選擇的元素作為按鈕選項(xiàng) 【例8-8】演示按鈕的基本用法。 8.2.5 日期選擇（datepicker）jQuery UI的日期選擇用于顯示一個(gè)日歷，然后讓用戶從中選擇年、月、日，選擇的內(nèi)容將自動(dòng)添加到文本框中。常用選項(xiàng) maxDate : Date、Number、

15、String，默認(rèn)為null。 功能：設(shè)置一個(gè)最大的可選日期?？梢允荄ate對(duì)象，或者是數(shù)字（從今天算起，例如+7），或者有效的字符串（y代表年, m代表月, w代表周, d代表日，例如：+1m +7d）。 minDate : Date、Number、String，默認(rèn)為null 功能：設(shè)置一個(gè)最小的可選日期。用法與maxDate相似。numberOfMonths : Number、Array，默認(rèn)為1。 功能：設(shè)置一次要顯示多少個(gè)月份。 8.2.5 日期選擇（datepicker）常用方法 destory：從元素中移除拖拽功能。用法：.datepicker( destroy );disabl

16、e：禁用元素的拖拽功能。用法：.datepicker( disable );enable：啟用元素的拖拽功能。用法：.datepicker( enable );option：獲取或設(shè)置元素的參數(shù)。用法：.datepicker( option , optionName , value );多語言支持 多語言支持實(shí)際上就是本地化（Localization）設(shè)置。如果不做本地化處理，jQuery默認(rèn)使用英文。 本書用的日期中文語言包插件見jquery.ui.datepicker-cn.js。8.2.5 日期選擇（datepicker）【例8-9】演示datepicker的基本用法。 8.2.6 對(duì)話

17、框（dialog）jQuery UI的對(duì)話框是一個(gè)浮動(dòng)窗口，一般用div來實(shí)現(xiàn)，其中包含標(biāo)題欄和內(nèi)容區(qū)域。 調(diào)用$(selector).dialog()時(shí)，將初始化對(duì)話框?qū)嵗⒆詣?dòng)打開對(duì)話框。如果要重復(fù)使用一個(gè)對(duì)話框，最簡單的方法是禁用“自動(dòng)打開”選項(xiàng)（autoOpen: false）和使用$(selector).dialog(open)打開它。使用$( selector).dialog(close)關(guān)閉打開的對(duì)話框。8.2.6 對(duì)話框（dialog）【例8-10】演示jQuery UI模式對(duì)話框的基本用法。 8.2.6 對(duì)話框（dialog）【例8-11】演示jQuery UI非模式對(duì)話框的

18、基本用法。當(dāng)在文本框內(nèi)單擊時(shí)，自動(dòng)彈出提示對(duì)話框，鼠標(biāo)離開文本框，對(duì)話框自動(dòng)消失。 8.2.7 進(jìn)度條（progressbar）利用jQuery UI的progressbar可以顯示某項(xiàng)工作的進(jìn)度?！纠?-12】演示progressbar的基本用法。 8.2.8 滑動(dòng)條（slider）jQuery UI的滑動(dòng)條與進(jìn)度條用法類似，區(qū)別是滑動(dòng)條可以拖動(dòng)，一般用于控制某些區(qū)域范圍的數(shù)值。【例8-13】演示slider的基本用法。 8.2.9 頁簽（tabs）jQuery UI的tabs和我們?cè)贑/S模式中使用的TabControl控件的功能相似?！纠?-14】演示tabs的基本用法。 8.3 jQu

19、ery代碼和C#代碼之間的數(shù)據(jù)交互這一節(jié)我們主要解決以下幾個(gè)問題：（1）客戶端jQuery代碼如何和服務(wù)器端C#代碼之間傳遞或共享數(shù)據(jù)。（2）服務(wù)器如何用C#定義Web Service供各種操作系統(tǒng)平臺(tái)的各種語言訪問。（3）客戶端如何通過jQuery ajax調(diào)用服務(wù)器的Web Service。（4）代碼隱藏類如何通過C#調(diào)用服務(wù)器的Web Service。 8.3.1 通過HiddenField控件傳遞數(shù)據(jù)在客戶端用jQuery通過id獲取或設(shè)置HiddenField控件的值，在服務(wù)器端用C#通過對(duì)象獲取或設(shè)置HiddenField控件的值。 【例8-15】演示如何通過HiddenField

20、控件實(shí)現(xiàn)服務(wù)器和客戶端之間的數(shù)據(jù)共享。 8.3.2 通過HTML5的data特性傳遞數(shù)據(jù)在HTML5中，我們可以直接定義某個(gè)標(biāo)記的附加數(shù)據(jù)，這些附加數(shù)據(jù)以“data-”為前綴的自定義特性來聲明，其中“data-”是關(guān)鍵字，其后是自定義的特性名稱。例如：【例8-16】利用自定義附加數(shù)據(jù)特性，完成進(jìn)度條更新功能。 9.3.3 通過RegisterDataItem方法傳遞數(shù)據(jù)使用Scriptmanager對(duì)象的RegisterDataItem方法可在異步回發(fā)期間將數(shù)據(jù)從服務(wù)器發(fā)送到客戶端，而不需要考慮接收數(shù)據(jù)的控件是否位于UpdatePanel控件中?！纠?-17】演示通過Scriptmanager

21、對(duì)象的RegisterDataItem方法傳遞數(shù)據(jù)的基本用法。 8.3.4 通過jQuery ajax和Web服務(wù)實(shí)現(xiàn)jQuery和C#的交互1. 客戶端調(diào)用Web服務(wù)的基本原理在ASP.NET AJAX中，有三種服務(wù)形式：一種是ASP.NET Web服務(wù)，文件擴(kuò)展名為.asmx，簡稱Web服務(wù)；另一種是WCF服務(wù)，文件擴(kuò)展名為.svc；第三種是ASP.NET內(nèi)置的應(yīng)用程序服務(wù)，包括用戶的身份驗(yàn)證、角色和配置文件信息。這三種服務(wù)都可以通過服務(wù)器C#代碼和客戶端jQuery直接訪問。 8.3.4 通過jQuery ajax和Web服務(wù)實(shí)現(xiàn)jQuery和C#的交互2. 在服務(wù)器端定義Web服務(wù)或者

22、WCF服務(wù)3. 在客戶端通過ASP.NET AJAX和jQuery調(diào)用服務(wù)器端的Web服務(wù)在和之間，可以直接使用ServiceReferences元素指定引用的Web服務(wù)（asmx服務(wù)或者WCF服務(wù)）4. 在客戶端直接使用jQuery ajax調(diào)用Web服務(wù)8.3.4 通過jQuery ajax和Web服務(wù)實(shí)現(xiàn)jQuery和C#的交互【例8-18】演示在ASP.NET AJAX中，客戶端腳本調(diào)用Web服務(wù)的基本用法。 8.4 利用jQuery Validate實(shí)現(xiàn)客戶端數(shù)據(jù)驗(yàn)證開發(fā)Web頁面時(shí)，有兩種常用的數(shù)據(jù)驗(yàn)證技術(shù)。一種是使用jQuery驗(yàn)證插件在客戶端進(jìn)行驗(yàn)證；另一種是在客戶端和服務(wù)器端同時(shí)進(jìn)行驗(yàn)證。在實(shí)際的項(xiàng)目開發(fā)中，一般將這兩種技術(shù)結(jié)合使用。jQuery Validate是jQuery官方網(wǎng)站提供的免費(fèi)插件，也可以從微軟的CDN網(wǎng)站上下載該插件的各種版本。 本書使用的jQuery Validate為1.9版 ；jQuery Validate默認(rèn)使用英文，如果希望使用中文提示，可以自定義一個(gè)插件，本書用的自定義中文