UpdatePanel 控制項

ASP . NET 的 UpdatePanel 控制項可讓您建置功能豐富,並以用戶端為中心的網頁應用程式。透過 UpdatePanel 控制項,您可以在每次回傳時,只重新整理網頁中的選取部分,而無需重新整理整個網頁。這稱為執行部分網頁更新。包含 ScriptManager 控制項及一或多個 UpdatePanel 控制項的 ASP.NET 網頁,可以自動執行部分網頁更新,而無需自訂用戶端指令碼。

UpdatePanel 控制項需要在 web . config 檔案中加以設定,才可正常運作。在嘗試使用此控制項時,若您的網站中沒有包含必要的 web.config 檔案,則原本應顯示該控制項之網頁的 [設計] 檢視中會出現錯誤。若您在 [設計] 檢視中按一下處於該狀態的控制項,Microsoft Expression Web 將會讓您選擇建立新的 web.config 檔案,或更新現有的 web.config 檔案。

案例

UpdatePanel 為伺服器控制項,可用於開發執行複雜用戶端行為的網頁,讓網頁與使用者的互動更豐富。撰寫程式碼協調伺服器與用戶端只更新網頁上的指定部分,必須十分熟悉 ECMAScript (JavaScript)。但若是使用 UpdatePanel 控制碼,您無需撰寫任何用戶端指令碼,網頁即可執行部分網頁更新。如有需要,可以新增自訂的用戶端指令碼,藉以提升用戶端使用者經驗。使用 UpdatePanel 控制項時,網頁的行為與瀏覽器無關,因此可以降低用戶端與伺服器之間的資料傳輸量。

背景

您必須指定網頁中可以更新的區域,UpdatePanel 控制項才可不重新整理整個網頁,而只整理指定的部分。此處理由 ScriptManager 伺服器控制項及用戶端 PageRequestManager 類別進行協調。當啟用部分網頁更新時,可以利用非同步方式將控制項傳至伺服器。非同步回傳的行為與一般回傳相同,其中的伺服器網頁會執行完整的網頁與控制項生命週期。但使用非同步回傳時,網頁更新只會針對 UpdatePanel 控制項所限定的網頁區域部分及標示要更新的區域進行。伺服器只會將受影響元素的 HTML 標記傳送給傳送給瀏覽器。

啟用部分網頁更新

網頁中需有 ScriptManager 控制項,UpdatePanel 控制項才可運作。因為 ScriptManager 控制項之 EnablePartialRendering 屬性的預設值為 true,因此預設會啟用部分網頁更新。

指定 UpdatePanel 控制項的內容

只要將內容置於 [設計] 檢視的面板中,即可將內容新增到 UpdatePanel 控制項。例如,您可以將其他 ASP.NET 與 HTML 控制項拖曳到面板中,接著再將游標置於面板上,直接在其中鍵入內容。當將內容新增到 [設計] 檢視的 UpdatePanel 控制項時,會自動在內容的頭尾新增必要的 <ContentTemplate></ContentTemplate> 標記。若要將內容新增到 [程式碼] 檢視的 UpdatePanel 控制項,而不 [設計] 檢視,且內容頭尾尚未設定 <ContentTemplate></ContentTemplate> 標時,即手動新增;否則將不會呈現 UpdatePanel 控制項中的內容。

第一次呈現內含一或多個 UpdatePanel 控制項的網頁時,會呈現 UpdatePanel 控制項的所有內容,然後一併傳送給瀏覽器。在後續的非同步回傳中,個別 UpdatePanel 控制項的內容則可能會有所更新。面板設定、引發回傳的元素,以及各面板專有的程式碼決定了更新的內容。

指定 UpdatePanel 觸發程序

預設 UpdatePanel 控制項中所有的回傳皆會引發非同步回傳,進而重新整理面板的內容。但您也可以在網頁上設定其他控制項,藉此重新整理的 UpdatePanel 控制項。若要執行此作業,可以定義 UpdatePanel 控制項的觸發程序。觸發程序實為繫結,可指定引發面板更新的回傳控制項及事件。當指定的觸發程序控制項事件發生 (如按鈕的 Click 事件) 時,即會重新整理更新面板。

您可以使用 [UpdatePanelTrigger 集合編輯器] 對話方塊 (從 [標籤屬性] 工作窗格的 [觸發程序] 屬性加以顯示) 建立 UpdatePanel 控制項的觸發程序。

您可以選擇是否要指定觸發程序的控制項事件。若不指定事件,即會以觸發程序事件為控制項的預設事件。以 Button 控制項為例,其預設事件即為 Click 事件。

UpdatePanel 控制項如何重新整理

下列清單是 UpdatePanel 控制項的屬性設定,可以決定部分網頁呈現期間,更新面板內容的時間:

  • 若將 UpdateMode 屬性設為 [要檢查],即會在每次傳送網頁任意位置所產生的回傳時,更新 UpdatePanel 控制項內容。這包括其他 UpdatePanel 控制項內之控制項的非同步回傳,以及不在 UpdatePanel 控制項內之控制項的回傳。

  • 若將 UpdateMode 屬性設為 Conditional,則當下列一項條件成立時,即會更新 UpdatePanel 控制項的內容:

    • 當回傳由該 UpdatePanel 控制項觸發程序所引發。

    • 當明確地呼叫了 UpdatePanel 控制項的 Update 方法。

    • 當 UpdatePanel 控制項位於其他 UpdatePanel 控制項的巢狀結構下而更新了父面板。

    • 當 ChildrenAsTriggers 屬性設為 true,且 UpdatePanel 控制項的子控制項引發了回傳。除非已將巢狀 UpdatePanel 控制項的子控制項明確定義為父面板的觸發程序,否則其不會引發外部 UpdatePanel 控制項的更新。

若 ChildrenAsTriggers 屬性設定為 false,且 UpdateMode 屬性設定為 [要檢查],並因而傳回例外。僅當 UpdateMode 屬性的設定為 Conditional 時,才需使用 ChildrenAsTriggers 屬性。

使用巢狀 UpdatePanel 控制項

UpdatePanel 控制項可為巢狀。當父面板重新整理時,會一併重新整理所有的巢狀面板。若只重新整理子面板,便只會更新子面板。

與 UpdatePanel 控制項不相容的控制項

下列 ASP.NET 控制項與部分網頁更新不相容,不適合在 UpdatePanel 控制項內使用:

  • 不同狀況下的 Treeview 控制項。一是啟用了不屬於非同步回傳的回呼。一是直接將樣式設定為控制項屬性,而不是藉由參考 CSS 樣式而明確地設定控制項的樣式。一是當 EnableClientScript 屬性為 false (預設值為 true) 時。一是當您變更了非同步回傳間之 EnableClientScript 屬性的值。

  • 當直接將樣式設定為控制項屬性,而不是藉由參考 CSS 樣式而明確地設定控制項之樣式時的 Menu 控制項。

  • 當在非同步回傳中將 FileUpload 與 HtmlInputFile 控制項用於上載檔案時的這兩項控制項。

  • 當 GridView 與 DetailsView 控制項之 EnableSortingAndPagingCallbacks 屬性設定為 true 時。預設值為 false。

  • 屬性已轉換為可編輯之範本的 Login、PasswordRecovery、ChangePassword 及 CreateUserWizard 控制項。

  • 替代控制項。

若要在 UpdatePanel 控制項內使用 FileUpload 或 HtmlInputFile 控制項,請將回傳控制項設定為將檔案送給面板的 PostBackTrigger 控制項。FileUpload 及 HtmlInputFile 控制項只可用於回傳情況。

所有其他在 UpdatePanel 控制項內運作的控制項。

使用 UpdatePanel 控制項內的 Web Parts 控制項

ASP.NET 的 Web Parts 是一組整合的控制項,可用於建立網站,讓使用者直接從瀏覽器修改網頁的內容、外觀及行為。使用 UpdatePanel 控制項內的 Web Parts 控制項時的限制包括:

  • 每個 WebPartZone 控制項必須位於相同的 UpdatePanel 控制項內。例如,相同的網頁上若有兩個 UpdatePanel 控制項,不可各有其 WebPartZone 控制項。

  • WebPartManager 控制項會管理 Web Parts 控制項的所有用戶端狀態資訊 。其必須是網頁中最外層的 UpdatePanel 控制項。

  • 您無法透過非同步回傳匯入或匯出 Web Parts 控制項。(執行此工作時需要 FileUpload 控制項,而此控制項無法與非同步回傳並用)。匯入 Web Parts 控制項預設會執行完整的回傳。

  • 您無法在非同步回傳期間新增或修改 Web Parts 控制項的樣式。

如需有關 UpdatePanel 控制項的詳細資訊,請參閱 MSDN Library 的UpdatePanel 控制項概觀 (英文)。

如需所有 UpdatePanel 控制項屬性的說明,請參閱 MSDN Library 的 UpdatePanel (英文)。

請參閱

概念

教學課程:如何定時重新整理 UpdatePanel 控制項

教學課程:如何使用兩個獨立更新區域建立網頁

ScriptManager 控制項

部分網頁呈現概觀