第17章 ASPNET AJAX程序設(shè)計(jì)-2012050719493788

1、第17章 ASP.NET AJAX程序設(shè)計(jì)第17章 ASP.NET AJAX程序設(shè)計(jì) 本章主要內(nèi)容包括：17.1 認(rèn)識(shí)ASP.NET AJAX控件17.2 ScriptManager和UpdatePanel17.3 定時(shí)控件Timer17.4 頁(yè)面進(jìn)程控件UpdateProgress17.5 ASP.NET AJAX控件工具集17.1 認(rèn)識(shí)ASP.NET AJAX控件AJAX技術(shù)是利用JavaScript，直接在瀏覽器里對(duì)Web服務(wù)器發(fā)出異步（Asynchronous）調(diào)用，服務(wù)器上的程序可響應(yīng)JavaScript的請(qǐng)求，將所需的數(shù)據(jù)傳回。 工具箱中的AJAX Extensions有:Scri

2、ptManager腳本管理員、UpdatePanel更新面板、Timer計(jì)時(shí)器、UpdateProgress頁(yè)面進(jìn)程控件。除了這些控件，也可以使用ASP.NET AJAX 控件工具集中的控件。17.2 ScriptManager和UpdatePanelScriptManager控件又稱為腳本管理控件，它和局部更新控件UpdatePanel能夠共同實(shí)現(xiàn)無(wú)刷新的Web環(huán)境。每個(gè)ASP.NET AJAX網(wǎng)頁(yè)都必須使用ScriptManager控件，必須出現(xiàn)在所有AJAX控件之前。ScriptManager控件有以下幾個(gè)重要屬性： EnablePartialRendering：這個(gè)網(wǎng)頁(yè)是否允許部分網(wǎng)頁(yè)

3、更新的功能。AsyncPostBackTimeout：對(duì)Web服務(wù)器進(jìn)行異步調(diào)用時(shí)，服務(wù)器多久沒(méi)有響應(yīng)將視為過(guò)期。AsyncPostBackErrorMessage：對(duì)Web服務(wù)器進(jìn)行異步調(diào)用失敗時(shí)傳回的報(bào)錯(cuò)信息。UpdatePanel控件是一個(gè)面板，充當(dāng)一個(gè)容器?？梢园岩碌膬?nèi)容放置在UpdatePanel控件中，從而實(shí)現(xiàn)不需要更新整個(gè)Web窗體頁(yè)就能夠更新其部分或局部的內(nèi)容。示例:該控件能夠指定一個(gè)時(shí)間間隔和Tick事件，在每次時(shí)間間隔到達(dá)之后，將觸發(fā)其Tick事件。該控件能夠定時(shí)執(zhí)行事先指定的一些操作。 Timer控件的Interval屬性，它決定Timer定時(shí)器多久發(fā)出一個(gè)Tick事

4、件，單位為ms。示例:17.3 定時(shí)控件Timer17.4 頁(yè)面進(jìn)程控件UpdateProgress頁(yè)面和服務(wù)器交互操作需要較長(zhǎng)的時(shí)間時(shí)，為了讓用戶知道目前正在交互，可通過(guò)UpdateProgress控件顯示該交互操作的過(guò)程。實(shí)現(xiàn)步驟 ：1創(chuàng)建AjaxProgress.aspx頁(yè)面，頁(yè)面代碼如下： 正在提交到服務(wù)器，請(qǐng)等待. 2設(shè)計(jì)AjaxProgress.aspx頁(yè)面事件雙擊AjaxProgress.aspx頁(yè)面中的“提交”按鈕，會(huì)在AjaxProgress.aspx.cs文件中加入Click事件，程序代碼如下：protected void btnCommit_Click(object se

5、nder, EventArgs e) System.Threading.Thread.Sleep(5000); lbOK.Text = 提交成功！; System.Threading.Thread.Sleep(5000)，讓線程延時(shí)5s，模擬服務(wù)器操作所需的時(shí)間。 17.5 ASP.NET AJAX控件工具集它建立在ASP.NET AJAX擴(kuò)展之上，具有很多可用于Web客戶端的組件。 17.5.1 下載和安裝/Release/ProjectReleases.aspx?ReleaseId=16488 下載AjaxControlToolkit-Framework3.5- SP1.zip，解壓，運(yùn)行

6、AjaxControlExtender文件夾下的AjaxControlExtender.vsi文件 17.5.2 彈出式日歷選擇控件CalendarExtender當(dāng)用戶需要在文本框等控件中輸入時(shí)間時(shí)，在日歷控件中單擊日歷，可以保證用戶輸入日歷格式的有效性。 可以在ScriptManager控件的屬性窗口中設(shè)置EnableScriptGlobalization=“true” ，使日歷控件顯示中文；CalendarExtender控件時(shí)間的格式設(shè)置：Format=yyyy-MM-dd。 17.5.3 密碼強(qiáng)度智能提示控件PasswordStrength告訴用戶自己所輸入密碼的安全性的強(qiáng)弱，在用戶

7、注冊(cè)時(shí)，提醒用戶密碼的安全級(jí)別。設(shè)置PasswordStrength控件的TextStrengthDescriptions屬性為“很差;差;一般;好;很好”，PrefixText屬性為“強(qiáng)度:”。代碼：TextStrengthDescriptions=很差;差;一般;好;很好 PrefixText=強(qiáng)度： 17.5.4 文本框水印控件TextBoxWatermarkExtender為TextBox控件加上提示信息，以水印的效果顯示 。設(shè)置控件的WatermarkText屬性值為“請(qǐng)輸入用戶名稱” 17.5.5 突出顯示驗(yàn)證控件ValidatorCalloutExtender控件能夠通過(guò)一個(gè)突出

8、的層，以非常友好的方式顯示驗(yàn)證的提示信息。 代碼： 17.5.6 確認(rèn)提示按鈕控件ConfirmButtonExtender用于：用戶單擊刪除數(shù)據(jù)按鈕，會(huì)跳出一個(gè)對(duì)話框提醒用戶是否真的要執(zhí)行該操作，如果單擊“是”按鈕，就執(zhí)行該按鈕的事件處理函數(shù)；如果單擊“否”按鈕，就取消該操作。設(shè)定控件ConfirmText屬性為：“你真的要執(zhí)行該操作嗎？” 在按鈕上創(chuàng)建的Click事件 ：17.5.7 彈出控件PopupControlExtender可以為頁(yè)面上的任意控件創(chuàng)建彈出窗口。例如，創(chuàng)建一個(gè)彈出窗口，在該彈出窗口中包含一組單選按鈕，給文本框提供數(shù)據(jù)。作用：是控制彈出窗口控件（panel、div）的顯

9、示、消失并獲得彈出窗口中控件的返回值，返回到目標(biāo)控件中去。 在頁(yè)面上拖放一個(gè)ScriptManager控件、一個(gè)UpdatePanel控件、一個(gè)Panel控件、一個(gè)TextBox控件、一個(gè)RadioButtonList控件和一個(gè)PopupControlExtender控件，代碼如下所示： UpdatePanel一定要放在Panel里面，一定要將RadioButtonList的AutoPostBack屬性設(shè)為True。還需要在標(biāo)記中建立一個(gè)CSS樣式，控制彈出窗口的顯示和消失，樣式文件如下： .popupbox visibility: hidden; border-color: #000000;

10、 background: #ff9900; font-size: 12px; height:100px; width:100px; visibility:hidden，彈出的窗口隱藏。PopupControlExtender的屬性配置如下所示：TargetControlID是指PopupControlExtender的目標(biāo)控件ID，這里是文本框，把RadioButtonList中被選擇項(xiàng)的值顯示在文本框中。PopupControlID指彈出控件的ID，這里是Panel1。CommitScript指選擇完成后調(diào)用的JS腳本，這里用e.value，是返回選擇項(xiàng)的value值。Position指彈出

11、控件出現(xiàn)在目標(biāo)控件的哪個(gè)位置。CommitProperty指彈出窗口中控件的返回值屬性，這里指RadioButtonList的值的屬性名稱，可以改成Text。在頁(yè)面上雙擊RadioButtonList1控件切換到CS代碼窗口，編寫(xiě)代碼，如下所示： protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e) if (RadioButtonList1.SelectedValue != null) TextBox1_PopupControlExtender.Commit(RadioButtonLis

12、t1.SelectedValue); RadioButtonList1.ClearSelection();/將所有選項(xiàng)Selected屬性設(shè)置為false 在CS文件中指定RadioButtonList控件的返回值。 17.5.8 自動(dòng)完成控件AutoCompleteExtender根據(jù)用戶輸入的部分或全部關(guān)鍵字顯示一個(gè)在線提示列表。以在文本框中查找新聞標(biāo)題為例:該功能使用AjaxService Web服務(wù)的GetCompleteTextList(string prefixText,int count)方法在后臺(tái)綁定數(shù)據(jù)庫(kù)中相應(yīng)新聞標(biāo)題的數(shù)據(jù)，輸入拼音或輸入簡(jiǎn)稱后即可自動(dòng)查找全稱，鼠標(biāo)單擊實(shí)現(xiàn)快速錄入。 設(shè)計(jì)步驟如下：（1）在Web窗體中添加一個(gè)TextBox控件，在文本框的“添加擴(kuò)展程序”中選取AutoCompleteExtender控件，代碼如下所示： （2）建立Web服務(wù)（WebService）在“解決方案資源管理器”的項(xiàng)目名稱上右擊，在彈出的快捷菜單上選擇“添加