版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
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í)提供了針對VS2010的jQuery智能提示,并給出了在ASP.NET中使用jQuery UI的基本用法。 8.1.1 jQuery UI的選項(xiàng)和方法1方法(method)每個(gè)jQuery UI都提供了一些方法,這些方法一般用于對選項(xiàng)(option)進(jìn)行操作。 基本格式為:$(selector).方法名(參數(shù)); 2初始化選項(xiàng)(option)每個(gè)jQuery UI方法中都提供了很多選項(xiàng)(option),通過jQuery提供的方法初始化UI對象時(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對象以后,即可獲取或設(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方法用于控制塊級元素的鼠標(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的用法相似。【例8-2】演示用鼠標(biāo)拖放某個(gè)元素到另一個(gè)目標(biāo)元素的基本用法。 8.1.4 改變元素大?。╮esizable)jQuery UI提供的resizable方法用于改變元素的寬和高,既可以分別改變寬和高的值,也可以按比例改變寬和高的值。利用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方法用于對元素排序。將selectable和sortable結(jié)合起來,能通過鼠標(biāo)拖放動(dòng)態(tài)設(shè)置元素的順序。【例8-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)了對塊級元素的界面互動(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對象:var prm = Sys.WebForms.PageRequestManager.getInstance();8.2.1 PageRequestManager類在ASP.NET AJAX的Web窗體頁面的生命周期中,客戶端第1次加載頁面時(shí),將首先觸發(fā)PageRequestManager對象的pageLoaded事件,以后每次異步請求和回發(fā)都會(huì)依次觸發(fā)下面的事件:initializeRequest事件、beginRequest事件、pageLoading事件、pageLoaded事件、endRequest事件。1. initializeRequ
9、est事件該事件在異步請求的回送被初始化之前觸發(fā)。 2. beginRequest事件 該事件在異步請求初始化完成后、向服務(wù)器提交請求之前觸發(fā)。 8.2.1 PageRequestManager類3. pageLoading事件 該事件在異步請求已經(jīng)被服務(wù)器接收并響應(yīng),但還沒有對頁面進(jìn)行任何更新之前觸發(fā)。4. pageLoaded事件 該事件在異步回送完成而且頁面區(qū)域被更新之后觸發(fā)。在這個(gè)事件中,我們可以利用jQuery UI處理HTML元素和服務(wù)器控件對象。8.2.1 PageRequestManager類5. endRequest事件 該事件在異步請求和回送處理完畢后觸發(fā)。一般在該事件中結(jié)
10、束動(dò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);對應(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)值之間用冒號分隔,多個(gè)選項(xiàng)之間用逗號分隔。 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對象,或者是數(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 對話
17、框(dialog)jQuery UI的對話框是一個(gè)浮動(dòng)窗口,一般用div來實(shí)現(xiàn),其中包含標(biāo)題欄和內(nèi)容區(qū)域。 調(diào)用$(selector).dialog()時(shí),將初始化對話框?qū)嵗⒆詣?dòng)打開對話框。如果要重復(fù)使用一個(gè)對話框,最簡單的方法是禁用“自動(dòng)打開”選項(xiàng)(autoOpen: false)和使用$(selector).dialog(open)打開它。使用$( selector).dialog(close)關(guān)閉打開的對話框。8.2.6 對話框(dialog)【例8-10】演示jQuery UI模式對話框的基本用法。 8.2.6 對話框(dialog)【例8-11】演示jQuery UI非模式對話框的
18、基本用法。當(dāng)在文本框內(nèi)單擊時(shí),自動(dòng)彈出提示對話框,鼠標(biāo)離開文本框,對話框自動(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)平臺的各種語言訪問。(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#通過對象獲取或設(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對象的RegisterDataItem方法可在異步回發(fā)期間將數(shù)據(jù)從服務(wù)器發(fā)送到客戶端,而不需要考慮接收數(shù)據(jù)的控件是否位于UpdatePanel控件中?!纠?-17】演示通過Scriptmanager
21、對象的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è)插件,本書用的自定義中文
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年熔化焊接與熱切割證考試題庫及答案
- 《防鼠疫知識培訓(xùn)》課件
- 《散熱器的選擇計(jì)算》課件
- 類天皰瘡的臨床護(hù)理
- 孕期耳痛的健康宣教
- 孕期肺動(dòng)脈高壓的健康宣教
- 腎盞憩室的臨床護(hù)理
- 死胎的健康宣教
- 急性化膿性中耳炎的健康宣教
- 惡露的健康宣教
- 耕作學(xué)智慧樹知到期末考試答案章節(jié)答案2024年中國農(nóng)業(yè)大學(xué)
- 餐廳實(shí)習(xí)協(xié)議書
- QCT1067.5-2023汽車電線束和電器設(shè)備用連接器第5部分:設(shè)備連接器(插座)的型式和尺寸
- 2024年度領(lǐng)導(dǎo)干部任前廉政法規(guī)知識測試題庫150題
- 2024年四川省涼山州中考適應(yīng)性考試語文試題(含答案解析)
- 人工智能在中藥學(xué)領(lǐng)域的應(yīng)用與藥物研發(fā)創(chuàng)新研究
- 2023-2024學(xué)年七年級數(shù)學(xué)上冊舉一反三系列專題4.6 動(dòng)角問題專項(xiàng)訓(xùn)練(40道)(舉一反三)(人教版)含解析
- MOOC 房地產(chǎn)管理-華中科技大學(xué) 中國大學(xué)慕課答案
- 運(yùn)動(dòng)訓(xùn)練學(xué)完整第五章
- 2024年茶空間運(yùn)營工作計(jì)劃
- 食品進(jìn)銷存臺賬【模板】
評論
0/150
提交評論