一、ASP.NET AJAX 控件概述
借助 ASP.NET AJAX 控件,使用很少的客戶端腳本或不使用客戶端腳本就能創(chuàng)建豐富的客戶端行為,如在異步回發(fā)過(guò)程中進(jìn)行部分頁(yè)更新(在回發(fā)時(shí)刷新網(wǎng)頁(yè)的選定部分,而不是刷新整個(gè)網(wǎng)頁(yè))和顯示更新進(jìn)度。異步部分頁(yè)更新可避免整頁(yè)回發(fā)的開(kāi)銷。
ScriptManager 控件 為啟用了 AJAX 的 ASP.NET 網(wǎng)頁(yè)管理客戶端腳本。
ScriptManagerProxy 控件 允許內(nèi)容頁(yè)和用戶控件等嵌套組件在父元素中已定義了 ScriptManager 控件的情況下將腳本和服務(wù)引用添加到網(wǎng)頁(yè)。
Timer 控件 在定義的時(shí)間間隔執(zhí)行回發(fā)。如果將 Timer 控件和 UpdatePanel 控件結(jié)合在一起使用,可以按照定義的間隔啟用部分頁(yè)更新。您還可以使用 Timer 控件來(lái)發(fā)布整個(gè)網(wǎng)頁(yè)。
UpdatePanel 控件 可用于生成功能豐富、以客戶端為中心的 Web 應(yīng)用程序。通過(guò)使用 UpdatePanel 控件,可以執(zhí)行部分頁(yè)更新。
UpdateProgress 控件 提供有關(guān) UpdatePanel 控件中的部分頁(yè)更新的狀態(tài)信息。
所有 ASP.NET AJAX 控件都需要 web.config 文件中的特定設(shè)置才能正常運(yùn)行。如果您試圖使用這些控件之一,但您的網(wǎng)站不包含所需的 web.config 文件,則網(wǎng)頁(yè)的“設(shè)計(jì)”視圖中本應(yīng)顯示該控件之處會(huì)出現(xiàn)錯(cuò)誤。在“設(shè)計(jì)”視圖中,如果您單擊處于該狀態(tài)的控件,則 Microsoft Expr
二、ScriptManager 控件
ScriptManager 控件為啟用了 AJAX 的 ASP.NET 網(wǎng)頁(yè)管理客戶端腳本。默認(rèn)情況下,ScriptManager 控件會(huì)向網(wǎng)頁(yè)注冊(cè) Microsoft AJAX Library 的腳本。這樣,客戶端腳本就能使用類型系統(tǒng)擴(kuò)展插件,還能支持部分頁(yè)呈現(xiàn)和 Web 服務(wù)調(diào)用之類的功能。
方案 若要啟用 ASP.NET 的以下 AJAX 功能,必須在網(wǎng)頁(yè)中使用一個(gè) ScriptManager 控件:Microsoft AJAX Library 的客戶端腳本功能和要發(fā)送到瀏覽器的任何自定義腳本。
部分頁(yè)呈現(xiàn)允許在不回發(fā)的情況下單獨(dú)刷新網(wǎng)頁(yè)上的各個(gè)區(qū)域。ASP.NET UpdatePanel、UpdateProgress 和 Timer 控件需要有 ScriptManager 控件才能支持部分頁(yè)呈現(xiàn)。
Web 服務(wù)的 JavaS
背景 當(dāng)某網(wǎng)頁(yè)包含一個(gè)或多個(gè) UpdatePanel 控件時(shí),ScriptManager 控件會(huì)管理瀏覽器中的部分頁(yè)呈現(xiàn)。該控件通過(guò)與網(wǎng)頁(yè)生命周期進(jìn)行交互來(lái)更新該網(wǎng)頁(yè)在 UpdatePanel 控件內(nèi)的組成部分。
ScriptManager 控件的 EnablePartialRendering 屬性確定網(wǎng)頁(yè)是否參與部分頁(yè)更新。默認(rèn)情況下,EnablePartialRendering 屬性為真。因此,當(dāng)您將 ScriptManager 控件添加到網(wǎng)頁(yè)時(shí),會(huì)默認(rèn)啟用部分頁(yè)呈現(xiàn)功能。
ScriptManagerProxy 類
一個(gè)網(wǎng)頁(yè)只能添加一個(gè) ScriptManager 控件實(shí)例。該控件可直接包含在網(wǎng)頁(yè)中,也可以間接包含在用戶控件、母版頁(yè)的內(nèi)容頁(yè)或嵌套的母版頁(yè)等嵌套組件內(nèi)。如果某網(wǎng)頁(yè)已包含一個(gè) ScriptManager 控件,但嵌套組件或父組件需要 ScriptManager 控件的其他功能,則該組件可以包括一個(gè) ScriptManagerProxy 控件。例如,利用 ScriptManagerProxy 控件,可以添加專用于嵌套組件的腳本和服務(wù)。
三、Timer 控件
ASP.NET AJAX Timer 控件可按照定義的間隔執(zhí)行回發(fā)。如果將 Timer 控件和 UpdatePanel 控件結(jié)合在一起使用,可以按照定義的間隔啟用部分頁(yè)更新。您還可以使用 Timer 控件來(lái)發(fā)布整個(gè)網(wǎng)頁(yè)。
方案
當(dāng)您要執(zhí)行以下操作時(shí),可使用 Timer 控件:
定期更新一個(gè)或多個(gè) UpdatePanel 控件的內(nèi)容而不刷新整個(gè)網(wǎng)頁(yè)。
每次 Timer 控件導(dǎo)致回發(fā)時(shí)在服務(wù)器上運(yùn)行代碼。
按照定義的間隔將整個(gè)網(wǎng)頁(yè)同步發(fā)布到 Web 服務(wù)器。
背景
Timer 控件是一個(gè)服務(wù)器控件,用于將 JavaS
使用 Timer 控件時(shí),網(wǎng)頁(yè)中必須包括 ScriptManager 類的實(shí)例。
當(dāng) Timer 控件啟動(dòng)回發(fā)時(shí),Timer 控件會(huì)在服務(wù)器上引發(fā) Tick 事件。您可以為 Tick 事件創(chuàng)建一個(gè)事件處理程序,以便將網(wǎng)頁(yè)發(fā)布到服務(wù)器時(shí)執(zhí)行操作。
設(shè)置 Interval 屬性來(lái)指定發(fā)生回發(fā)的頻率,并設(shè)置 Enabled 屬性來(lái)開(kāi)啟或關(guān)閉 Timer。Interval 屬性以毫秒為單位,其默認(rèn)值為 60,000 毫秒,即 60 秒。
說(shuō)明:將 Timer 控件的 Interval 屬性設(shè)置為一個(gè)較小值會(huì)大量增加 Web 服務(wù)器的通信量。使用 Timer 控件可專門根據(jù)需要的頻率來(lái)刷新內(nèi)容。 |
如果不同的 UpdatePanel 控件必須在不同的時(shí)間間隔更新,則可以在網(wǎng)頁(yè)上加入多個(gè) Timer 控件。此外,Timer 控件的單個(gè)實(shí)例可以是某網(wǎng)頁(yè)中多個(gè) UpdatePanel 控件的觸發(fā)器。
在 UpdatePanel 控件內(nèi)部使用 Timer 控件
當(dāng) Timer 控件包含在 UpdatePanel 控件內(nèi)時(shí),Timer 控件會(huì)自動(dòng)充當(dāng)該 UpdatePanel 控件的觸發(fā)器。通過(guò)將 UpdatePanel 控件的 ChildrenAsTriggers 屬性設(shè)置為 false,可阻止此行為。
如果 Timer 控件在 UpdatePanel 控件內(nèi),則僅當(dāng)每個(gè)回發(fā)操作完成時(shí)才會(huì)重新創(chuàng)建 JavaS
在 UpdatePanel 控件外部使用 Timer 控件
當(dāng) Timer 控件在 UpdatePanel 控件之外時(shí),必須將 Timer 控件顯式定義為要更新的 UpdatePanel 控件的觸發(fā)器。
如果 Timer 控件在 UpdatePanel 控件之外,則在處理回發(fā)的同時(shí) JavaS
所設(shè)置的 Interval 屬性的值必須允許一個(gè)異步回發(fā)能在下次回發(fā)啟動(dòng)前完成。如果上一個(gè)回發(fā)還在處理當(dāng)中就啟動(dòng)了新的回發(fā),則第一個(gè)回發(fā)會(huì)被取消。
四、UpdateProgress 控件
UpdateProgress 控件提供有關(guān) UpdatePanel 控件中的部分頁(yè)更新的狀態(tài)信息。您可以自定義 UpdateProgress 控件的默認(rèn)內(nèi)容和布局。為防止在部分頁(yè)更新非??鞎r(shí)出現(xiàn)閃爍,可以指定在 UpdateProgress 控件顯示之前有一個(gè)延遲。
方案
利用 UpdateProgress 控件,在網(wǎng)頁(yè)包含一個(gè)或多個(gè)用于部分頁(yè)呈現(xiàn)的 UpdatePanel 控件時(shí),您可以設(shè)計(jì)一個(gè)更直觀的用戶界面。如果部分頁(yè)更新速度較慢,您可以使用 UpdateProgress 控件來(lái)直觀地反映更新?tīng)顟B(tài)。您可以在一個(gè)網(wǎng)頁(yè)上放置多個(gè) UpdateProgress 控件,每個(gè)控件都與不同的 UpdatePanel 控件關(guān)聯(lián)。此外,也可以使用一個(gè) UpdateProgress 控件,并將其與該網(wǎng)頁(yè)上的所有 UpdatePanel 控件關(guān)聯(lián)。
背景
UpdateProgress 控件將呈現(xiàn)一個(gè) <div> 元素,該元素是顯示還是隱藏取決于關(guān)聯(lián)的 UpdatePanel 控件是否導(dǎo)致了異步回發(fā)。對(duì)于初始頁(yè)呈現(xiàn)和同步回發(fā),UpdateProgress 控件不顯示。
將 UpdateProgress 控件與 UpdatePanel 控件關(guān)聯(lián)
通過(guò)設(shè)置 UpdateProgress 控件的 AssociatedUpdatePanelID 屬性可將 UpdateProgress 控件與 UpdatePanel 控件相關(guān)聯(lián)。當(dāng)某 UpdatePanel 控件發(fā)生回發(fā)事件時(shí),會(huì)顯示所有關(guān)聯(lián)的 UpdateProgress 控件。如果不將 UpdateProgress 控件與特定的 UpdatePanel 控件相關(guān)聯(lián),則 UpdateProgress 控件會(huì)顯示任何異步回發(fā)的進(jìn)度。
如果 UpdatePanel 控件的 ChildrenAsTriggers 屬性設(shè)置為假,并且該 UpdatePanel 控件內(nèi)部發(fā)生了一個(gè)異步回發(fā),則會(huì)顯示任何關(guān)聯(lián)的 UpdateProgress 控件。
創(chuàng)建 UpdateProgress 控件的內(nèi)容
若要指定 UpdateProgress 控件顯示的消息,請(qǐng)?jiān)?#8220;設(shè)計(jì)”視圖中將所需的內(nèi)容放置到面板中。例如,您可以將其他 ASP.NET 和 HTML 控件拖入面板,然后將光標(biāo)置于面板內(nèi)并在面板中直接鍵入內(nèi)容。在“設(shè)計(jì)”視圖中向 UpdateProgress 控件添加消息時(shí),系統(tǒng)會(huì)自動(dòng)在內(nèi)容兩邊添加所需的 <ProgressTemplate> 標(biāo)記。如果您是在“代碼”視圖而不是“設(shè)計(jì)”視圖中向 UpdateProgress 控件添加內(nèi)容,則必須手動(dòng)添加 <ProgressTemplate></ProgressTemplate> 標(biāo)記(如果它們尚不存在),否則不會(huì)呈現(xiàn)該消息。
指定內(nèi)容布局
當(dāng) DynamicLayout 屬性為真時(shí),UpdateProgress 控件最初不會(huì)占據(jù)網(wǎng)頁(yè)顯示中的任何空間,而是在需要時(shí)網(wǎng)頁(yè)動(dòng)態(tài)地更改為顯示 UpdateProgress 控件內(nèi)容。為支持動(dòng)態(tài)顯示,該控件呈現(xiàn)為一個(gè)其顯示樣式屬性最初設(shè)置為無(wú)的 <div> 元素。
當(dāng) DynamicLayout 屬性為假時(shí),UpdateProgress 控件會(huì)占用網(wǎng)頁(yè)顯示空間,即使該控件不可見(jiàn)也會(huì)占用。在這種情況下,該控件的 <div> 元素將其顯示樣式屬性設(shè)置為塊,將其可見(jiàn)性最初設(shè)置為隱藏。
將 UpdateProgress 控件置于網(wǎng)頁(yè)上
您可以將 UpdateProgress 控件置于 UpdatePanel 控件內(nèi)部或外部。只要其關(guān)聯(lián)的 UpdatePanel 控件因異步回發(fā)而更新,UpdateProgress 控件就會(huì)顯示。即使 UpdateProgress 控件在另一個(gè) UpdatePanel 控件內(nèi)部也是如此。
如果 UpdatePanel 控件在另一個(gè)更新面板內(nèi)部,則子面板內(nèi)部發(fā)生的回發(fā)會(huì)導(dǎo)致與子面板關(guān)聯(lián)的所有 UpdateProgress 控件都顯示出來(lái)。它也會(huì)顯示所有與父面板關(guān)聯(lián)的 UpdateProgress 控件。如果回發(fā)發(fā)生在父面板的直接子控件中,則僅顯示與該父面板關(guān)聯(lián)的 UpdateProgress 控件。這種行為遵循了回發(fā)觸發(fā)方式的邏輯。
五、ScriptManagerProxy 控件
使用 ScriptManagerProxy 控件,內(nèi)容頁(yè)和用戶控件等嵌套組件可以在父元素中已定義了 ScriptManager 控件的情況下將腳本和服務(wù)引用添加到網(wǎng)頁(yè)。
一個(gè)網(wǎng)頁(yè)只能包含一個(gè) ScriptManager 控件,該控件可直接位于網(wǎng)頁(yè)本身,也可以間接放置在嵌套的組件或父組件內(nèi)。利用 ScriptManagerProxy 控件,可以將腳本和服務(wù)添加到其母版頁(yè)或主機(jī)頁(yè)已包含 ScriptManager 控件的內(nèi)容頁(yè)和用戶控件。
當(dāng)您使用 ScriptManagerProxy 控件時(shí),可以添加 ScriptManager 控件定義的腳本和服務(wù)集合。如果不希望在包括特定 ScriptManager 控件的每個(gè)網(wǎng)頁(yè)上包括特定的腳本和服務(wù),請(qǐng)將它們從 ScriptManager 控件中刪除,而改用 ScriptManagerProxy 控件將它們添加到單獨(dú)的網(wǎng)頁(yè)。
六、UpdatePanel 控件
ASP.NET UpdatePanel 控件可用于生成功能豐富、以客戶端為中心的 Web 應(yīng)用程序。通過(guò)使用 UpdatePanel 控件,可以在回發(fā)期間刷新網(wǎng)頁(yè)的選定部分而不是刷新整個(gè)網(wǎng)頁(yè)。這稱為執(zhí)行部分頁(yè)更新。包含一個(gè) ScriptManager 控件和一個(gè)或多個(gè) UpdatePanel 控件的 ASP.NET 網(wǎng)頁(yè),不需要使用自定義客戶端腳本即可自動(dòng)參與部分頁(yè)更新。
方案
UpdatePanel 控件是一個(gè)服務(wù)器控件,借助它,可以開(kāi)發(fā)出具有復(fù)雜客戶端行為的網(wǎng)頁(yè),使網(wǎng)頁(yè)能夠更好地與最終用戶進(jìn)行交互。編寫在服務(wù)器和客戶端進(jìn)行協(xié)調(diào)以便只更新網(wǎng)頁(yè)指定部分的代碼通常需要深入了解 ECMAScript (JavaS
背景
UpdatePanel 控件的工作方式是指定可更新的網(wǎng)頁(yè)區(qū)域,而不刷新整個(gè)網(wǎng)頁(yè)。此過(guò)程由 ScriptManager 服務(wù)器控件和客戶端 PageRequestManager 類進(jìn)行協(xié)調(diào)。當(dāng)部分頁(yè)更新被啟用時(shí),控件可異步發(fā)布到服務(wù)器。異步回發(fā)的行為類似于常規(guī)回發(fā),因?yàn)樯傻姆?wù)器網(wǎng)頁(yè)執(zhí)行整個(gè)網(wǎng)頁(yè)和控件生命周期。但是,使用異步回發(fā),網(wǎng)頁(yè)更新被限制為 UpdatePanel 控件中包含的網(wǎng)頁(yè)區(qū)域以及被標(biāo)記為要更新的區(qū)域。服務(wù)器僅向?yàn)g覽器發(fā)送受影響元素的 HTML 標(biāo)記。
啟用部分頁(yè)更新
UpdatePanel 控件要求網(wǎng)頁(yè)中有一個(gè) ScriptManager 控件。默認(rèn)情況下,當(dāng) ScriptManager 控件的 EnablePartialRendering 屬性的默認(rèn)值為 true 時(shí)會(huì)啟用部分頁(yè)更新。
指定 UpdatePanel 控件的內(nèi)容
通過(guò)在“設(shè)計(jì)”視圖中將內(nèi)容放在面板中,可以向 UpdatePanel 控件添加內(nèi)容。例如,可以將其他 ASP.NET 和 HTML 控件拖入該面板,并將光標(biāo)置于面板內(nèi)并直接在其中鍵入內(nèi)容。在“設(shè)計(jì)”視圖中向 UpdatePanel 控件添加內(nèi)容時(shí),系統(tǒng)會(huì)自動(dòng)在內(nèi)容兩邊添加必要的 <ContentTemplate></ContentTemplate> 標(biāo)記。如果您是在“代碼”視圖而不是“設(shè)計(jì)”視圖中向 UpdatePanel 控件添加內(nèi)容,則必須手動(dòng)添加 <ContentTemplate></ContentTemplate> 標(biāo)記(如果它們尚不存在),否則不會(huì)呈現(xiàn) UpdatePanel 中的內(nèi)容。
當(dāng)包含一個(gè)或多個(gè) UpdatePanel 控件的網(wǎng)頁(yè)第一次呈現(xiàn)時(shí),UpdatePanel 控件的所有內(nèi)容都將呈現(xiàn)并發(fā)送到瀏覽器。以后發(fā)生異步回發(fā)時(shí),可能會(huì)分別更新各個(gè) UpdatePanel 控件的內(nèi)容。更新取決于面板設(shè)置、哪些元素引發(fā)了回發(fā),以及每個(gè)面板特有的代碼。
指定 UpdatePanel 觸發(fā)器
默認(rèn)情況下,UpdatePanel 控件內(nèi)的任何回發(fā)控件都會(huì)導(dǎo)致異步回發(fā)并刷新面板的內(nèi)容。但是,您也可以將網(wǎng)頁(yè)上的其他控件配置為刷新 UpdatePanel 控件。為此,需要為 UpdatePanel 控件定義觸發(fā)器。觸發(fā)器是指定哪個(gè)回發(fā)控件和事件導(dǎo)致面板更新的綁定。當(dāng)發(fā)生觸發(fā)器控件的指定事件(例如,按鈕的 Click 事件)時(shí),就會(huì)刷新更新面板。
您可以使用“UpdatePanelTrigger 集合編輯器”對(duì)話框?yàn)?UpdatePanel 控件創(chuàng)建觸發(fā)器,該對(duì)話框可從“標(biāo)記屬性”任務(wù)窗格的“觸發(fā)器”屬性調(diào)出。
觸發(fā)器的控件事件是可選的。如果您不指定事件,觸發(fā)器事件是控件的默認(rèn)事件。例如,對(duì)于 Button 控件,默認(rèn)事件是 Click 事件。
如何刷新 UpdatePanel 控件
以下列表介紹的 UpdatePanel 控件的屬性設(shè)置決定在部分頁(yè)呈現(xiàn)過(guò)程中面板的內(nèi)容何時(shí)更新:
如果 UpdateMode 屬性設(shè)置為“Always”,則網(wǎng)頁(yè)的任何地方發(fā)生的每個(gè)回發(fā)都會(huì)導(dǎo)致 UpdatePanel 控件內(nèi)容進(jìn)行更新。其中包括其他 UpdatePanel 控件內(nèi)的控件引發(fā)的異步回發(fā),以及不在 UpdatePanel 控件內(nèi)的控件引發(fā)的回發(fā)。
如果 UpdateMode 屬性設(shè)置為“Conditional”,則當(dāng)以下其中一項(xiàng)為真時(shí) UpdatePanel 控件的內(nèi)容會(huì)得到更新:
當(dāng)回發(fā)是由該 UpdatePanel 控件的觸發(fā)器所引起時(shí)。
當(dāng)您顯式調(diào)用 UpdatePanel 控件的 Update 方法時(shí)。
當(dāng) UpdatePanel 控件嵌套在另一個(gè) UpdatePanel 控件內(nèi)且父面板發(fā)生更新時(shí)。
當(dāng) ChildrenAsTriggers 屬性設(shè)置為真且該 UpdatePanel 控件的任何子控件導(dǎo)致回發(fā)時(shí)。嵌套的 UpdatePanel 控件的子控件不會(huì)導(dǎo)致外部 UpdatePanel 控件發(fā)生更新,除非它們被顯式定義為父面板的觸發(fā)器。
如果 ChildrenAsTriggers 屬性設(shè)置為 false 且 UpdateMode 屬性設(shè)置為“Always”,則會(huì)引發(fā)異常。僅當(dāng) UpdateMode 屬性設(shè)置為“Conditional”時(shí),才能使用 ChildrenAsTriggers 屬性。
使用嵌套的 UpdatePanel 控件
UpdatePanel 控件可以嵌套。如果父面板被刷新,則所有嵌套的面板都會(huì)刷新。如果子面板被刷新,則僅該子面板會(huì)更新。
與 UpdatePanel 控件不兼容的控件
下面的 ASP.NET 控件與部分頁(yè)更新不兼容,因此,不能用在 UpdatePanel 控件內(nèi):
在以下幾種情況下的 Treeview 控件:一種是當(dāng)回調(diào)不是作為異步回發(fā)的一部分啟用時(shí);一種是您直接將樣式設(shè)置為控件屬性,而不是使用對(duì) CSS 樣式的引用隱式為控件設(shè)置樣式時(shí);另一種是 EnableClientScript 屬性為 false(默認(rèn)值為 true)時(shí);還有一種是您在兩次異步回發(fā)之間更改 EnableClientScript 屬性的值時(shí)。
Menu 控件:當(dāng)您直接將樣式設(shè)置為控件屬性,而不是使用對(duì) CSS 樣式的引用隱式為該控件設(shè)置樣式時(shí)。
FileUpload 和 HtmlInputFile 控件:當(dāng)它們用來(lái)作為異步回發(fā)一部分的上載文件時(shí)。
其 EnableSortingAndPagingCallbacks 屬性被設(shè)置為 true 時(shí)的 GridView 和 DetailsView 控件。默認(rèn)值為 false。
其內(nèi)容尚未被轉(zhuǎn)換為可編輯模板的 Login、PasswordRecovery、ChangePassword 和 CreateUserWizard 控件。
Substitution 控件。
若要將 FileUpload 或 HtmlInputFile 控件用在 UpdatePanel 控件內(nèi),請(qǐng)將提交該文件的回發(fā)控件設(shè)置為該面板的 PostBackTrigger 控件。FileUpload 和 HtmlInputFile 控件可以僅用在回發(fā)情況下。
所有其他控件均可用在 UpdatePanel 控件內(nèi)。
在 UpdatePanel 控件內(nèi)使用 Web 部件控件
ASP.NET Web 部件是一組集成控件,用于創(chuàng)建網(wǎng)站使最終用戶可以直接從瀏覽器修改網(wǎng)頁(yè)的內(nèi)容、外觀和行為。只要遵守以下限制,可以在 UpdatePanel 控件內(nèi)使用 Web 部件控件:
每個(gè) WebPartZone 控件都必須在同一個(gè) UpdatePanel 控件內(nèi)。例如,網(wǎng)頁(yè)上不能有兩個(gè) UpdatePanel 控件,而每個(gè)控件又都有其自己的 WebPartZone 控件。
WebPartManager 控件管理 Web 部件控件的所有客戶端狀態(tài)信息。它必須在網(wǎng)頁(yè)上最外面的 UpdatePanel 控件內(nèi)。
不能使用異步回發(fā)來(lái)導(dǎo)入或?qū)С?Web 部件控件。(執(zhí)行此任務(wù)需要一個(gè) FileUpload 控件,它不能用于異步回發(fā)。)默認(rèn)情況下,導(dǎo)入 Web 部件控件會(huì)執(zhí)行完整回發(fā)。
在異步回發(fā)過(guò)程中,不能添加或修改 Web 部件控件的樣式。
教程:如何創(chuàng)建包含兩個(gè)獨(dú)立更新的區(qū)域的網(wǎng)頁(yè)
在本教程中,您將在一個(gè)網(wǎng)頁(yè)中使用多個(gè) UpdatePanel 控件。通過(guò)在一個(gè)網(wǎng)頁(yè)上使用多個(gè) UpdatePanel 控件,您可以按照遞增的方式單獨(dú)更新或一起更新該網(wǎng)頁(yè)的各個(gè)區(qū)域。
創(chuàng)建包含兩個(gè)獨(dú)立更新的區(qū)域的網(wǎng)頁(yè)
1、在“文件”菜單上,指向“新建”,然后單擊“ASPX”。
2、將光標(biāo)置于 ASPX 網(wǎng)頁(yè)的“設(shè)計(jì)”視圖中。
3、在“工具箱”任務(wù)窗格中,在“ASP.NET 控件”下的“AJAX”下,雙擊要添加到該網(wǎng)頁(yè)的“ScriptManager”控件。
4、在“工具箱”任務(wù)窗格中,在“ASP.NET 控件”下的“AJAX”下,雙擊“UpdatePanel”控件兩次,將兩個(gè) UpdatePanel 控件添加到該網(wǎng)頁(yè)。
5、選中網(wǎng)頁(yè)中的一個(gè) UpdatePanel 控件,在“標(biāo)記屬性”任務(wù)窗格中,將“UpdateMode”屬性設(shè)置為“Conditonal”。對(duì)另一個(gè) UpdatePanel 控件重復(fù)此步驟。
6、在“工具箱”任務(wù)窗格中,在“ASP.NET 控件”和“標(biāo)準(zhǔn)”類別下,將“Label”控件拖到“設(shè)計(jì)”視圖中的一個(gè) UpdatePanel 控件中。
7、選中網(wǎng)頁(yè)中的“Label”控件,在“標(biāo)記屬性”任務(wù)窗格中,將“Text”屬性設(shè)置為“Panel Created”。
8、在“工具箱”任務(wù)窗格中,在“ASP.NET 控件”和“標(biāo)準(zhǔn)”類別下,將“Button”控件拖到包含“Label”控件的同一個(gè) UpdatePanel 控件中。選中網(wǎng)頁(yè)中的該按鈕,在“標(biāo)記屬性”任務(wù)窗格中,將“Text”屬性設(shè)置為“Refresh Panel”。
9、在“工具箱”任務(wù)窗格中,在“ASP.NET 控件”和“標(biāo)準(zhǔn)”類別下,將“Calendar”控件拖到“設(shè)計(jì)”視圖中的另一個(gè) UpdatePanel 控件中。
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Panel refreshed at " + DateTime.Now.ToString();
}
10、按 F12 在您的 Web 瀏覽器中預(yù)覽該網(wǎng)頁(yè)。在 Web 瀏覽器中的該網(wǎng)頁(yè)中,單擊該按鈕。面板中的文本將更改,以顯示該面板的內(nèi)容上次刷新的時(shí)間。在日歷中,移到其他月份。另一個(gè)面板中的時(shí)間不會(huì)更改。這兩個(gè)面板的內(nèi)容會(huì)單獨(dú)更新。
回顧
本教程介紹了在一個(gè)網(wǎng)頁(yè)中使用多個(gè) UpdatePanel 控件的概念。當(dāng) UpdatePanel 控件不嵌套時(shí),您可以通過(guò)將 UpdateMode 屬性設(shè)置為“Conditional”來(lái)獨(dú)立更新每個(gè)面板。(UpdateMode 屬性的默認(rèn)值為“Always”。這將導(dǎo)致面板在任何異步回發(fā)后進(jìn)行刷新。)
當(dāng)面板嵌套時(shí),行為稍有不同。如果將外部控件和嵌套控件的 UpdateMode 屬性均設(shè)置為“Conditional”,則可在不刷新外部面板的情況下刷新內(nèi)部面板。但是,如果刷新外部更新面板,則內(nèi)部更新面板也會(huì)刷新。
教程:如何在規(guī)定的時(shí)間間隔刷新 UpdatePanel 控件
在本演練中,您將使用以下三個(gè) ASP.NET AJAX 服務(wù)器控件來(lái)在規(guī)定的時(shí)間間隔更新網(wǎng)頁(yè)的組成部分:即 ScriptManager 控件、UpdatePanel 控件和 Timer 控件。向網(wǎng)頁(yè)中添加這些控件后,就不必在每次回發(fā)時(shí)刷新整個(gè)網(wǎng)頁(yè)。只有 UpdatePanel 控件的內(nèi)容會(huì)更新。
在規(guī)定的時(shí)間間隔刷新 UpdatePanel 控件
1、在“文件”菜單上,指向“新建”,然后單擊“ASPX”。
2、將光標(biāo)置于 ASPX 網(wǎng)頁(yè)的“設(shè)計(jì)”視圖中。
3、在“工具箱”任務(wù)窗格中,在“ASP.NET 控件”下的“AJAX”下,雙擊要添加到該網(wǎng)頁(yè)的“ScriptManager”控件。
4、在“工具箱”任務(wù)窗格中,在“ASP.NET 控件”下的“AJAX”下,雙擊要添加到該網(wǎng)頁(yè)的 UpdatePanel 控件。
5、將光標(biāo)放在“設(shè)計(jì)”視圖中的 UpdatePanel 控件內(nèi)。
6、在“工具箱”任務(wù)窗格中,在“ASP.NET 控件”和“AJAX”類別下,雙擊“Timer”控件,將其插入網(wǎng)頁(yè)中的 UpdatePanel 控件中。
說(shuō)明:Timer 控件可以充當(dāng) UpdatePanel 控件內(nèi)部或外部的觸發(fā)器。本示例演示如何在 UpdatePanel 控件內(nèi)使用 Timer 控件。有關(guān)將 Timer 控件用作 UpdatePanel 控件外部的觸發(fā)器的示例,請(qǐng)參閱 MSDN Library 中的演練:對(duì)多個(gè) UpdatePanel 控件使用 ASP.NET Timer 控件(此鏈接可能指向英文頁(yè)面)。盡管該主題是針對(duì) Microsoft Visual Web Developer 編寫的,但是您仍可在 Microsoft Expr |
7、在網(wǎng)頁(yè)中選中 Timer 控件,在“標(biāo)記屬性”任務(wù)窗格中,將“間隔”屬性設(shè)置為 10000。“間隔”屬性以毫秒為單位,因此,將“間隔”屬性設(shè)置為 10,000 毫秒會(huì)每隔 10 秒鐘刷新一次該 UpdatePanel 控件。
說(shuō)明:在本示例中,計(jì)時(shí)器間隔設(shè)置為 10 秒。這樣,當(dāng)您運(yùn)行該示例時(shí),不必等很長(zhǎng)時(shí)間就能看到結(jié)果。但是,每個(gè)計(jì)時(shí)器間隔都會(huì)導(dǎo)致回發(fā)到服務(wù)器并增加網(wǎng)絡(luò)通信量。因此,在生產(chǎn)應(yīng)用程序中,應(yīng)該將此間隔設(shè)為仍然適用于您的應(yīng)用程序的最長(zhǎng)時(shí)間。 |
8、將光標(biāo)放在“設(shè)計(jì)”視圖中的 UpdatePanel 控件內(nèi)。
9、在“工具箱”任務(wù)窗格中,在“ASP.NET 控件”和“標(biāo)準(zhǔn)”類別下,雙擊“Label”控件,將其插入 UpdatePanel 控件中。
10、選中您網(wǎng)頁(yè)中的“Label”控件,在“標(biāo)記屬性”任務(wù)窗格中,在“文本”框中,鍵入“面板尚未刷新”。將光標(biāo)放在 UpdatePanel 控件之外。
11、在“工具箱”任務(wù)窗格中,在“ASP.NET 控件”和“標(biāo)準(zhǔn)”類別下,雙擊“Label”控件,向該網(wǎng)頁(yè)插入第二個(gè)標(biāo)簽。
說(shuō)明:請(qǐng)確保將第二個(gè) Label 控件添加在 UpdatePanel 控件之外。 |
protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = "Panel refreshed at: " +DateTime.Now.ToLongTimeString();
}
12、按 F12 在您的 Web 瀏覽器中預(yù)覽該網(wǎng)頁(yè)。等待至少 10 秒,以便 UpdatePanel 面板得到刷新。面板內(nèi)的文本將更改,以顯示上次刷新該面板的內(nèi)容的時(shí)間。但是,面板外部的文本不會(huì)刷新。
本演練介紹了如何使用 Timer 控件和 UpdatePanel 控件來(lái)啟用部分頁(yè)更新的基本概念。您必須將 ScriptManager 控件添加到任一包含 UpdatePanel 控件或 Timer 控件的網(wǎng)頁(yè)中。默認(rèn)情況下,面板內(nèi)的 Timer 控件將導(dǎo)致在異步回發(fā)過(guò)程中僅刷新該面板。如果將面板外的 Timer 控件配置為該面板的觸發(fā)器,則會(huì)導(dǎo)致刷新 UpdatePanel。
聯(lián)系客服