ASP.NET程序設(shè)計(jì)教程（C#版）第4版 課件 第6、7章 ASP.NET AJAX、JavaScript

第6章使用ASP.NETAJAX本章講述的主要內(nèi)容6.1Ajax和ASP.NETAJAX概述6.2ASP.NETAJAX基本控件6.3ASP.NETAJAX控件工具包6.4實(shí)訓(xùn)設(shè)計(jì)一個(gè)限時(shí)在線考試系統(tǒng)

6.1Ajax和ASP.NETAJAX概述6.1.1Ajax的概念A(yù)jax主要包括以下一些內(nèi)容：1)使用HTML+CSS來(lái)表示信息。2)使用JavaScript操作（文檔對(duì)象模型）。3)使用XML和XSLT（EXtensibleStylesheetLanguageTransformations，擴(kuò)展樣式表轉(zhuǎn)換）進(jìn)行數(shù)據(jù)交換及操作。4)使用XmlHttpRequest對(duì)象與Web服務(wù)器進(jìn)行異步數(shù)據(jù)交換。5)使用JavaScript將各部分內(nèi)容綁定在一起。6.1Ajax和ASP.NETAJAX概述6.1.1Ajax的概念

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

2007年微軟公司真正推出了具有Ajax風(fēng)格的，方便的異步編程模型，這就是ASP.NETAJAX。

注意，為了與其他Ajax技術(shù)區(qū)分，微軟將其全部使用大寫(xiě)，并在前面加上了“ASP.NET”。ASP.NETAJAX的正式命名為“ASP.NETAJAXExtensions”和“MicrosoftAJAXLibrary”。

ASP.NETAJAXExtensions提供了與ASP.NET高度集成的服務(wù)器端功能，包括客戶端數(shù)據(jù)綁定、DHTML動(dòng)畫(huà)和行為等，同時(shí)使用ScriptManager控件和UpdatePanel控件實(shí)現(xiàn)客戶端腳本管理和對(duì)客戶端回傳（post）的攔截，這樣一來(lái)開(kāi)發(fā)人員就可以在現(xiàn)有ASP.NET應(yīng)用程序中方便的使用ASP.NETAJAX了。6.2ASP.NETAJAX控件6.2.1ScriptManager和ScriptManagerProxy控件

1.ScriptManager的常用屬性和方法

ScriptManager控件常用屬性見(jiàn)下表。

6.2ASP.NETAJAX控件6.2.1ScriptManager和ScriptManagerProxy控件

1.ScriptManager的常用屬性和方法

ScriptManager控件常用方法見(jiàn)下表。

6.2ASP.NETAJAX控件6.2.1ScriptManager和ScriptManagerProxy控件

2.使用ScriptManager控件注冊(cè)客戶端腳本

(1)使用RegisterClientScriptBlock方法

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

2.使用ScriptManager控件注冊(cè)客戶端腳本

(2)使用RegisterStartupScript方法

RegisterStartupScript()方法用于在UpdatePanel控件中注冊(cè)啟動(dòng)時(shí)立即執(zhí)行的JavaScript腳本塊，是一種AutoRun類型的自啟動(dòng)腳本。類似于常用的<bodyonload="f()">中的f()函數(shù)。6.2ASP.NETAJAX控件6.2.2UpdatePanel控件

1.UpdatePanel控件的常用屬性

(1)Triggers屬性：表示可以導(dǎo)致UpdatePanel控件更新的觸發(fā)器集合。

(2)ChildrenAsTrigger屬性：該屬性為一個(gè)bool值，用來(lái)說(shuō)明UpdatePanel控件的子控件引起的回發(fā)是否能導(dǎo)致Update-Panel控件的更新。

(3)UpdateMode屬性：UpdateMode屬性表示UpdatPanel控件的更新模式。

(4)ContentTemplate屬性：ContentTemplate屬性用來(lái)定義UpdatePanel包含的內(nèi)容。6.2ASP.NETAJAX控件6.2.2UpdatePanel控件

2.頁(yè)面的局部更新和條件更新

ScriptManager控件與UpdatePanel控件配合，可以在不必編寫(xiě)任何JavaScript代碼的情況下實(shí)現(xiàn)頁(yè)面的局部更新和條件更新。

參閱源代碼：ex6-16.2ASP.NETAJAX控件6.2.3UpdateProgress控件

UpdateProgress控件可以與UpdatePanel控件配合使用，在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)合，顯示提示信息以避免用戶執(zhí)行了操作后頁(yè)面較長(zhǎng)時(shí)間無(wú)反應(yīng)的尷尬。UpdateProgress控件的常用屬性有：①AssociatedUpdatePanel②DisplayAfter③DynamicLayout④ProgressTemplate6.2ASP.NETAJAX控件6.2.4Timer控件1.Timer控件的常用屬性和事件(1)Interval屬性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.3ASP.NETAJAX控件工具包6.3.1安裝ASP.NETAJAX控件工具包

ASP.NETAJAXControlToolkit并沒(méi)有包含在VisualStudio2015中，使用前需要從Internet中下載并安裝整合到VisualStudio中。

需要說(shuō)明的是，控件工具包的更新頻率非常快，不斷有新的控件或功能被添加進(jìn)來(lái)，而且工具包官方下載地址也有可能變化。目前ASP.NETAJAXControlToolkit安裝包的官方下載地址為：

http:///releases

退出VisualStudio，運(yùn)行下載的安裝包程序，安裝進(jìn)程結(jié)束后再次啟動(dòng)VisualStudio可以看到工具箱中多出了一個(gè)名為“AJAXControlToolkitv15.1”的選項(xiàng)卡，其中包含有51個(gè)ASP.NETAJAX擴(kuò)展控件。6.3ASP.NETAJAX控件工具包6.3.2使用ConfirmButtonExtender控件彈出確認(rèn)對(duì)話框1.ConfirmButtonExtender控件的常用屬性(1)ConfirmText屬性該屬性用于設(shè)置彈出確認(rèn)對(duì)話框時(shí)，對(duì)話框中顯示的確認(rèn)信息文本。(2)OnClientCancel屬性該屬性用于設(shè)置當(dāng)用戶單擊對(duì)話框中“取消”按鈕時(shí)執(zhí)行的代碼。默認(rèn)值為空，表示不執(zhí)行任何操作。(3)TargetControlID該屬性用于指定ConfirmButtonExtender控件為哪個(gè)標(biāo)準(zhǔn)控件提供彈出確認(rèn)對(duì)話框的擴(kuò)展功能。2.ConfirmButtonExtender控件使用示例

參閱源代碼：ex6-36.3ASP.NETAJAX控件工具包6.3.3使用FilteredTextExtender和TextBoxWatermarkExtender1.FilteredTextExtender擴(kuò)展控件的常用屬性的常用屬性6.3ASP.NETAJAX控件工具包6.3.3使用FilteredTextExtender和TextBoxWatermarkExtender2.TextBoxWatermarkExtender的常用屬性

TextBoxWatermarkExtender擴(kuò)展控件的常用屬性有WatermarkText和WatermarkCssClass。

WatermarkText屬性用于設(shè)置文本框內(nèi)容為空時(shí)，文本框內(nèi)顯示的文本內(nèi)容。通常用于顯示輸入指導(dǎo)。

WatermarkCssClass屬性用于指定文本框內(nèi)容為空時(shí)的外觀樣式類，如文字的樣色、文本框的邊框顏色和樣式、背景色等。3.FilteredTextExtender和TextBoxWatermarkExtender使用示例

參閱源代碼：ex6-46.3ASP.NETAJAX控件工具包6.3.4使用AsyncFileUpload實(shí)現(xiàn)文件上傳1.AsyncFileUpload控件的常用屬性、事件和方法6.3ASP.NETAJAX控件工具包6.3.4使用AsyncFileUpload實(shí)現(xiàn)文件上傳1.AsyncFileUpload控件的常用屬性、事件和方法6.3ASP.NETAJAX控件工具包6.3.4使用AsyncFileUpload實(shí)現(xiàn)文件上傳2.AsyncFileUpload控件使用示例

參閱源代碼：ex6-56.3.5使用CalendarExtender和AutoCompleteExtender擴(kuò)展控件1.使用CalendarExtender擴(kuò)展控件6.3ASP.NETAJAX控件工具包1.使用CalendarExtender控件使用CalendarExtender控件可以實(shí)現(xiàn)通過(guò)鼠標(biāo)向文本框中錄入日期的功能，大大地減少了用戶錄入的工作量和出錯(cuò)的可能性。

CalendarExtender控件一般需要附加在TextBox控件上使用，其最常用的屬性為Format屬性，該屬性用于設(shè)置日期的輸入格式。需要注意的是，默認(rèn)情況下CalendarExtender控件中的日期是用英文顯示的，若希望使用中文，則需要在屬性窗口或源視圖中設(shè)置ScriptManager控件的EnableScriptGlobalization屬性為true。6.3ASP.NETAJAX控件工具包2.使用AutoCompleteExtender擴(kuò)展控件

AutoCompleteExtender擴(kuò)展控件需要Web服務(wù)（WCF或WebService）的支持才能實(shí)現(xiàn)。Web服務(wù)在程序運(yùn)行過(guò)程中為AutoCompleteExtender提供所需數(shù)據(jù)集和匹配篩選，數(shù)據(jù)集的來(lái)源可以是數(shù)據(jù)庫(kù)、數(shù)據(jù)文件或數(shù)組對(duì)象等。6.3ASP.NETAJAX控件工具包2.使用AutoCompleteExtender擴(kuò)展控件

AutoCompleteExtender擴(kuò)展控件需要Web服務(wù)（WCF或WebService）的支持才能實(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ú)的文本文件內(nèi)（App_Data/test.txt）。如圖6-21所示，每題以題目?jī)?nèi)容、正確答案、4個(gè)選項(xiàng)為順序逐行書(shū)寫(xiě)。③自動(dòng)生成如圖6-22所示的考試成績(jī)表，存放在App_Data/result.txt文件中。④考生訪問(wèn)網(wǎng)站時(shí)首先看到的是圖6-23所示的登錄界面，在輸入姓名、準(zhǔn)考證號(hào)后單擊“開(kāi)始考試”按鈕，系統(tǒng)首先對(duì)用戶輸入的姓名、準(zhǔn)考證號(hào)的合法性進(jìn)行檢測(cè)，要求“姓名”、“準(zhǔn)考證號(hào)”不得為空；準(zhǔn)考證號(hào)必須由6位數(shù)字組成，且考生不是重復(fù)考試（成績(jī)表中沒(méi)有該準(zhǔn)考證號(hào)的記錄）。未通過(guò)檢測(cè)將顯示相應(yīng)的出錯(cuò)提示信息。第7章JavaScript本章講述的主要內(nèi)容7.1JavaScript的基本概念7.2JavaScript程序設(shè)計(jì)基礎(chǔ)7.3JavaScript對(duì)象7.4BOM和DOM對(duì)象7.5實(shí)訓(xùn)設(shè)計(jì)浮動(dòng)圖片效果

7.1JavaScript的基本概念7.1.1JavaScript概述JavaScript是一種通用的、跨平臺(tái)的、基于對(duì)象和事件驅(qū)動(dòng)的客戶端腳本語(yǔ)言，其主要特點(diǎn)有以下幾個(gè)方面。(1)弱數(shù)據(jù)類型(2)跨平臺(tái)(3)基于對(duì)象Transformations，擴(kuò)展樣式表轉(zhuǎn)換）進(jìn)行數(shù)據(jù)交換及操作。(4)基于事件驅(qū)動(dòng)7.1JavaScript的基本概念7.1.1JavaScript概述JavaScript代碼格式不夠嚴(yán)謹(jǐn)，使用比較靈活，但過(guò)于隨意將會(huì)導(dǎo)致代碼的可讀性降低，不易于后期維護(hù)和升級(jí)。因此，在編寫(xiě)JavaScript程序時(shí)應(yīng)遵守以下規(guī)范。①書(shū)寫(xiě)代碼時(shí)應(yīng)注意，瀏覽器解析JavaScript代碼時(shí)會(huì)忽略標(biāo)識(shí)符與運(yùn)算符之間多余的空格。②書(shū)寫(xiě)代碼時(shí)每條語(yǔ)句一般應(yīng)獨(dú)占一行，并以英文分號(hào)“;”為結(jié)束符。③代碼要使用縮進(jìn)格式編寫(xiě)，以增強(qiáng)其層次感和可讀性。④代碼中可以使用“//”表示單行注釋，使用“/*……*/”表示多行注釋。7.1JavaScript的基本概念7.1.2JavaScript的代碼編寫(xiě)規(guī)范行內(nèi)JavaScript語(yǔ)句

直接將JavaScript代碼寫(xiě)在HTML元素的開(kāi)始標(biāo)記中。(2)嵌入式JavaScript語(yǔ)句塊

將JavaScript代碼寫(xiě)在<script>……</script>中。(3)使用獨(dú)立的.js文件7.2JavaScript程序設(shè)計(jì)基礎(chǔ)7.2.1數(shù)據(jù)類型和變量1.數(shù)據(jù)類型7.2JavaScript程序設(shè)計(jì)基礎(chǔ)7.2.1數(shù)據(jù)類型和變量2.變量和運(yùn)算符聲明變量和為變量賦值(2)運(yùn)算符JavaScript使用的運(yùn)算符與C#語(yǔ)言的運(yùn)算符大部分相同。如，算術(shù)運(yùn)算符+、-、*、/；比較運(yùn)算符<、>、==、>=、<=、!=；布爾運(yùn)算符&&、||、！等。7.2JavaScript程序設(shè)計(jì)基礎(chǔ)7.2.1數(shù)據(jù)類型和變量3.變量的作用域變量的作用范圍是指可以訪問(wèn)該變量的代碼區(qū)域。JavaScript中按變量的作用范圍分為全局變量和局部變量。①全局變量：可以在整個(gè)HTML文檔范圍中使用的變量，這種變量通常都是在函數(shù)體外定義的變量。②局部變量：只能在局部范圍內(nèi)使用的變量，這種變量通常都是在函數(shù)體內(nèi)定義的變量，所以只在函數(shù)體內(nèi)部有效。省略關(guān)鍵字var聲明的變量（未定義直接使用的變量），無(wú)論在函數(shù)體內(nèi)部還是外部，都是全局變量。7.2JavaScript程序設(shè)計(jì)基礎(chǔ)7.2.2流程控制語(yǔ)句1.分支結(jié)構(gòu)

if…elseif…else、switch語(yǔ)句2.循環(huán)結(jié)構(gòu)JavaScript的循環(huán)結(jié)構(gòu)主要由for語(yǔ)句、while語(yǔ)句和forin語(yǔ)句構(gòu)成。其中，for語(yǔ)句和while語(yǔ)句與C#中的語(yǔ)法格式及使用方法完全相同，這里不再贅述。C#中的foreach語(yǔ)句在JavaScript中稍有變化，其語(yǔ)法格式如下所示。7.2JavaScript程序設(shè)計(jì)基礎(chǔ)7.2.3JavaScript函數(shù)JavaScript內(nèi)置函數(shù)7.2JavaScript程序設(shè)計(jì)基礎(chǔ)7.2.3JavaScript函數(shù)2.自定義函數(shù)JavaScript除了可以使用預(yù)定義函數(shù)外，還可以根據(jù)需要自定義用于實(shí)現(xiàn)特定功能的函數(shù)。由于JavaScript是弱類型腳本程序設(shè)計(jì)語(yǔ)言，故在定義函數(shù)時(shí)無(wú)需聲明函數(shù)的參數(shù)類型和返回值類型。JavaScript的自定義函數(shù)分為命名函數(shù)、匿名函數(shù)、對(duì)象函數(shù)和自調(diào)用函數(shù)四種。自定義函數(shù)代碼可以書(shū)寫(xiě)在<script></script>標(biāo)記之間，也可以書(shū)寫(xiě)在.js文件中。在同一個(gè)<script></script>標(biāo)記中，函數(shù)定義可以書(shū)寫(xiě)在調(diào)用語(yǔ)句之前或之后；但在不同的<script></script>標(biāo)記中函數(shù)定義語(yǔ)句只能書(shū)寫(xiě)在調(diào)用語(yǔ)句之前。7.2JavaScript程序設(shè)計(jì)基礎(chǔ)7.2.3JavaScript函數(shù)2.自定義函數(shù)(1)命名函數(shù)7.2JavaScript程序設(shè)計(jì)基礎(chǔ)7.2.3JavaScript函數(shù)2.自定義函數(shù)

(2)匿名函數(shù)7.2JavaScript程序設(shè)計(jì)基礎(chǔ)7.2.3JavaScript函數(shù)2.自定義函數(shù)

(3)自調(diào)用函數(shù)

JavaScript函數(shù)除了可以被其它語(yǔ)句或事件調(diào)用外，也允許將函數(shù)的定義與調(diào)用一并實(shí)現(xiàn)，這種函數(shù)稱為“自調(diào)用函數(shù)”。7.3JavaScript對(duì)象7.3.1JavaScript內(nèi)置對(duì)象

1.Array對(duì)象JavaScript的Array數(shù)組對(duì)象與C#不同的是它在聲明時(shí)無(wú)需指定數(shù)據(jù)類型，而且可以將不同類型的數(shù)據(jù)存放到同一數(shù)組中。Array對(duì)象的常用屬性是length，用于獲取數(shù)組中元素的個(gè)數(shù)。

Array對(duì)象的常用方法有concat、join、push、slice、sort和reverse。7.3JavaScript對(duì)象7.3.1JavaScript內(nèi)置對(duì)象

2.String對(duì)象可以使用以下2種方法創(chuàng)建String字符串對(duì)象。String對(duì)象的常用方法見(jiàn)表7-3。7.3JavaScript對(duì)象7.3.1JavaScript內(nèi)置對(duì)象

3.Date對(duì)象

需要說(shuō)明的是，起點(diǎn)時(shí)間“1970年1月1日零時(shí)”指GMT（格林威治時(shí)間），精確計(jì)算時(shí)間時(shí)起點(diǎn)的時(shí)分秒還要加上當(dāng)前所在的時(shí)區(qū)。北京時(shí)間的時(shí)區(qū)為東8區(qū)，起點(diǎn)時(shí)間實(shí)際為：“1970/01/0108:00:00”。

Date對(duì)象的常用方法

見(jiàn)表7-47.3JavaScript對(duì)象7.3.1JavaSc