UpdatePanel 控制項概觀
更新：2007 年 11 月
ASP.NET UpdatePanel 控制項可協助您建置以用戶端為中心的豐富型 Web 應用程式。藉由使用 UpdatePanel 控制項，您可以重新整理網頁上選取的部分，不必以回傳重新整理整個網頁。也就是執行所謂的「網頁局部更新」(Partial-page Update)。ASP.NET 網頁上包含一個 ScriptManager 控制項及一個或多個 UpdatePanel 控制項，不需要自訂的用戶端指令碼就能自動參與網頁局部更新。
本主題包含與下列項目相關的資訊：
案例
背景
程式碼範例
類別參考
案例
UpdatePanel 控制項是一種伺服器控制項，可協助您開發 Web 網頁來回應複雜的用戶端行為，使 Web 網頁與使用者能有更多互動。撰寫可協調伺服器與用戶端之間互動的程式碼，以更新 Web 網頁上指定的部分，通常必須對 ECMAScript (JavaScript) 有相當程度的了解。然而，使用 UpdatePanel 控制項可讓您不必撰寫用戶端指令碼，也能更新部分 Web 網頁。如果您想要，還是可以加入自訂用戶端指令碼，提升用戶端使用者的體驗。當您使用 UpdatePanel 控制項時，網頁行為與瀏覽器各自獨立，可能會減少用戶端與伺服器間的資料傳輸量。
背景
指定網頁上要更新的區域，不必重新整理整個頁面，UpdatePanel 控制項就能運作。這個處理序由 ScriptManager 伺服器控制項及用戶端 PageRequestManager 類別來協調。網頁局部更新啟用時，控制項可非同步張貼到伺服器。非同步回傳類似於一般回傳，在一般回傳時，伺服器的結果網頁會執行完整的網頁及控制項生命週期。而使用非同步回傳時，網頁更新會受限於更新 UpdatePanel 控制項裡標記要更新的網頁區域。伺服器只會把受影響項目的 HTML 標記傳送給瀏覽器。用戶端 PageRequestManager 類別會在瀏覽器上執行文件物件模型 (DOM) 操作，用更新後的標記取代現有的 HTML。
.gif "注意事項") 注意事項： |
|---|
當您使用非同步回傳或使用 XMLHTTPRequest 物件時，如果 URL 包含雙位元組字元，可能會發生回傳錯誤。要解決此問題，可以將 <base href="url"/> 項目包含在頁面的 head 項目中，其中 href 屬性設定為參考頁面的 URL 編碼字串。您可以將這個加入的項目動態加入到伺服器程式碼。 |
下圖顯示在第一次載入後的網頁及後續重新整理 UpdatePanel 控制項內容的非同步回傳。
網頁局部呈現概觀
.png)
啟用網頁局部更新
UpdatePanel 控制項需要一個 Web 網頁中的 ScriptManager 控制項。網頁局部更新預設為啟用狀態，因為 ScriptManager 控制項的 EnablePartialRendering 屬性的預設值為 true。
下列範例顯示定義網頁上 ScriptManager 控制項及 UpdatePanel 控制項的標記。UpdatePanel 控制項內含一個 Button 控制項，按一下該控制項就會重新整理面板中的內容。ChildrenAsTriggers 屬性的預設值為 true。因此 Button 控制項的行為跟非同步回傳控制項很相似。
<asp:ScriptManager ID="ScriptManager"
/>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<!-- Other content in the panel. -->
<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1"
Text="Refresh Panel"
/>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<asp:ScriptManager ID="ScriptManager"
/>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<!-- Other content in the panel. -->
<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1"
Text="Refresh Panel"
/>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
指定 UpdatePanel 控制項內容
使用 ContentTemplate 屬性，以宣告方式將內容加入至 UpdatePanel 控制項。在標記中，此屬性會公開為 ContentTemplate 項目。如果要以程式設計的方式加入內容，請使用 ContentTemplateContainer 屬性。
包含一個或多個 UpdatePanel 控制項的網頁第一次呈現時，UpdatePanel 控制項的所有內容都會呈現並傳送到瀏覽器。後續的非同步回傳時，可能只會更新個別 UpdatePanel 控制項的內容。這要看面板設定值為何、引起回傳的是哪些項目，以及各面板的具體程式碼而定。
指定 UpdatePanel 觸發程序
根據預設，UpdatePanel 控制項內部任何回傳控制項都會引發非同步回傳並重新整理面板內容。不過，您也可以設定網頁上的其他控制項來重新整理 UpdatePanel 控制項。只要定義 UpdatePanel 控制項的「觸發程序」(Trigger) 即可。觸發程序是一個繫結，用以指定哪一個回傳控制項及事件會導致面板更新。觸發程序控制項指定的事件發生時 (如按鈕的 Click 事件)，更新面板就會重新整理。
下列範例顯示如何為 UpdatePanel 控制項指定觸發程序。
<asp:Button ID="Button1"
Text="Refresh Panel"
/>
<asp:ScriptManager ID="ScriptManager1"
/>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<%=DateTime.Now.ToString() %>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1"
Text="Refresh Panel"
/>
<asp:ScriptManager ID="ScriptManager1"
/>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<%=DateTime.Now.ToString() %>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
請用 UpdatePanel 控制項之 Triggers 項目中的 asp:AsyncPostBackTrigger 項目來定義觸發程序 (如果要在 Visual Studio 中編輯頁面，可以使用 [UpdatePanelTrigger 集合編輯器] 對話方塊來建立觸發程序)。
觸發程序的控制項事件是選擇性的。如果不指定事件，則觸發程序事件就是控制項的預設事件。例如，就 Button 控制項而言，預設事件為 Click 事件。
UpdatePanel 控制項如何重新整理
下列清單說明 UpdatePanel 控制項的屬性設定值，這些設定值會決定在呈現網頁局部期間，何時要更新面板內容。
如果 UpdateMode 屬性設定為 Always，則 UpdatePanel 控制項的內容都會在該網頁所產生的任何回傳上更新。包括其他 UpdatePanel 控制項內的控制項非同步回傳，以及 UpdatePanel 控制項外控制項的回傳。
如果 UpdateMode 屬性設定為 Conditional，則 UpdatePanel 控制項內容會在下列情況時更新：
回傳由該 UpdatePanel 控制項的觸發程序所引發時。
您明確呼叫 UpdatePanel 控制項的 Update 方法時。
UpdatePanel 控制項以巢狀方式位於另一個 UpdatePanel 控制項內，而父面板更新時。
ChildrenAsTriggers 屬性設定為 true，且 UpdatePanel 控制項的任何子控制項導致回傳時。除非明確定義巢狀 UpdatePanel 控制項的子控制項為父面板的觸發程序，否則它們不會導致外部 UpdatePanel 的更新。
如果將 ChildrenAsTriggers 屬性設定為 false，而 UpdateMode 屬性設定為 Always，將擲出例外狀況。只有將 UpdateMode 屬性設定為 Conditional 時，才會使用 ChildrenAsTriggers 屬性。
在主版頁面中使用 UpdatePanel 控制項
若要在主版頁面中使用 UpdatePanel 控制項，您必須決定要如何包含 ScriptManager 控制項。若將 ScriptManager 控制項包含在主版頁面裡，該控制項會形同所有內容頁面的 ScriptManager 控制項。(若要以宣告方式在內容頁面中註冊指令碼或服務，您可以在該內容頁面上加入 ScriptManagerProxy 控制項)。
主版頁面上如果不含 ScriptManager 控制項，則您可以在每一個包含 UpdatePanel 控制項的內容頁面上，個別放置 ScriptManager 控制項。視您打算如何管理應用程式內的用戶端指令碼，來選擇設計方式。如需如何管理用戶端指令碼的詳細資訊，請參閱 ScriptManager 控制項概觀。如需主版頁面的詳細資訊，請參閱 ASP.NET 主版頁面概觀。
在某些情況下，ScriptManager 控制項會位於主版頁面上，但某個內容頁面不需要網頁局部的呈現功能。在某些情況下，您必須以程式設計的方式，將該內容頁面上 ScriptManager 控制項的 EnablePartialRendering 屬性設定為 false。
下列範例顯示主版頁面上 ScriptManager 控制項的標記以及內容頁面上的 UpdatePanel 控制項。本範例為主版頁面定義了一個名為 LastUpdate 的屬性，此屬性參考自 UpdatePanel 控制項內部。
<%@ Master Language="VB" %>
<!DOCTYPE html PUBLIC "-'W3C'DTD XHTML 1.0 Transitional'EN"
"http:'www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
Public Property LastUpdate() As DateTime
Get
If ViewState("LastUpdate") Is Nothing Then
Return DateTime.Now
Else : Return ViewState("LastUpdate")
End If
End Get
Set(ByVal value As DateTime)
ViewState("LastUpdate") = value
End Set
End Property
Protected Sub MasterButton2_Click(ByVal Sender As Object, ByVal E As EventArgs)
LastUpdate = DateTime.Now
Dim up1 As UpdatePanel
up1 = ContentPlaceHolder1.FindControl("UpdatePanel1")
up1.Update()
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
ScriptManager1.RegisterAsyncPostBackControl(Button2)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>ScriptManager in Master Page Example</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:Panel ID="MasterPanel1" GroupingText="Master Page">
<asp:Button ID="Button1" Text="Full Page Refresh" />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="MasterButton2_Click" />
</asp:Panel>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" >
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
public DateTime LastUpdate
{
get
{
return (DateTime)(ViewState["LastUpdate"] ?? DateTime.Now);
}
set
{
ViewState["LastUpdate"] = value;
}
}
protected void MasterButton2_Click(object sender, EventArgs e)
{
LastUpdate = DateTime.Now;
((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
}
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(Button2);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>ScriptManager in Master Page Example</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:Panel ID="MasterPanel1" GroupingText="Master Page">
<asp:Button ID="Button1" Text="Full Page Refresh" />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="MasterButton2_Click" />
</asp:Panel>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" >
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
<%@ Page Language="VB" MasterPageFile="MasterVB.master"
Title="ScriptManager in Content Page" %>
<%@ MasterType VirtualPath="MasterVB.master" %>
<script >
Protected Sub Button3_Click(ByVal Sender As Object, ByVal E As EventArgs)
Master.LastUpdate = DateTime.Now
End Sub
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
runat="Server">
</asp:ScriptManagerProxy>
<asp:Panel ID="Panel2"
GroupingText="ContentPage"
>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<p>
Last updated: <strong>
<%= Master.LastUpdate.ToString() %>
</strong>
</p>
<asp:Button ID="Button3"
Text="Refresh Panel"
OnClick="Button3_Click"
/>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</asp:Content>
<%@ Page Language="C#" MasterPageFile="MasterCS.master"
Title="ScriptManager in Content Page" %>
<%@ MasterType VirtualPath="MasterCS.master" %>
<script >
protected void Button3_Click(object sender, EventArgs e)
{
Master.LastUpdate = DateTime.Now;
}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
runat="Server">
<asp:Panel ID="Panel2"
GroupingText="ContentPage"
>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<p>
Last updated: <strong>
<%= Master.LastUpdate.ToString() %>
</strong>
</p>
<asp:Button ID="Button3"
Text="Refresh Panel"
OnClick="Button3_Click"
/>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</asp:Content>
使用巢狀 UpdatePanel 控制項
UpdatePanel 控制項可以是巢狀結構。如果父面板重新整理，則所有的巢狀面板都會跟著重新整理。
下列範例顯示在另一個 UpdatePanel 控制項內定義一個 UpdatePanel 控制項的標記。父面板中的按鈕會觸發父面板及子面板的內容更新。子面板中的按鈕則只會觸發子面板更新。
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>UpdatePanelUpdateMode Example</title>
<style type="text/css">
div.NestedPanel
{
position: relative;
margin: 2% 5% 2% 5%;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager"
/>
<asp:UpdatePanel ID="OuterPanel"
UpdateMode="Conditional"
>
<ContentTemplate>
<div>
<fieldset>
<legend>Outer Panel </legend>
<br />
<asp:Button ID="OPButton1"
Text="Outer Panel Button"
/>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<br />
<asp:UpdatePanel ID="NestedPanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<div class="NestedPanel">
<fieldset>
<legend>Nested Panel 1</legend>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="NPButton1"
Text="Nested Panel 1 Button"
/>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>UpdatePanelUpdateMode Example</title>
<style type="text/css">
div.NestedPanel
{
position: relative;
margin: 2% 5% 2% 5%;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager"
/>
<asp:UpdatePanel ID="OuterPanel"
UpdateMode="Conditional"
>
<ContentTemplate>
<div>
<fieldset>
<legend>Outer Panel </legend>
<br />
<asp:Button ID="OPButton1"
Text="Outer Panel Button"
/>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<br />
<asp:UpdatePanel ID="NestedPanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<div class="NestedPanel">
<fieldset>
<legend>Nested Panel 1</legend>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="NPButton1"
Text="Nested Panel 1 Button"
/>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
下列範例是一個 GridView 控制項及一個巢狀 UpdatePanel 控制項。GridView 控制項位於 UpdatePanel 控制項內，每一個 GridView 資料列都包含一個巢狀 GridView 控制項，且該巢狀控制項位於另一個 UpdatePanel 控制項內。
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Browse Departments</title>
<script >
Protected Sub DepartmentsGridView_RowDataBound(sender As object, e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim s As SqlDataSource = CType(e.Row.FindControl("EmployeesDataSource"), SqlDataSource)
Dim r As System.Data.DataRowView = CType(e.Row.DataItem, System.Data.DataRowView)
s.SelectParameters("DepartmentID").DefaultValue = r("DepartmentID").ToString()
End If
End Sub
</script>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" />
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="DepartmentsGridView" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" CellPadding="4" DataSourceID="DepartmentDataSource"
ForeColor="#333333" GridLines="None" PageSize="3" OnRowDataBound="DepartmentsGridView_RowDataBound">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:BoundField DataField="GroupName" HeaderText="Division" SortExpression="GroupName" >
<ItemStyle Width="200px" />
</asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Department Name" SortExpression="Name" >
<ItemStyle Width="160px" />
</asp:BoundField>
<asp:TemplateField HeaderText="Employees">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="None"
BorderWidth="1px" CellPadding="3" DataSourceID="EmployeesDataSource" GridLines="Vertical"
PageSize="4">
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" >
<ItemStyle Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" >
<ItemStyle Width="160px" />
</asp:BoundField>
</Columns>
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="Gainsboro" />
</asp:GridView>
<asp:Label ID="InnerTimeLabel"><%=DateTime.Now %></asp:Label>
<asp:SqlDataSource ID="EmployeesDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT HumanResources.EmployeeDepartmentHistory.DepartmentID,
HumanResources.vEmployee.EmployeeID,
HumanResources.vEmployee.FirstName,
HumanResources.vEmployee.LastName
FROM HumanResources.EmployeeDepartmentHistory
INNER JOIN HumanResources.vEmployee
ON HumanResources.EmployeeDepartmentHistory.EmployeeID = HumanResources.vEmployee.EmployeeID
WHERE HumanResources.EmployeeDepartmentHistory.DepartmentID = @DepartmentID
ORDER BY HumanResources.vEmployee.LastName ASC, HumanResources.vEmployee.FirstName ASC">
<SelectParameters>
<asp:Parameter Name="DepartmentID" DefaultValue="0" Type="int32" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<ItemStyle Height="170px" Width="260px" />
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" VerticalAlign="Top" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" VerticalAlign="Top" />
</asp:GridView>
<asp:Label ID="OuterTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="DepartmentDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT DepartmentID, Name, GroupName FROM HumanResources.Department ORDER BY Name">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Browse Departments</title>
<script >
protected void DepartmentsGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
SqlDataSource s = (SqlDataSource)e.Row.FindControl("EmployeesDataSource");
System.Data.DataRowView r = (System.Data.DataRowView)e.Row.DataItem;
s.SelectParameters["DepartmentID"].DefaultValue = r["DepartmentID"].ToString();
}
}
</script>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" />
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="DepartmentsGridView" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" CellPadding="4" DataSourceID="DepartmentDataSource"
ForeColor="#333333" GridLines="None" PageSize="3" OnRowDataBound="DepartmentsGridView_RowDataBound">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:BoundField DataField="GroupName" HeaderText="Division" SortExpression="GroupName" >
<ItemStyle Width="200px" />
</asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Department Name" SortExpression="Name" >
<ItemStyle Width="160px" />
</asp:BoundField>
<asp:TemplateField HeaderText="Employees">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="None"
BorderWidth="1px" CellPadding="3" DataSourceID="EmployeesDataSource" GridLines="Vertical"
PageSize="4">
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" >
<ItemStyle Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" >
<ItemStyle Width="160px" />
</asp:BoundField>
</Columns>
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="Gainsboro" />
</asp:GridView>
<asp:Label ID="InnerTimeLabel"><%=DateTime.Now %></asp:Label>
<asp:SqlDataSource ID="EmployeesDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT HumanResources.EmployeeDepartmentHistory.DepartmentID,
HumanResources.vEmployee.EmployeeID,
HumanResources.vEmployee.FirstName,
HumanResources.vEmployee.LastName
FROM HumanResources.EmployeeDepartmentHistory
INNER JOIN HumanResources.vEmployee
ON HumanResources.EmployeeDepartmentHistory.EmployeeID = HumanResources.vEmployee.EmployeeID
WHERE HumanResources.EmployeeDepartmentHistory.DepartmentID = @DepartmentID
ORDER BY HumanResources.vEmployee.LastName ASC, HumanResources.vEmployee.FirstName ASC">
<SelectParameters>
<asp:Parameter Name="DepartmentID" DefaultValue="0" Type="int32" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<ItemStyle Height="170px" Width="260px" />
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" VerticalAlign="Top" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" VerticalAlign="Top" />
</asp:GridView>
<asp:Label ID="OuterTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="DepartmentDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT DepartmentID, Name, GroupName FROM HumanResources.Department ORDER BY Name">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
內部 GridView 控制項顯示記錄的新頁面時，外部面板及外部 GridView 控制項其他資料列中的面板不會重新整理。當外部 GridView 控制項顯示記錄的新頁面時，外部面板及巢狀面板都會重新整理。
以程式設計的方式重新整理 UpdatePanel
下列範例顯示如何以程式設計方式重新整理 UpdatePanel 控制項。本範例中以呼叫 RegisterAsyncPostBackControl 方法，將控制項註冊為觸發程序。程式碼以呼叫 Update 方法，利用程式設計的方式重新整理 UpdatePanel 控制項。
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
Protected Property AnsweredQuestions As SortedList
Get
If ViewState("AnsweredQuestions") IsNot Nothing Then
Return CType(ViewState("AnsweredQuestions"), SortedList)
Else
Return New SortedList()
End If
End Get
Set
ViewState("AnsweredQuestions") = value
End Set
End Property
Protected Sub Page_Load()
ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList)
End Sub
Protected Sub ChoicesRadioButtonList_SelectedIndexChanged(sender As Object, e As EventArgs)
Dim answers As SortedList = Me.AnsweredQuestions
Dim r As RadioButtonList = CType(sender, RadioButtonList)
answers(r.ToolTip) = r.SelectedValue
Me.AnsweredQuestions = answers
ResultsList.DataSource = Me.AnsweredQuestions
ResultsList.DataBind()
If Me.AnsweredQuestions.Count = SurveyDataList.Items.Count Then _
SubmitButton.Visible = True
UpdatePanel1.Update()
End Sub
Protected Sub SubmitButton_Click(sender As Object, e As EventArgs)
' Submit responses.
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Registering Controls as Async Postback Controls</title>
<style type="text/css">
.AnswerFloatPanelStyle {
background-color: bisque;
position: absolute;
right: 10px;
height: 130px;
width: 150px;
border-right: silver thin solid; border-top: silver thin solid;
border-left: silver thin solid; border-bottom: silver thin solid;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<div id="AnswerFloatPanel" class="AnswerFloatPanelStyle" >
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
Completed Questions:
<asp:DataList ID="ResultsList" >
<ItemTemplate>
<asp:Label ID="ResultQuestion" Text='<%# Eval("Key") %>' />
::
<asp:Label ID="ResultAnswer" Text='<%# Eval("Value") %>' />
</ItemTemplate>
</asp:DataList>
<p style="text-align: right">
<asp:Button ID="SubmitButton" Text="Submit" Visible="false"
OnClick="SubmitButton_Click" />
</p>
<asp:Label ID="Message" runat="Server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:XmlDataSource ID="SurveyDataSource"
XPath="/Questions/Question"
DataFile="~/App_Data/SurveyQuestions.xml"/>
<asp:DataList
ID="SurveyDataList"
DataSourceID="SurveyDataSource"
>
<ItemTemplate>
<table cellpadding="2" cellspacing="2">
<tr>
<td valign="top">
<asp:Label id="QuestionLabel" Text='<%# XPath("@Title")%>' />
</td>
</tr>
<tr><td>
<asp:RadioButtonList ID="ChoicesRadioButtonList"
DataSource='<%#XPathSelect("Choices/Choice") %>'
DataTextField="InnerText" DataValueField="InnerText"
AutoPostBack="True"
ToolTip='<%# "Question" + XPath("@ID") %>'
OnSelectedIndexChanged="ChoicesRadioButtonList_SelectedIndexChanged"/>
</td></tr>
</table>
<hr />
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
protected SortedList AnsweredQuestions
{
get { return (SortedList)(ViewState["AnsweredQuestions"] ?? new SortedList()); }
set { ViewState["AnsweredQuestions"] = value; }
}
protected void Page_Load()
{
ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList);
}
protected void ChoicesRadioButtonList_SelectedIndexChanged(object sender, EventArgs e)
{
SortedList answers = this.AnsweredQuestions;
RadioButtonList r = (RadioButtonList)sender;
answers[r.ToolTip] = r.SelectedValue;
this.AnsweredQuestions = answers;
ResultsList.DataSource = this.AnsweredQuestions;
ResultsList.DataBind();
if (this.AnsweredQuestions.Count == SurveyDataList.Items.Count)
SubmitButton.Visible = true;
UpdatePanel1.Update();
}
protected void SubmitButton_Click(object sender, EventArgs e)
{
// Submit responses.
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Registering Controls as Async Postback Controls</title>
<style type="text/css">
.AnswerFloatPanelStyle {
background-color: bisque;
position: absolute;
right: 10px;
height: 130px;
width: 150px;
border-right: silver thin solid; border-top: silver thin solid;
border-left: silver thin solid; border-bottom: silver thin solid;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<div id="AnswerFloatPanel" class="AnswerFloatPanelStyle" >
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
Completed Questions:
<asp:DataList ID="ResultsList" >
<ItemTemplate>
<asp:Label ID="ResultQuestion" Text='<%# Eval("Key") %>' />
::
<asp:Label ID="ResultAnswer" Text='<%# Eval("Value") %>' />
</ItemTemplate>
</asp:DataList>
<p style="text-align: right">
<asp:Button ID="SubmitButton" Text="Submit" Visible="false"
OnClick="SubmitButton_Click" />
</p>
<asp:Label ID="Message" runat="Server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:XmlDataSource ID="SurveyDataSource"
XPath="/Questions/Question"
DataFile="~/App_Data/SurveyQuestions.xml"/>
<asp:DataList
ID="SurveyDataList"
DataSourceID="SurveyDataSource"
>
<ItemTemplate>
<table cellpadding="2" cellspacing="2">
<tr>
<td valign="top">
<asp:Label id="QuestionLabel" Text='<%# XPath("@Title")%>' />
</td>
</tr>
<tr><td>
<asp:RadioButtonList ID="ChoicesRadioButtonList"
DataSource='<%#XPathSelect("Choices/Choice") %>'
DataTextField="InnerText" DataValueField="InnerText"
AutoPostBack="True"
ToolTip='<%# "Question" + XPath("@ID") %>'
OnSelectedIndexChanged="ChoicesRadioButtonList_SelectedIndexChanged"/>
</td></tr>
</table>
<hr />
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
以程式設計的方式建立 UpdatePanel 控制項
若要以程式設計的方式在頁面上加入 UpdatePanel 控制項，得建立一個新的 UpdatePanel 控制項執行個體。然後用 ContentTemplateContainer 屬性及 ControlCollection.Add 方法，把控制項加入該控制項執行個體。請勿直接將控制項加入至 ContentTemplate 屬性。
UpdatePanel 控制項以程式設計的方式加入時，只有與 UpdatePanel 控制項同名的容器內的控制項發出的傳回，才能做為面板的觸發程序。
下列範例顯示如何以程式設計的方式把 UpdatePanel 控制項加入至網頁。本範例利用 ContentTemplateContainer 屬性，將 Label 及 Button 控制項加入面板。ChildrenAsTriggers 屬性的預設值為 true，因此 Button 控制項會做為面板的觸發程序。
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-'W3C'DTD XHTML 1.0 Transitional'EN"
"http:'www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
Dim up1 As UpdatePanel
up1 = New UpdatePanel()
up1.ID = "UpdatePanel1"
up1.UpdateMode = UpdatePanelUpdateMode.Conditional
Dim button1 As Button
button1 = New Button()
button1.ID = "Button1"
button1.Text = "Submit"
AddHandler button1.Click, AddressOf Button_Click
Dim label1 As Label
label1 = New Label()
label1.ID = "Label1"
label1.Text = "A full page postback occurred."
up1.ContentTemplateContainer.Controls.Add(button1)
up1.ContentTemplateContainer.Controls.Add(label1)
Page.Form.Controls.Add(up1)
End Sub
Protected Sub Button_Click(ByVal Sender As Object, ByVal E As EventArgs)
Dim lbl As Label
lbl = Page.FindControl("Label1")
lbl.Text = "Panel refreshed at " & _
DateTime.Now.ToString()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>UpdatePanel Added Programmatically Example</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="TheScriptManager"
/>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
protected void Page_Load(object sender, EventArgs e)
{
UpdatePanel up1 = new UpdatePanel();
up1.ID = "UpdatePanel1";
up1.UpdateMode = UpdatePanelUpdateMode.Conditional;
Button button1 = new Button();
button1.ID = "Button1";
button1.Text = "Submit";
button1.Click += new EventHandler(Button_Click);
Label label1 = new Label();
label1.ID = "Label1";
label1.Text = "A full page postback occurred.";
up1.ContentTemplateContainer.Controls.Add(button1);
up1.ContentTemplateContainer.Controls.Add(label1);
Page.Form.Controls.Add(up1);
}
protected void Button_Click(object sender, EventArgs e)
{
((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " +
DateTime.Now.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>UpdatePanel Added Programmatically Example</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="TheScriptManager"
/>
</div>
</form>
</body>
</html>
與 UpdatePanel 控制項不相容的控制項
下列 ASP.NET 控制項與網頁局部更新不相容，因此無法在 UpdatePanel 控制項內運作：
TreeView 控制項在幾種情況之下。啟用的回呼 (Callback) 不是非同步回傳的一部分時。您直接把樣式設定為控制項屬性，而不是使用 CSS 樣式參考來隱含設定控制項樣式時。EnableClientScript 屬性設定為 false 時 (預設值為 true)。您在非同步回傳之間變更 EnableClientScript 屬性的值時。如需詳細資訊，請參閱 TreeView Web 伺服器控制項概觀。
Menu 控制項的樣式直接設定為控制項屬性，而不是使用 CSS 樣式參考來隱含設定控制項樣式時。如需詳細資訊，請參閱功能表控制項概觀。
FileUpload 及 HtmlInputFile 控制項用來上載檔案，當成非同步回傳的一部分時。
GridView 及 DetailsView 控制項的 EnableSortingAndPagingCallbacks 屬性設定為 true 時。預設值為 false。
Login、PasswordRecovery、ChangePassword 及 CreateUserWizard 控制項的內容尚未轉換成可編輯的範本時。
Substitution 控制項
如果想在 UpdatePanel 控制項內使用 FileUpload 或 HtmlInputFile 控制項，請將送出檔案的回傳控制項設定為面板的 PostBackTrigger 控制項。FileUpload 及 HtmlInputFile 控制項只能用於回傳案例。
所有其他的控制項都可在 UpdatePanel 控制項內部運作。不過，在某些情況下，控制項可能還是無法如預期在 UpdatePanel 控制項內運作。這些情況包括以下兩點：
呼叫 ClientScriptManager 控制項的註冊方法來註冊指令碼。
控制項呈現時直接呈現了指令碼或標記 (例如呼叫 Write 方法)。
如果控制項呼叫 ClientScriptManager 控制項的指令碼註冊方法，也許可以改用 ScriptManager 控制項中對應的指令碼註冊方法。如此，控制項即可在 UpdatePanel 控制項內運作。
在 UpdatePanel 控制項內使用 Web 組件控制項
ASP.NET Web 組件是用於建立網站的整合式控制項集合，可讓使用者直接從瀏覽器修改 Web 網頁的內容、外觀和行為。遵循下列限制，即可在 UpdatePanel 控制項內使用 Web 組件控制項：
所有 WebPartZone 控制項都必須位於同一個 UpdatePanel 控制項內。例如，同一個頁面上的兩個 UpdatePanel 控制項不能有各自的 WebPartZone 控制項。
WebPartManager 控制項會管理 Web 組件控制項的所有用戶端狀態資訊。它必須位於網頁上最外層的 UpdatePanel 控制項內。
不能用非同步回傳來匯入或匯出 Web 組件控制項。(需有 FileUpload 控制項才能執行匯入/匯出，但此控制項無法進行非同步回傳)。根據預設，匯入 Web 組件控制項時必須執行完整回傳。
不能在非同步回傳期間加入或修改 Web 組件控制項的樣式。
如需 Web 組件控制項的詳細資訊，請參閱 ASP.NET Web 組件概觀。
非同步回傳期間不支援使用屬性與方法
在非同步回傳期間，不支援下列在頁面中設定預設回傳按鈕的案例：
在非同步回傳期間，以程式設計方式變更 DefaultButton。
在非同步回傳期間，以程式設計方式變更 DefaultButton (當 Panel 控制項不是位於 UpdatePanel 控制項時)。
只有在回傳案例中才支援 HttpResponse 類別的下列方法 (在非同步回傳案例中不支援)：
程式碼範例
下列章節裡的範例說明如何建立及使用 UpdatePanel 控制項。
HOW TO 和逐步解說主題
類別參考
下表顯示 UpdatePanel 控制項的重要伺服器類別。
類別 |
說明 |
|---|---|
伺服器控制項，指定 Web 網頁的哪些部分可以進行網頁局部更新。 |
|
伺服器控制項，管理網頁局部呈現。ScriptManager 控制項負責註冊要傳送給瀏覽器的指令碼元件。它也會覆寫頁面呈現，只呈現網頁的指定區域。 |
|
伺服器控制項，使巢狀元件 (例如內容頁面或使用者控制項) 可以加入指令碼及 Web 服務參考。父項目內如果已經有 ScriptManager 控制項，則此控制項會很有用。 |
|
Microsoft AJAX Library 內的類別，負責協調瀏覽器中的網頁局部呈現。PageRequestManager 類別會跟伺服器非同步交換資訊，並為自訂用戶端指令碼開發公開事件與方法。 |
其他主題
請參閱
工作
使用多個 UpdatePanel 控制項建立簡單的 ASP.NET 頁面