網頁局部呈現概觀
更新：2007 年 11 月
利用網頁局部呈現功能，就不必在回傳時重新整理整個網頁。相反地，只會更新已變更的個別網頁區域。因此，每次回傳時使用者不會看到整個網頁重新載入，這樣可讓使用者與 Web 網頁的互動更順暢。ASP.NET 可讓您加入網頁局部呈現到新的或現有的 ASP.NET Web 網頁，而不需要撰寫用戶端指令碼。
此主題包括下列章節：
案例
功能
背景
程式碼範例
類別參考
案例
您可以擴充現有的 ASP.NET 應用程式和開發新的應用程式，以整合 AJAX (非同步 JavaScript 與 XML) 功能。當您想要執行下列動作時，可以使用 AJAX 功能：
改善使用者的 Web 網頁存取經驗，使其更豐富、更快回應使用者的動作，用起來更像傳統的用戶端應用程式。
減少重新整理整個網頁的次數，並避免網頁閃動。
啟用跨瀏覽器相容性，而不需要撰寫用戶端指令碼。
執行 AJAX 樣式的用戶端/伺服器通訊，而不需要撰寫用戶端指令碼。
使用來自 ASP.NET AJAX Control Toolkit 的控制項與元件。
開發自訂 ASP.NET AJAX 控制項。
網頁局部呈現功能
網頁局部呈現依賴 ASP.NET 中的伺服器控制項與 Microsoft AJAX Library 中的用戶端功能。您不需要使用 Microsoft AJAX Library 來啟用網頁局部呈現，因為當您使用 ASP.NET AJAX 伺服器控制項時，便會自動提供此功能。不過，您可以使用用戶端程式庫中公開 (Expose) 的 API 以使用額外的 AJAX 功能。
支援網頁局部呈現的 ASP.NET 主要功能包括：
運作方式類似 ASP.NET 伺服器控制項的宣告式模型。在許多案例中，您可以只使用宣告式標記來指定網頁局部呈現。
執行網頁局部更新所需之基礎工作的伺服器控制項。這些控制項包括 ScriptManager 控制項與 UpdatePanel 控制項。
整合 ASP.NET AJAX 伺服器控制項與 Microsoft AJAX Library，以執行常見工作。這些工作包括讓使用者可以取消回傳、在非同步回傳期間顯示自訂進度訊息，以及決定如何處理並行非同步回傳。
網頁局部呈現的錯誤處理選項，可讓您自訂在瀏覽器中顯示錯誤的方法。
跨瀏覽器的相容性，建置在 ASP.NET 的 AJAX 功能之中。只要使用伺服器控制項就能自動叫用 (Invoke) 正確的瀏覽器功能。
背景
使用 ASP.NET Web 伺服器控制項建置的一般 Web 網頁，就可以執行網頁上使用者動作所起始的回傳，例如按一下按鈕。在回應中，伺服器會呈現新網頁。通常這樣會重新呈現回傳之間未變更的控制項與文字。
使用網頁局部更新時，您可以使用非同步方式重新整理網頁的個別區域，並使網頁更能有效回應使用者的動作。您可以使用 ASP.NET AJAX Web 伺服器控制項來實作網頁局部呈現，並選擇性地撰寫在 Microsoft AJAX Library 中使用之 API 的用戶端指令碼。
網頁局部更新的伺服器控制項
若要將 AJAX 功能加入至 ASP.NET Web 網頁，您必須識別要更新的個別網頁區段。接著，您必須將這些區段的內容放入 UpdatePanel 控制項中。UpdatePanel 控制項的內容可以是 HTML 或其他 ASP.NET 控制項。您可以加入 UpdatePanel 控制項至網頁，就像您加入其他控制項一樣。例如，在 Visual Studio 中，您可以將它從工具箱拖曳到 Web 網頁，或在網頁中使用宣告式標記加入該控制項。下列範例示範 UpdatePanel 控制項的標記。
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<!-- Place updatable markup and controls here. -->
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<!-- Place updatable markup and controls here. -->
</ContentTemplate>
</asp:UpdatePanel>
根據預設，來自更新面板內部之控制項 (子控制項) 的回傳，會自動啟始非同步回傳並導致發生網頁局部更新。您也可以指定讓位於更新面板外部的控制項導致非同步回傳，並讓它們重新整理 UpdatePanel 控制項的內容。導致發生非同步回傳的控制項稱為「觸發程序 (Trigger)」如需觸發程序的詳細資訊，請參閱使用多個 UpdatePanel 控制項建立簡單的 ASP.NET 頁面。
非同步回傳的運作方式十分類似同步回傳。會發生所有伺服器網頁生命週期事件，而檢視狀態與表單資料則會被保留。不過，在呈現階段中，只會傳送 UpdatePanel 控制項的內容至瀏覽器。網頁的其餘部分會保持不變。
若要支援網頁局部呈現，您必須在網頁上放置 ScriptManager 控制項。ScriptManager 控制項會追蹤網頁上的所有更新面板與其觸發程序。它會協調伺服器上的網頁局部呈現行為，並決定要呈現網頁上的哪個區段做為非同步回傳的結果。
下列範例顯示 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 >
<title>Partial-Page Rendering Server-Side Syntax</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<fieldset>
<legend>UpdatePanel</legend>
Content to update incrementally without a full
page refresh.
<br />
Last update: <%=DateTime.Now.ToString() %>
<br />
<asp:Calendar ID="Calendar" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>
</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 >
<title>Partial-Page Rendering Server-Side Syntax</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<fieldset>
<legend>UpdatePanel</legend>
Content to update incrementally without a full
page refresh.
<br />
Last update: <%=DateTime.Now.ToString() %>
<br />
<asp:Calendar ID="Calendar" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>
</div>
</form>
</body>
</html>
如需更多關於如何使用 UpdatePanel 控制項來啟用網頁局部呈現的範例，請參閱程式碼範例一節中所列的主題。
使用用戶端指令碼進行網頁局部更新
Microsoft AJAX Library 中的 ECMAScript (JavaScript) PageRequestManager 類別支援網頁局部更新。它會在瀏覽器中執行以管理非同步回傳的回應，並更新個別區域的內容。您不需要做任何動作來啟用此功能。當您加入一個或多個 UpdatePanel 控制項與 ScriptManager 控制項到網頁時，就會自動發生。
您也可以使用 JavaScript 與 PageRequestManager 類別來自訂網頁上的網頁局部更新。例如，您可以撰寫指令碼來指定特定非同步回傳的優先順序 (若同時執行多個回傳時)。您也可以讓使用者取消執行中的回傳。
下列範例顯示提供事件處理常式的用戶端指令碼，網頁完成載入時會呼叫此事件處理常式。
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>
如需有關如何使用 Microsoft AJAX Library 來進行網頁局部呈現的詳細資訊，請參閱使用 PageRequestManager 事件與 ASP.NET PageRequestManager 類別概觀。
啟用網頁局部呈現支援
您可以設定 ScriptManager 控制項的 EnablePartialRendering 屬性，以啟用或停用網頁的網頁局部呈現。您也可以設定 ScriptManager 控制項的 SupportsPartialRendering 屬性，以指定是否支援網頁的網頁局部呈現。若未設定 SupportsPartialRendering 屬性，且 EnablePartialRendering 屬性是 true (預設值)，則會使用瀏覽器的能力來判斷是否支援網頁局部呈現。
若未針對網頁啟用網頁局部呈現、該功能已停用或瀏覽器不支援該功能，則網頁會使用後援行為。原本會執行非同步回傳的動作，現在則改為執行同步回傳並更新整個網頁。網頁上的任何 UpdatePanel 控制項都會忽略，而且會呈現其內容，如同它們並非位於 UpdatePanel 控制項內部一樣。
.gif "注意事項") 注意事項： |
|---|
已設定為使用舊版呈現方式的 ASP.NET Web 網頁不支援 AJAX 功能。如需詳細資訊，請參閱ASP.NET 和 XHTML。 |
程式碼範例
下列範例顯示作用中的網頁局部呈現。有兩個 UpdatePanel 控制項。一個控制項會取得使用者輸入，而另一個控制項會顯示該輸入的摘要。
<%@ Page Language="VB" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!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 id="Head1" >
<title>Enter New Employees</title>
<script >
Private EmployeeList As List(Of Employee)
Protected Sub Page_Load()
If Not IsPostBack Then
EmployeeList = New List(Of Employee)
EmployeeList.Add(New Employee(1, "Jump", "Dan"))
EmployeeList.Add(New Employee(2, "Kirwan", "Yvette"))
ViewState("EmployeeList") = EmployeeList
Else
EmployeeList = CType(ViewState("EmployeeList"), List(Of Employee))
End If
EmployeesGridView.DataSource = EmployeeList
EmployeesGridView.DataBind()
End Sub
Protected Sub InsertButton_Click(ByVal sender As Object, ByVal e As EventArgs)
If String.IsNullOrEmpty(FirstNameTextBox.Text) Or _
String.IsNullOrEmpty(LastNameTextBox.Text) Then Return
Dim employeeID As Integer = EmployeeList(EmployeeList.Count - 1).EmployeeID + 1
Dim lastName As String = Server.HtmlEncode(FirstNameTextBox.Text)
Dim firstName As String = Server.HtmlEncode(LastNameTextBox.Text)
FirstNameTextBox.Text = String.Empty
LastNameTextBox.Text = String.Empty
EmployeeList.Add(New Employee(employeeID, lastName, firstName))
ViewState("EmployeeList") = EmployeeList
EmployeesGridView.DataBind()
EmployeesGridView.PageIndex = EmployeesGridView.PageCount
End Sub
Protected Sub CancelButton_Click(ByVal sender As Object, ByVal e As EventArgs)
FirstNameTextBox.Text = String.Empty
LastNameTextBox.Text = String.Empty
End Sub
<Serializable()> _
Public Class Employee
Private _employeeID As Integer
Private _lastName As String
Private _firstName As String
Public ReadOnly Property EmployeeID() As Integer
Get
Return _employeeID
End Get
End Property
Public ReadOnly Property LastName() As String
Get
Return _lastName
End Get
End Property
Public ReadOnly Property FirstName() As String
Get
Return _firstName
End Get
End Property
Public Sub New(ByVal employeeID As Integer, ByVal lastName As String, ByVal firstName As String)
_employeeID = employeeID
_lastName = lastName
_firstName = firstName
End Sub
End Class
</script>
</head>
<body>
<form id="form1" >
<div>
</div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" />
<table>
<tr>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="InsertEmployeeUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<table cellpadding="2" border="0" style="background-color:#7C6F57">
<tr>
<td><asp:Label ID="FirstNameLabel" AssociatedControlID="FirstNameTextBox"
Text="First Name" ForeColor="White" /></td>
<td><asp:TextBox ID="FirstNameTextBox" /></td>
</tr>
<tr>
<td><asp:Label ID="LastNameLabel" AssociatedControlID="LastNameTextBox"
Text="Last Name" ForeColor="White" /></td>
<td><asp:TextBox ID="LastNameTextBox" /></td>
</tr>
<tr>
<td></td>
<td>
<asp:LinkButton ID="InsertButton" Text="Insert" OnClick="InsertButton_Click" ForeColor="White" />
<asp:LinkButton ID="Cancelbutton" Text="Cancel" OnClick="CancelButton_Click" ForeColor="White" />
</td>
</tr>
</table>
<asp:Label ID="InputTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="EmployeesUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" BackColor="LightGoldenrodYellow" BorderColor="Tan"
BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False">
<FooterStyle BackColor="Tan" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" />
</Columns>
<PagerSettings PageButtonCount="5" />
</asp:GridView>
<asp:Label ID="ListTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="InsertButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!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>Enter New Employees</title>
<script >
private List<Employee> EmployeeList;
protected void Page_Load()
{
if (!IsPostBack)
{
EmployeeList = new List<Employee>();
EmployeeList.Add(new Employee(1, "Jump", "Dan"));
EmployeeList.Add(new Employee(2, "Kirwan", "Yvette"));
ViewState["EmployeeList"] = EmployeeList;
}
else
EmployeeList = (List<Employee>)ViewState["EmployeeList"];
EmployeesGridView.DataSource = EmployeeList;
EmployeesGridView.DataBind();
}
protected void InsertButton_Click(object sender, EventArgs e)
{
if (String.IsNullOrEmpty(FirstNameTextBox.Text) ||
String.IsNullOrEmpty(LastNameTextBox.Text)) { return; }
int employeeID = EmployeeList[EmployeeList.Count-1].EmployeeID + 1;
string lastName = Server.HtmlEncode(FirstNameTextBox.Text);
string firstName = Server.HtmlEncode(LastNameTextBox.Text);
FirstNameTextBox.Text = String.Empty;
LastNameTextBox.Text = String.Empty;
EmployeeList.Add(new Employee(employeeID, lastName, firstName));
ViewState["EmployeeList"] = EmployeeList;
EmployeesGridView.DataBind();
EmployeesGridView.PageIndex = EmployeesGridView.PageCount;
}
protected void CancelButton_Click(object sender, EventArgs e)
{
FirstNameTextBox.Text = String.Empty;
LastNameTextBox.Text = String.Empty;
}
[Serializable]
public class Employee
{
private int _employeeID;
private string _lastName;
private string _firstName;
public int EmployeeID
{
get { return _employeeID; }
}
public string LastName
{
get { return _lastName; }
}
public string FirstName
{
get { return _firstName; }
}
public Employee(int employeeID, string lastName, string firstName)
{
_employeeID = employeeID;
_lastName = lastName;
_firstName = firstName;
}
}
</script>
</head>
<body>
<form id="form1" >
<div>
</div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" />
<table>
<tr>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="InsertEmployeeUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<table cellpadding="2" border="0" style="background-color:#7C6F57">
<tr>
<td><asp:Label ID="FirstNameLabel" AssociatedControlID="FirstNameTextBox"
Text="First Name" ForeColor="White" /></td>
<td><asp:TextBox ID="FirstNameTextBox" /></td>
</tr>
<tr>
<td><asp:Label ID="LastNameLabel" AssociatedControlID="LastNameTextBox"
Text="Last Name" ForeColor="White" /></td>
<td><asp:TextBox ID="LastNameTextBox" /></td>
</tr>
<tr>
<td></td>
<td>
<asp:LinkButton ID="InsertButton" Text="Insert" OnClick="InsertButton_Click" ForeColor="White" />
<asp:LinkButton ID="Cancelbutton" Text="Cancel" OnClick="CancelButton_Click" ForeColor="White" />
</td>
</tr>
</table>
<asp:Label ID="InputTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="EmployeesUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" BackColor="LightGoldenrodYellow" BorderColor="Tan"
BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False">
<FooterStyle BackColor="Tan" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" />
</Columns>
<PagerSettings PageButtonCount="5" />
</asp:GridView>
<asp:Label ID="ListTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="InsertButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</form>
</body>
</html>
HOW TO 和逐步解說主題
類別參考
下表列出網頁局部呈現的主要伺服器類別。
Class |
描述 |
|---|---|
指定網頁局部呈現期間要更新的網頁區域。 |
|
管理 ASP.NET 中的 AJAX 元件、網頁局部呈現、用戶端要求，以及 ASP.NET Web 網頁上的伺服器回應。 |
|
讓巢狀元件可將指令碼與服務參考加入至網頁，網頁已在父項目中包含 ScriptManager 控制項。 |
下表列出網頁局部呈現的主要用戶端類別。
Class |
描述 |
|---|---|
管理用戶端網頁局部呈現並公開自訂用戶端指令碼的成員。 |