1、第第8章章 在在ASP.NET中使中使用用jquery2021年11月20日星期六2第8章 在ASP.NET中使用jQuery8.1 jQuery UI及其基本操作及其基本操作8.2 聯合使用聯合使用ASP.NET AJAX和和jQuery UI8.3 jQuery代碼和代碼和C#代碼之間的數據交互代碼之間的數據交互8.4 利用利用jQuery Validate實現客戶端數據驗證實現客戶端數據驗證2021年11月20日星期六38.1 jQuery UI及其基本操作及其基本操作ljQuery UI是一套專門用于界面交互的是一套專門用于界面交互的JavaScript庫，開發人庫，開發人員利用它可以

2、非常方便地控制頁面的互動效果，快速在客戶端員利用它可以非常方便地控制頁面的互動效果，快速在客戶端開發出風格一致的開發出風格一致的Web界面。界面。下載下載jQuery UI的方式很簡單，從的方式很簡單，從jQuery的官方網站直接免費下的官方網站直接免費下載即可。載即可。下載時，下載時，jQuery UI提供了不同的主題（提供了不同的主題（Themes）供開發人員）供開發人員選擇和定制。選擇和定制。 也可以從微軟的也可以從微軟的CDN免費下載或引用免費下載或引用jQuery UI，該網站同時提，該網站同時提供了針對供了針對VS2010的的jQuery智能提示，并給出了在智能提示，并給出了在AS

3、P.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.NE

11、T 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. be

13、ginRequest事件事件 該事件在異步請求初始化完成后、向服務器提交請求之前觸發。該事件在異步請求初始化完成后、向服務器提交請求之前觸發。 8.2.1 PageRequestManager類類l3. pageLoading事件事件 該事件在異步請求已經被服務器接收并響應，但還沒有對頁面進該事件在異步請求已經被服務器接收并響應，但還沒有對頁面進行任何更新之前觸發。行任何更新之前觸發。l4. pageLoaded事件事件 該事件在異步回送完成而且頁面區域被更新之后觸發。該事件在異步回送完成而且頁面區域被更新之后觸發。在這個事件中，我們可以利用在這個事件中，我們可以利用jQuery UI處理處理

14、HTML元素和服務器元素和服務器控件對象。控件對象。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）設置。）設置。如果不做本地化處理，如果不做本地化處理，jQu

24、ery默認使用英文。默認使用英文。 本書用的日期中文語言包插件見本書用的日期中文語言包插件見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

27、-13】演示演示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 Servic

28、e供各種操作系統平臺的供各種操作系統平臺的各種語言訪問。各種語言訪問。（3）客戶端如何通過）客戶端如何通過jQuery ajax調用服務器的調用服務器的Web Service。（4）代碼隱藏類如何通過）代碼隱藏類如何通過C#調用服務器的調用服務器的Web Service。 8.3.1 通過通過HiddenField控件傳遞數據控件傳遞數據l在客戶端用在客戶端用jQuery通過通過id獲取或設置獲取或設置HiddenField控件的值，控件的值，在服務器端用在服務器端用C#通過對象獲取或設置通過對象獲取或設置HiddenField控件的值。控件的值。 l【例例8-15】演示如何通過演示如何通過H

29、iddenField控件實現服務器和客戶控件實現服務器和客戶端之間的數據共享。端之間的數據共享。 8.3.2 通過通過HTML5的的data特性傳遞數據特性傳遞數據l在在HTML5中，我們可以直接定義某個標記的附加數據，這些中，我們可以直接定義某個標記的附加數據，這些附加數據以附加數據以“data-”為前綴的自定義特性來聲明，其中為前綴的自定義特性來聲明，其中“data-”是關鍵字，其后是自定義的特性名稱。例如：是關鍵字，其后是自定義的特性名稱。例如：l【例例8-16】利用自定義附加數據特性，完成進度條更新功能。利用自定義附加數據特性，完成進度條更新功能。 9.3.3 通過通過Register

30、DataItem方法傳遞數據方法傳遞數據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和和W

32、eb服務實現服務實現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-

33、18】演示在演示在ASP.NET AJAX中，客戶端腳本調用中，客戶端腳本調用Web服務的基本用法。服務的基本用法。 8.4 利用利用jQuery Validate實現客戶端數據實現客戶端數據驗證驗證l開發開發Web頁面時，有兩種常用的數據驗證技術。頁面時，有兩種常用的數據驗證技術。一種是使用一種是使用jQuery驗證插件在客戶端進行驗證；驗證插件在客戶端進行驗證；另一種是在客戶端和服務器端同時進行驗證。另一種是在客戶端和服務器端同時進行驗證。l在實際的項目開發中，一般將這兩種技術結合使用。在實際的項目開發中，一般將這兩種技術結合使用。ljQuery Validate是是jQuery官方網站提供的免費插件，也可以官方網站提供的免費插件，也可以從微軟的從微軟的CDN網站上下載該插件的各種版本。網站上下載該插件的各種版本。 l本書使用的本書使用的jQuery Validate為為1.9版版 ；ljQuery Validate默認使用英文，如果希望使用