第10章MicrosoftAjax

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

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

12在母版頁中使用ScriptManager如果在母版頁中已添加了ScriptManager控件，則在內容頁中就不能再添加ScriptManager控件。如果這時還要在內容頁中使用ScriptManager控件的其他功能，可以通過添加ScriptManagerProxy控件實現。13在母版頁中使用ScriptManager（續）<%@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控件是一個容器控件，該控件自身不會在頁面上顯示任何內容，主要作用是放置在其中的控件將具有局部刷新的功能。通過使用UpdatePanel控件，減少了整頁回發時的屏幕閃爍并提高了網頁交互性，改善了用戶體驗，同時也減少了在客戶端和服務器之間傳輸的數據量。1512.2.2UpdatePanel控件（續）可以放置多個UpdatePanel控件。每個UpdatePanel控件可以指定獨立的頁面區域，實現獨立的局部刷新功能。實際使用時將需要局部刷新的控件放在UpdatePanel控件內部的<ContentTemplate>子元素中。16<asp:AsyncPostBackTrigger>元素定義觸發器

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

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

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

內部按鈕是指包含于UpdatePanel控件內的按鈕。18使用內部按鈕刷新UpdatePanel控件

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

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

外部按鈕是指未包含在UpdatePanel控件內的按鈕。若要在單擊按鈕時實現局部刷新功能，就需要在UpdatePanel控件的<Triggers>元素中進行觸發器設置。21實例

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

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

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

2710.3ASP.NETAJAXControlToolkit

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