1、第6章 使用ASP.NET AJAX本章講述的主要內(nèi)容6.1 Ajax和ASP.NET AJAX概述6.2 ASP.NET AJAX基本控件6.3 ASP.NET AJAX控件工具包6.4 實(shí)訓(xùn) 設(shè)計(jì)一個(gè)限時(shí)在線考試系統(tǒng)6.1 Ajax和ASP.NET AJAX概述6.1.1 Ajax的概念A(yù)jax主要包括以下一些內(nèi)容：1) 使用HTML+CSS來(lái)表示信息。2) 使用JavaScript操作（文檔對(duì)象模型）。3) 使用XML和XSLT（EXtensible Stylesheet Language Transformations，擴(kuò)展樣式表轉(zhuǎn)換）進(jìn)行數(shù)據(jù)交換及操作。4) 使用XmlHttpReq

2、uest對(duì)象與Web服務(wù)器進(jìn)行異步數(shù)據(jù)交換。5) 使用JavaScript將各部分內(nèi)容綁定在一起。6.1 Ajax和ASP.NET AJAX概述6.1.1 Ajax的概念 Ajax的實(shí)現(xiàn)基本原理是，當(dāng)用戶(hù)與瀏覽器中的頁(yè)面進(jìn)行交互時(shí)，將觸發(fā)頁(yè)面元素對(duì)象的相應(yīng)事件，客戶(hù)端捕獲這些事件后，如果需要將交互動(dòng)作引起的邏輯實(shí)現(xiàn)提交給服務(wù)器進(jìn)行處理，則將要處理的數(shù)據(jù)（包括狀態(tài)描述）轉(zhuǎn)換為XML格式的字符串，并使用異步傳輸方式提交給服務(wù)器。服務(wù)器處理結(jié)束后，同樣使用XML格式和異步傳輸方式將處理結(jié)果送回。客戶(hù)端從返回結(jié)果中提取需要的部分，交由JavaScript對(duì)網(wǎng)頁(yè)進(jìn)行“局部更新”，而不是刷新整個(gè)頁(yè)面。6.

3、1 Ajax和ASP.NET AJAX概述6.1.2 ASP.NET AJAX 2007年微軟公司真正推出了具有Ajax風(fēng)格的，方便的異步編程模型，這就是ASP.NET AJAX。 注意，為了與其他Ajax技術(shù)區(qū)分，微軟將其全部使用大寫(xiě)，并在前面加上了“ASP.NET”。ASP.NET AJAX的正式命名為“ASP.NET AJAX Extensions”和“Microsoft AJAX Library”。 ASP.NET AJAX Extensions提供了與ASP.NET高度集成的服務(wù)器端功能，包括客戶(hù)端數(shù)據(jù)綁定、DHTML動(dòng)畫(huà)和行為等，同時(shí)使用ScriptManager控件和Update

4、Panel控件實(shí)現(xiàn)客戶(hù)端腳本管理和對(duì)客戶(hù)端回傳（post）的攔截，這樣一來(lái)開(kāi)發(fā)人員就可以在現(xiàn)有ASP.NET應(yīng)用程序中方便的使用ASP.NET AJAX了。6.2 ASP.NET AJAX控件6.2.1 ScriptManager和ScriptManagerProxy控件 1. ScriptManager的常用屬性和方法 ScriptManager控件常用屬性見(jiàn)下表。 6.2 ASP.NET AJAX控件6.2.1 ScriptManager和ScriptManagerProxy控件 1. ScriptManager的常用屬性和方法 ScriptManager控件常用方法見(jiàn)下表。 6.2 AS

5、P.NET AJAX控件6.2.1 ScriptManager和ScriptManagerProxy控件 2. 使用ScriptManager控件注冊(cè)客戶(hù)端腳本 (1) 使用RegisterClientScriptBlock方法 RegisterClientScriptBlock方法是一個(gè)靜態(tài)方法，用于動(dòng)態(tài)地向網(wǎng)頁(yè)中添加客戶(hù)端腳本塊。該方法的重載形式有以下兩種：6.2 常用ASP.NET AJAX控件6.2.1 ScriptManager和ScriptManagerProxy控件 2. 使用ScriptManager控件注冊(cè)客戶(hù)端腳本 (2) 使用RegisterStartupScript方法

6、 RegisterStartupScript()方法用于在UpdatePanel控件中注冊(cè)啟動(dòng)時(shí)立即執(zhí)行的JavaScript腳本塊，是一種AutoRun類(lèi)型的自啟動(dòng)腳本。類(lèi)似于常用的中的f()函數(shù)。6.2 ASP.NET AJAX控件6.2.2 UpdatePanel控件 1. UpdatePanel控件的常用屬性 (1) Triggers屬性：表示可以導(dǎo)致UpdatePanel控件更新的觸發(fā)器集合。 (2) ChildrenAsTrigger屬性：該屬性為一個(gè)bool值，用來(lái)說(shuō)明UpdatePanel控件的子控件引起的回發(fā)是否能導(dǎo)致Update-Panel控件的更新。 (3) Update

7、Mode屬性：UpdateMode屬性表示UpdatPanel控件的更新模式。 (4) ContentTemplate屬性：ContentTemplate屬性用來(lái)定義UpdatePanel包含的內(nèi)容。6.2 ASP.NET AJAX控件6.2.2 UpdatePanel控件 2. 頁(yè)面的局部更新和條件更新 ScriptManager控件與UpdatePanel控件配合，可以在不必編寫(xiě)任何JavaScript代碼的情況下實(shí)現(xiàn)頁(yè)面的局部更新和條件更新。 參閱源代碼：ex6-16.2 ASP.NET AJAX控件6.2.3 UpdateProgress控件 UpdateProgress控件可以與Up

8、datePanel控件配合使用，在UpdatePanel頁(yè)面內(nèi)容進(jìn)行更新時(shí)通過(guò)該控件顯示一些提示信息，這些信息可以是一段文字、傳統(tǒng)的進(jìn)度條或一段動(dòng)畫(huà)等。當(dāng)更新結(jié)束后，提示信息自動(dòng)消失。UpdateProgress控件主要用于更新數(shù)據(jù)量較大的場(chǎng)合，顯示提示信息以避免用戶(hù)執(zhí)行了操作后頁(yè)面較長(zhǎng)時(shí)間無(wú)反應(yīng)的尷尬。UpdateProgress控件的常用屬性有： AssociatedUpdatePanel DisplayAfter DynamicLayout ProgressTemplate6.2 ASP.NET AJAX控件6.2.4 Timer控件1. Timer控件的常用屬性和事件(1) Inter

9、val屬性Interval屬性用于設(shè)置頁(yè)面向服務(wù)器發(fā)送回傳的，以毫秒為單位的時(shí)間間隔，默認(rèn)值為60000毫秒。(2) Enable屬性Enable屬性與其他標(biāo)準(zhǔn)控件的Enable屬性相同，用來(lái)決定Timer控件是否可用。(3) Tick事件Tick事件是Timer控件周期性觸發(fā)的事件，寫(xiě)在該事件過(guò)程中的代碼能被應(yīng)用程序周期性的自動(dòng)執(zhí)行。2. 使用Timer控件 參閱源代碼：ex6-26.3 ASP.NET AJAX控件工具包6.3.1 安裝ASP.NET AJAX 控件工具包 ASP.NET AJAX Control Toolkit并沒(méi)有包含在Visual Studio 2015中，使用前需要

10、從Internet中下載并安裝整合到Visual Studio中。 需要說(shuō)明的是，控件工具包的更新頻率非?？欤粩嘤行碌目丶蚬δ鼙惶砑舆M(jìn)來(lái)，而且工具包官方下載地址也有可能變化。目前ASP.NET AJAX Control Toolkit安裝包的官方下載地址為： /releases 退出Visual Studio，運(yùn)行下載的安裝包程序，安裝進(jìn)程結(jié)束后再次啟動(dòng)Visual Studio可以看到工具箱中多出了一個(gè)名為“AJAX Control Toolkit v15.1”的選項(xiàng)卡，其中包含有51個(gè)ASP.NET AJAX擴(kuò)展控件。6.3 ASP.NET AJAX控件工具包6.3.2 使用Confi

11、rmButtonExtender控件彈出確認(rèn)對(duì)話框1. ConfirmButtonExtender控件的常用屬性(1) ConfirmText屬性該屬性用于設(shè)置彈出確認(rèn)對(duì)話框時(shí)，對(duì)話框中顯示的確認(rèn)信息文本。(2) OnClientCancel屬性 該屬性用于設(shè)置當(dāng)用戶(hù)單擊對(duì)話框中“取消”按鈕時(shí)執(zhí)行的代碼。默認(rèn)值為空，表示不執(zhí)行任何操作。(3) TargetControlID 該屬性用于指定ConfirmButtonExtender控件為哪個(gè)標(biāo)準(zhǔn)控件提供彈出確認(rèn)對(duì)話框的擴(kuò)展功能。2. ConfirmButtonExtender控件使用示例 參閱源代碼：ex6-36.3 ASP.NET AJAX控

12、件工具包6.3.3 使用FilteredTextExtender和TextBoxWatermarkExtender1. FilteredTextExtender擴(kuò)展控件的常用屬性的常用屬性6.3 ASP.NET AJAX控件工具包6.3.3 使用FilteredTextExtender和TextBoxWatermarkExtender2. TextBoxWatermarkExtender的常用屬性 TextBoxWatermarkExtender擴(kuò)展控件的常用屬性有WatermarkText和WatermarkCssClass。 WatermarkText屬性用于設(shè)置文本框內(nèi)容為空時(shí)，文本框內(nèi)

13、顯示的文本內(nèi)容。通常用于顯示輸入指導(dǎo)。 WatermarkCssClass屬性用于指定文本框內(nèi)容為空時(shí)的外觀樣式類(lèi)，如文字的樣色、文本框的邊框顏色和樣式、背景色等。3. FilteredTextExtender和TextBoxWatermarkExtender使用示例參閱源代碼：ex6-46.3 ASP.NET AJAX控件工具包6.3.4 使用AsyncFileUpload實(shí)現(xiàn)文件上傳1. AsyncFileUpload控件的常用屬性、事件和方法6.3 ASP.NET AJAX控件工具包6.3.4 使用AsyncFileUpload實(shí)現(xiàn)文件上傳1. AsyncFileUpload控件的常用屬

14、性、事件和方法6.3 ASP.NET AJAX控件工具包6.3.4 使用AsyncFileUpload實(shí)現(xiàn)文件上傳2. AsyncFileUpload控件使用示例 參閱源代碼：ex6-56.3.5 使用CalendarExtender和AutoCompleteExtender擴(kuò)展控件1. 使用CalendarExtender擴(kuò)展控件6.3 ASP.NET AJAX控件工具包1. 使用CalendarExtender控件 使用CalendarExtender控件可以實(shí)現(xiàn)通過(guò)鼠標(biāo)向文本框中錄入日期的功能，大大地減少了用戶(hù)錄入的工作量和出錯(cuò)的可能性。 CalendarExtender控件一般需要附加

15、在TextBox控件上使用，其最常用的屬性為Format屬性，該屬性用于設(shè)置日期的輸入格式。 需要注意的是，默認(rèn)情況下CalendarExtender控件中的日期是用英文顯示的，若希望使用中文，則需要在屬性窗口或源視圖中設(shè)置ScriptManager控件的EnableScriptGlobalization屬性為true。6.3 ASP.NET AJAX控件工具包2. 使用AutoCompleteExtender擴(kuò)展控件 AutoCompleteExtender擴(kuò)展控件需要Web服務(wù)（WCF或Web Service）的支持才能實(shí)現(xiàn)。Web服務(wù)在程序運(yùn)行過(guò)程中為AutoCompleteExtend

16、er提供所需數(shù)據(jù)集和匹配篩選，數(shù)據(jù)集的來(lái)源可以是數(shù)據(jù)庫(kù)、數(shù)據(jù)文件或數(shù)組對(duì)象等。6.3 ASP.NET AJAX控件工具包2. 使用AutoCompleteExtender擴(kuò)展控件 AutoCompleteExtender擴(kuò)展控件需要Web服務(wù)（WCF或Web Service）的支持才能實(shí)現(xiàn)。Web服務(wù)在程序運(yùn)行過(guò)程中為AutoCompleteExtender提供所需數(shù)據(jù)集和匹配篩選，數(shù)據(jù)集的來(lái)源可以是數(shù)據(jù)庫(kù)、數(shù)據(jù)文件或數(shù)組對(duì)象等。參閱源代碼：ex6-66.4 實(shí)訓(xùn)6.4.1 實(shí)訓(xùn)目的6.4.2 實(shí)訓(xùn)要求設(shè)計(jì)一個(gè)能限制時(shí)間的在線考試系統(tǒng)，該系統(tǒng)具有如下功能： 系統(tǒng)支持最多100道的單選題（4選1）。 考試題目存儲(chǔ)在單獨(dú)的文本文