ASPNET Web 程序設(shè)計(jì)課件第10章

第10章MicrosoftAjax

教學(xué)目標(biāo)1.AJAX的開發(fā)模式介紹2.ASP.NETAJAX的架構(gòu)及優(yōu)點(diǎn)3.AJAX服務(wù)器端控件的使用4.AJAXControlTookit工具包的下載及安裝5.使用AJAX即使開發(fā)一個(gè)聊天室10.1AJAX概述AJAX是AsynchronousJavaScriptandXML的縮寫，是一種利用已經(jīng)成熟的技術(shù)構(gòu)建具有良好交互性的Web應(yīng)用程序的好方法。通常稱AJAX頁面為無刷新Web頁面。ASP.NETAJAX是AJAX的Microsoft實(shí)現(xiàn)方式，對(duì)AJAX的使用以控件形式提供，提高了易用性。ASP.NETAJAX1.0以單獨(dú)下載的形式發(fā)布，可以在ASP.NET2.0之上安裝。從.NETFramework3.5開始，不再需要下載和安裝單獨(dú)的ASP.NETAJAX。3AJAX技術(shù)和傳統(tǒng)Web應(yīng)用程序比較410.1.1ASP.NETAJAX優(yōu)點(diǎn)ASP.NETAJAX是AJAX的Microsoft實(shí)現(xiàn)方式，專用于ASP.NET開發(fā)人員。使用ASP.NET中的AJAX功能，可以生成豐富的Web應(yīng)用程序。與傳統(tǒng)的Web應(yīng)用程序相比，基于ASP.NETAJAX的Web應(yīng)用程序具有以下優(yōu)點(diǎn)：局部頁刷新，即只刷新已發(fā)生更改的網(wǎng)頁部分。自動(dòng)生成的代理類，可簡化從客戶端腳本調(diào)用Web服務(wù)方法的過程。支持大部分流行的瀏覽器。因?yàn)榫W(wǎng)頁的大部分處理工作是在瀏覽器中執(zhí)行的，所以大大提高了效率510.2ASP.NETAJAX服務(wù)器控件當(dāng)把ASP.NETAJAX控件添加到ASP.NET網(wǎng)頁上后，再瀏覽這些網(wǎng)頁會(huì)自動(dòng)將支持的客戶端JavaScript腳本發(fā)送到瀏覽器以獲取AJAX功能。6常用的ASP.NETAJAX服務(wù)器控件ScriptManager：管理客戶端組件、局部頁刷新、本地化、全球化和自定義用戶腳本的腳本資源。如果使用UpdatePanel、UpdateProgress和Timer控件，就必須包含ScriptManager控件。UpdatePanel：實(shí)現(xiàn)刷新頁的選定部分，而不是使用同步回發(fā)來刷新整個(gè)頁面。7常用的ASP.NETAJAX服務(wù)器控件（續(xù)）UpdateProgress：提供有關(guān)UpdatePanel控件中的局部頁刷新的狀態(tài)信息。Timer：按定義的時(shí)間間隔執(zhí)行回發(fā)?？梢允褂肨imer控件來發(fā)送整個(gè)頁面，或配合使用UpdatePanel控件以按定義的時(shí)間間隔執(zhí)行局部頁刷新。810.2.1ScriptManager控件ASP.NET中AJAX功能的核心，管理一個(gè)頁面上的所有ASP.NETAJAX資源。包括將MicrosoftAJAX庫的JavaScript腳本下載到瀏覽器和協(xié)調(diào)通過使用控件UpdatePanel啟用的局部頁面刷新。每個(gè)實(shí)現(xiàn)AJAX功能的頁面都需要添加一個(gè)ScriptManager控件。語法格式如下：<asp:ScriptManagerID="ScriptManager1"runat="server"/>910.2.1ScriptManager控件（續(xù)）如果僅在一個(gè)ASP.NET網(wǎng)頁上添加了一個(gè)ScriptManager控件，而沒有添加其它的ASP.NETAJAX服務(wù)器控件，則在瀏覽該網(wǎng)頁時(shí)就會(huì)將MicrosoftAJAX庫的JavaScript腳本下載到瀏覽器。屬性EnablePartialRendering：確定了網(wǎng)頁是否能實(shí)現(xiàn)局部頁刷新功能。源程序：ScriptManager.aspx10在ScriptManager中注冊(cè)自定義JavaScript腳本在ScriptManager控件的<Scripts>子元素中創(chuàng)建一個(gè)指向腳本文件的ScriptReference對(duì)象。<asp:ScriptManagerID="ScriptManager1"runat="server"><Scripts>

<asp:ScriptReferencepath="MyScript.js"/></Scripts></asp:ScriptManager>11在ScriptManager中注冊(cè)自定義JavaScript腳本（續(xù)）腳本文件MyScript.js的最后一句必須是：if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();還可以使用RegisterClientScriptBlock()方法直接在ScriptManager控件中注冊(cè)腳本。ScriptManager.RegisterClientScriptBlock(Button1,typeof(Button),DateTime.Now.ToString(),"alert('welcome')",true);

12在母版頁中使用ScriptManager如果在母版頁中已添加了ScriptManager控件，則在內(nèi)容頁中就不能再添加ScriptManager控件。如果這時(shí)還要在內(nèi)容頁中使用ScriptManager控件的其他功能，可以通過添加ScriptManagerProxy控件實(shí)現(xiàn)。13在母版頁中使用ScriptManager（續(xù)）<%@PageLanguage="C#"MasterPageFile="~/AjaxMasterPage.master"%><asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server"><asp:ScriptManagerProxyID="ScriptManagerProxy1"runat="server"><Scripts><asp:ScriptReferencePath="MyScript.js"/></Scripts></asp:ScriptManagerProxy></asp:Content>

1410.2.2UpdatePanel控件UpdatePanel控件是一個(gè)容器控件，該控件自身不會(huì)在頁面上顯示任何內(nèi)容，主要作用是放置在其中的控件將具有局部刷新的功能。通過使用UpdatePanel控件，減少了整頁回發(fā)時(shí)的屏幕閃爍并提高了網(wǎng)頁交互性，改善了用戶體驗(yàn)，同時(shí)也減少了在客戶端和服務(wù)器之間傳輸?shù)臄?shù)據(jù)量。1512.2.2UpdatePanel控件（續(xù)）可以放置多個(gè)UpdatePanel控件。每個(gè)UpdatePanel控件可以指定獨(dú)立的頁面區(qū)域，實(shí)現(xiàn)獨(dú)立的局部刷新功能。實(shí)際使用時(shí)將需要局部刷新的控件放在UpdatePanel控件內(nèi)部的<ContentTemplate>子元素中。16<asp:AsyncPostBackTrigger>元素定義觸發(fā)器

<asp:UpdatePanelID="UpdatePanel1"runat="server"><ContentTemplate>

……//添加需要刷新的控件

</ContentTemplate><Triggers><asp:AsyncPostBackTriggerControlID="Button1"EventName="Click"/></Triggers></asp:UpdatePanel>17使用內(nèi)部按鈕刷新UpdatePanel控件

內(nèi)部按鈕是指包含于UpdatePanel控件內(nèi)的按鈕。18使用內(nèi)部按鈕刷新UpdatePanel控件

單擊命令按鈕時(shí)會(huì)引發(fā)頁面往返，包含于UpdatePanel控件中的Label控件和Button控件將被刷新。源程序：UpdatePanel1.aspx19程序說明默認(rèn)情況下，UpdatePanel控件內(nèi)的任何回發(fā)控件（如Button控件）都將導(dǎo)致異步回發(fā)并刷新面板的內(nèi)容。Label1控件和Button1控件都包含在UpdatePanel1控件的<ContentTemplate>子元素中。當(dāng)單擊命令按鈕時(shí)會(huì)引發(fā)頁面往返，頁面上的Label1控件和Button1控件都被刷新，而控件Label2沒有刷新。

20使用外部按鈕刷新UpdatePanel控件

外部按鈕是指未包含在UpdatePanel控件內(nèi)的按鈕。若要在單擊按鈕時(shí)實(shí)現(xiàn)局部刷新功能，就需要在UpdatePanel控件的<Triggers>元素中進(jìn)行觸發(fā)器設(shè)置。21實(shí)例

使用外部按鈕刷新UpdatePanel控件單擊命令按鈕時(shí)會(huì)引發(fā)頁面往返，頁面上的Label1控件將被刷新，而Button1控件不刷新。源程序：UpdatePanel2.aspx22為了避免不必要的數(shù)據(jù)回送，可以只將需要更新的控件放在UpdatePanel控件內(nèi)部的<ContentTemplate>子元素中。而將引發(fā)回送事件的控件放在UpdatePanel控件外部。同時(shí)為UpdatePanel控件建立<Triggers>子元素標(biāo)識(shí)的觸發(fā)器。，本實(shí)例將返回一個(gè)較小的異步響應(yīng)。23同一個(gè)頁面使用多個(gè)UpdatePanel控件

是否導(dǎo)致異步回發(fā)并刷新UpdatePanel控件將根據(jù)屬性UpdateMode的值而定。值為Always，則每次執(zhí)行回發(fā)時(shí)都會(huì)刷新控件UpdatePanel的內(nèi)容。回發(fā)包括來自其他UpdatePanel控件所包含的控件的異步回發(fā)，也包括來自UpdatePanel控件未包含的控件的回發(fā)。24UpdateMode的值為Conditional顯式調(diào)用UpdatePanel控件的Update()方法時(shí)。UpdatePanel控件嵌套在另一個(gè)UpdatePanel控件中并且刷新父面板時(shí)。通過使用UpdatePanel控件的Triggers屬性定義為觸發(fā)器的控件導(dǎo)致回發(fā)時(shí)。在這種情況下，該控件顯式觸發(fā)UpdatePanel內(nèi)容的刷新。將屬性ChildrenAsTriggers值設(shè)置為true并且UpdatePanel控件的子控件導(dǎo)致回發(fā)時(shí)。25同一個(gè)頁面使用多個(gè)UpdatePanel控件

當(dāng)單擊命令按鈕“刷新面板1”時(shí)會(huì)引發(fā)頁面往返，頁面上的Label1和Button1控件被刷新。當(dāng)單擊命令按鈕“刷新面板2”時(shí)會(huì)引發(fā)頁面往返，頁面上的Label2控件被刷新。源程序：MultiUpdatePanel.aspx2610.2.3Timer控件按定義的時(shí)間間隔引發(fā)頁面往返。當(dāng)經(jīng)過屬性Interval定義的時(shí)間間隔后，該JavaScript組件將從瀏覽器啟動(dòng)回發(fā)。此時(shí)，Timer控件的Tick事件將被觸發(fā)。設(shè)置Interval屬性可指定回發(fā)發(fā)生的頻率，而設(shè)置Enabled屬性可啟用或禁用Timer控件。可以在網(wǎng)頁上包含多個(gè)Timer控件。也可以將一個(gè)Timer控件用作網(wǎng)頁中多個(gè)UpdatePanel控件的觸發(fā)器關(guān)聯(lián)控件。

2710.3ASP.NETAJAXControlToolkit

一系列支持AJAX并可以在ASP.NET應(yīng)用程序中使用的擴(kuò)展AJAX控件。/ajax下載。運(yùn)行AjaxControlToolkit.vsi安裝文件會(huì)安裝新的VisualStudio項(xiàng)目模板。需要手工將擴(kuò)展AJAX控件添加到VisualStudio2008工具箱中。28部分常用擴(kuò)展AJAX控件表控件說明AlwaysVisibleControlExtender懸浮在固定位置的面板。CollapsiblePanelExtender可折疊的面板。DropShadowExtender讓面板投射出陰影。HoverMenuExtender顯示附加信息的面板。ModalPopupExtender網(wǎng)頁中的模態(tài)對(duì)話框。RoundedCornersExtender為面板添加圓角效果。29部分常用擴(kuò)展AJAX控件表（續(xù)）TextBoxWatermarkExtender帶有水印效果的TextBox。ToggleButtonExtender用圖片來代替CheckBoxSliderExtender網(wǎng)頁上的滑動(dòng)條。DropDownExtenderSharePoint樣式的下拉菜單。ValidatorCalloutExtender更加醒目的Validator。ReorderList用鼠標(biāo)拖動(dòng)改變條目順序。Rating樣式豐富的評(píng)級(jí)功能。30部分常用擴(kuò)展AJAX控件表（續(xù)）Accordion可折疊面板的集合。NoBot拒絕機(jī)器人程序。CascadingDropDown實(shí)現(xiàn)聯(lián)動(dòng)下拉框。ConfirmButtonExtender帶有確認(rèn)功能的按鈕。DragPanelExtender可在頁面中拖動(dòng)的窗口。DynamicPopulateExtender動(dòng)態(tài)UpdatePanel。FilteredTextBoxExtender防患于未然的用戶輸入驗(yàn)證。31部分常用擴(kuò)展AJAX控件表（續(xù)）NumericUpDownExtender用上下箭頭調(diào)整TextBox中的值。PagingBulletedListExtender在客戶端索引、分頁和排序的BulletedList。PasswordStrength即時(shí)檢驗(yàn)密碼的強(qiáng)度。PopupControlExtender幫助用戶輸入的面板。Res