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

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

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

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

4、件，單位為ms。示例:17.3 定時控件Timer17.4 頁面進程控件UpdateProgress頁面和服務(wù)器交互操作需要較長的時間時，為了讓用戶知道目前正在交互，可通過UpdateProgress控件顯示該交互操作的過程。實現(xiàn)步驟 ：1創(chuàng)建AjaxProgress.aspx頁面，頁面代碼如下： 正在提交到服務(wù)器，請等待. 2設(shè)計AjaxProgress.aspx頁面事件雙擊AjaxProgress.aspx頁面中的“提交”按鈕，會在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)，讓線程延時5s，模擬服務(wù)器操作所需的時間。 17.5 ASP.NET AJAX控件工具集它建立在ASP.NET AJAX擴展之上，具有很多可用于Web客戶端的組件。 17.5.1 下載和安裝/Release/ProjectReleases.aspx?ReleaseId=16488 下載AjaxControlToolkit-Framework3.5- SP1.zip，解壓，運行

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

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

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

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

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

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

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