搭配資料繫結控制項使用 ASP.NET UpdatePanel 控制項
更新：2007 年 11 月
透過網頁局部更新功能，可以為具備 AJAX 能力的 ASP.NET 應用程式創造更豐富的使用者經驗。利用網頁局部呈現功能，在回傳時，就不必重新整理整個網頁。只要重新整理頁面上您指定的區域即可。使用者就不必在每次回傳時，都要等候整個網頁重新載入。
本主題假設您已經相當熟悉 UpdatePanel 控制項的用法。如果不熟悉該控制項，請複習下列主題：
您可以用 UpdatePanel 及 ScriptManager Web 伺服器控制項來啟用網頁局部呈現功能。UpdatePanel 控制項會識別網頁上可以更新的區域。ScriptManager 控制項會追蹤網頁上的 UpdatePanel 控制項以及會觸發 UpdatePanel 控制項重新整理的控制項。UpdatePanel 控制項 (造成回傳) 中的控制項會自動識別為更新面板的觸發程序。您也可以把 UpdatePanel 控制項外部的控制項指定成觸發程序。外部觸發程序可以是其他 UpdatePanel 控制項的子控制項。如需詳細資訊，請參閱 網頁局部呈現概觀 和 UpdatePanel 控制項概觀。
本主題包含下列章節：
在一個網頁上使用多個 UpdatePanel 控制項
停用自動觸發程序
以程式設計方式來管理觸發程序並重新整理 UpdatePanel
於自訂控制項中啟用網頁局部呈現功能
在一個網頁上使用多個 UpdatePanel 控制項
一個網頁上可以有無限多個 UpdatePanel 控制項。因此在整個網頁上，您可以個別指定每一個要重新整理的區域。
根據預設，UpdatePanel 控制項的 UpdateMode 屬性設定為 Always。意即，每次觸發網頁局部重新整理時，UpdatePanel 控制項就會重新整理網頁，即使此觸發程序不是針對該 UpdatePanel 控制項。如果希望只有在觸發 UpdatePanel 時才會重新整理該控制項，請將 UpdatePanel 控制項的 UpdateMode 屬性設定成 Conditional。
下列範例包含兩個 UpdatePanel 控制項。一個包括可接受使用者輸入之 Web 控制項的控制項，另一個控制項則顯示使用者輸入的內容。每個 UpdatePanel 控制項的 UpdateMode 屬性都設成 Conditional。 如此一來，當使用者按下 [取消] 按鈕來清除輸入表單上的欄位時，就只會重新整理 UpdatePanel 控制項的輸入表格。而當使用者按下 [插入] 按鈕來送出表格時，兩個 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>
您也可以在其他 UpdatePanel 控制項內部加入巢狀 UpdatePanel 控制項。將外部及內部巢狀控制項的 UpdateMode 屬性都設成 Conditional，則如果僅觸發內部面板，外部面板就不會重新整理。但如果觸發程序要重新整理外部面板，外部及內部面板都會重新整理。
下列範例在 UpdatePanel 控制項內部加入一個 GridView 控制項。GridView 控制項的每一個資料列都內含一個巢狀 GridView 控制項，位於子 UpdatePanel 控制項內。從內部 GridView 控制項要求新的記錄頁面時，外部面板的頁面區域及外部 GridView 控制項其他資料列中的面板都不會重新整理。當外部 GridView 控制項顯示新的記錄頁面時，外部面板及巢狀面板的頁面區域都會重新整理。
<%@ 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>
停用自動觸發程序
位於 UpdatePanel 控制項內部、會引起回傳的控制項會自動被設定成該 UpdatePanel 控制項的觸發程序。如果您想停用自動觸發程序，而只想從外部控制項來觸發 UpdatePanel 控制項重新整理，請將 UpdatePanel 控制項的 ChildrenAsTriggers 屬性設定為 false。然後將 UpdatePanel 控制項的 UpdateMode 屬性設定為 Conditional。如此一來，就只有在觸發外部控制項時，或呼叫 Update 方法時，面板才會重新整理。
下列範例顯示 AdventureWorks 範例資料庫中產品的分類、子分類及名稱。分類清單幾乎不會改變，因此每次顯示子分類或產品時，不必重新整理分類清單。所以，在包含分類清單的 UpdatePanel 控制項中，將 ChildrenAsTriggers 屬性設定成 false 及將 UpdateMode 屬性設定成 Conditional。如此，就只有明確要求時，UpdatePanel 控制項才會重新整理。
<%@ Page Language="VB" AutoEventWireup="true" %>
<!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>UpdatePanel Example</title>
<script >
Protected Sub ProductsUpdatePanel_Load(sender As Object, e As EventArgs)
CategoryTimeLabel.Text = DateTime.Now.ToString()
End Sub
Protected Sub CategoriesRepeater_ItemCommand(sender As Object, e As RepeaterCommandEventArgs)
SubcategoriesDataSource.SelectParameters("CategoryID").DefaultValue = e.CommandArgument.ToString()
SubcategoriesRepeater.DataBind()
ProductsDataSource.SelectParameters("SubcategoryID").DefaultValue = "0"
ProductsGridView.DataBind()
End Sub
Protected Sub SubcategoriesRepeater_ItemCommand(sender As Object, e As RepeaterCommandEventArgs)
ProductsDataSource.SelectParameters("SubcategoryID").DefaultValue = e.CommandArgument.ToString()
ProductsGridView.DataBind()
End Sub
Protected Sub RefreshCategoriesButton_Click(sender As Object, e As EventArgs)
SubcategoriesDataSource.SelectParameters("CategoryID").DefaultValue = "0"
SubcategoriesRepeater.DataBind()
ProductsDataSource.SelectParameters("SubcategoryID").DefaultValue = "0"
ProductsGridView.DataBind()
End Sub
</script>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" >
</asp:ScriptManager>
<table>
<tr>
<td valign="top" style="width:120px">
<asp:UpdatePanel ID="ProductsUpdatePanel"
ChildrenAsTriggers="False"
OnLoad="ProductsUpdatePanel_Load" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="CategoryRepeater" DataSourceID="CategoriesDataSource"
OnItemCommand="CategoriesRepeater_ItemCommand">
<ItemTemplate>
<asp:LinkButton ID="SelectCategoryButton"
Text='<%# Eval("Name") %>'
CommandName="SelectCategory"
CommandArgument='<%#Eval("ProductCategoryID") %>' /><br />
</ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="CategoriesDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT Name, ProductCategoryID FROM Production.ProductCategory ORDER BY ProductCategoryID">
</asp:SqlDataSource>
<br />
<asp:Label ID="CategoryTimeLabel" Text="Label" Font-Size="Smaller"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RefreshCategoriesButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:LinkButton runat="Server" ID="RefreshCategoriesButton" Text="Refresh Category List"
OnClick="RefreshCategoriesButton_Click" Font-Size="smaller" />
</td>
<td valign="top">
<asp:UpdatePanel ID="SubcategoriesUpdatePanel" >
<ContentTemplate>
<asp:Repeater ID="SubcategoriesRepeater" DataSourceID="SubcategoriesDataSource"
OnItemCommand="SubcategoriesRepeater_ItemCommand" >
<ItemTemplate>
<asp:LinkButton ID="SelectSubcategoryButton"
Text='<%# Eval("Name") %>'
CommandName="SelectSubcategory"
CommandArgument='<%#Eval("ProductSubcategoryID") %>' /><br />
</ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SubcategoriesDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT Name, ProductSubcategoryID FROM Production.ProductSubcategory
WHERE Production.ProductSubcategory.ProductCategoryID = @CategoryID
ORDER BY Name">
<SelectParameters>
<asp:Parameter Name="CategoryID" DefaultValue="0" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td valign="top">
<asp:UpdatePanel ID="ProductUpdatePanel" >
<ContentTemplate>
<asp:GridView ID="ProductsGridView" AllowPaging="True" AutoGenerateColumns="False" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataKeyNames="ProductID" DataSourceID="ProductsDataSource" GridLines="Horizontal">
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" >
<ItemStyle Width="240px" />
</asp:BoundField>
</Columns>
<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
<AlternatingRowStyle BackColor="#F7F7F7" />
</asp:GridView>
<asp:SqlDataSource ID="ProductsDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT ProductID, Name, ProductSubcategoryID FROM Production.Product WHERE (ProductSubcategoryID = @SubcategoryID) ORDER BY Name">
<SelectParameters>
<asp:Parameter DefaultValue="0" Name="SubcategoryID" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" %>
<!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>UpdatePanel Example</title>
<script >
protected void ProductsUpdatePanel_Load(object sender, EventArgs e)
{
CategoryTimeLabel.Text = DateTime.Now.ToString();
}
protected void CategoriesRepeater_ItemCommand(object sender, RepeaterCommandEventArgs e)
{
SubcategoriesDataSource.SelectParameters["CategoryID"].DefaultValue = e.CommandArgument.ToString();
SubcategoriesRepeater.DataBind();
ProductsDataSource.SelectParameters["SubcategoryID"].DefaultValue = "0";
ProductsGridView.DataBind();
}
protected void SubcategoriesRepeater_ItemCommand(object sender, RepeaterCommandEventArgs e)
{
ProductsDataSource.SelectParameters["SubcategoryID"].DefaultValue = e.CommandArgument.ToString();
ProductsGridView.DataBind();
}
protected void RefreshCategoriesButton_Click(object sender, EventArgs e)
{
SubcategoriesDataSource.SelectParameters["CategoryID"].DefaultValue = "0";
SubcategoriesRepeater.DataBind();
ProductsDataSource.SelectParameters["SubcategoryID"].DefaultValue = "0";
ProductsGridView.DataBind();
}
</script>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" >
</asp:ScriptManager>
<table>
<tr>
<td valign="top" style="width:120px">
<asp:UpdatePanel ID="ProductsUpdatePanel"
ChildrenAsTriggers="False"
OnLoad="ProductsUpdatePanel_Load" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="CategoryRepeater" DataSourceID="CategoriesDataSource"
OnItemCommand="CategoriesRepeater_ItemCommand">
<ItemTemplate>
<asp:LinkButton ID="SelectCategoryButton"
Text='<%# Eval("Name") %>'
CommandName="SelectCategory"
CommandArgument='<%#Eval("ProductCategoryID") %>' /><br />
</ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="CategoriesDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT Name, ProductCategoryID FROM Production.ProductCategory ORDER BY ProductCategoryID">
</asp:SqlDataSource>
<br />
<asp:Label ID="CategoryTimeLabel" Text="Label" Font-Size="Smaller"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RefreshCategoriesButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:LinkButton runat="Server" ID="RefreshCategoriesButton" Text="Refresh Category List"
OnClick="RefreshCategoriesButton_Click" Font-Size="smaller" />
</td>
<td valign="top">
<asp:UpdatePanel ID="SubcategoriesUpdatePanel" >
<ContentTemplate>
<asp:Repeater ID="SubcategoriesRepeater" DataSourceID="SubcategoriesDataSource"
OnItemCommand="SubcategoriesRepeater_ItemCommand" >
<ItemTemplate>
<asp:LinkButton ID="SelectSubcategoryButton"
Text='<%# Eval("Name") %>'
CommandName="SelectSubcategory"
CommandArgument='<%#Eval("ProductSubcategoryID") %>' /><br />
</ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SubcategoriesDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT Name, ProductSubcategoryID FROM Production.ProductSubcategory
WHERE Production.ProductSubcategory.ProductCategoryID = @CategoryID
ORDER BY Name">
<SelectParameters>
<asp:Parameter Name="CategoryID" DefaultValue="0" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td valign="top">
<asp:UpdatePanel ID="ProductUpdatePanel" >
<ContentTemplate>
<asp:GridView ID="ProductsGridView" AllowPaging="True" AutoGenerateColumns="False" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataKeyNames="ProductID" DataSourceID="ProductsDataSource" GridLines="Horizontal">
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" >
<ItemStyle Width="240px" />
</asp:BoundField>
</Columns>
<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
<AlternatingRowStyle BackColor="#F7F7F7" />
</asp:GridView>
<asp:SqlDataSource ID="ProductsDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT ProductID, Name, ProductSubcategoryID FROM Production.Product WHERE (ProductSubcategoryID = @SubcategoryID) ORDER BY Name">
<SelectParameters>
<asp:Parameter DefaultValue="0" Name="SubcategoryID" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
以程式設計方式來管理觸發程序並重新整理 UpdatePanel
會觸發 UpdatePanel 控制項重新整理的控制項，必須註冊到網頁上的 ScriptManager 控制項。UpdatePanel 控制項裡的子控制項會自動註冊。您可以用 UpdatePanel 控制項的 Triggers 集合，以宣告方式來指定觸發程序。此外，您也可以用程式設計的方式來識別觸發程序，並用伺服端程式碼來引發 UpdatePanel 控制項重新整理。
設計時如果還沒有可用的觸發程序控制項，則可以用 ScriptManager 控制項的 RegisterAsyncPostBackControl 方法，把控制項註冊成觸發程序。透過程式設計方式識別為觸發程序的控制項，必須在每次回傳時註冊成觸發程序。建議您讓您的網頁在 Page_Load 事件時呼叫 RegisterAsyncPostBackControl 方法，如下所示：
Protected Sub Page_Load()
ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList)
End Sub
protected void Page_Load()
{
ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList);
}
若要以程式設計方式來重新整理 UpdatePanel 控制項，您可以呼叫 UpdatePanel 控制項的 Update 方法。如果您必須在 UpdatePanel 控制項重新整理之前，執行一些處理程序，則此做法會很有用。下列範例顯示如何以程式設計的方式來重新整理 UpdatePanel。
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 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();
}
下列範例中的頁面即利用 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。但這些控制項的所屬網頁上，有些必要的 ScriptManager 控制項的 EnablePartialRendering 屬性不能設為 true。因此，如果是自訂控制項，您可以呼叫 ScriptManager 控制項的靜態 GetCurrent 方法，來判斷是否啟用網頁局部呈現功能。網頁上如果沒有 ScriptManager 控制項，GetCurrent 方法會傳回 null。否則，如果 EnablePartialRendering 屬性傳回的是 true，則您可以勾選 ScriptManager 控制項的 EnablePartialRendering 屬性的值，並加入一個 UpdatePanel 控制項。
下列範例是一個自訂控制項的 CreateChildControls 方法，該控制項繼承自 CompositeControl 類別。此網頁如有啟用網頁局部呈現功能，則自訂控制項會把內容放進一個 UpdatePanel 控制項中。
Protected Overrides Sub CreateChildControls()
MyBase.CreateChildControls()
Dim parent As Control
Dim container As Control
' Get a reference to the ScriptManager object for the page
' if one exists.
Dim sm As ScriptManager = ScriptManager.GetCurrent(Page)
If sm Is Nothing OrElse Not sm.EnablePartialRendering Then
' If partial rendering is not enabled, set the parent
' and container as a basic control.
container = New Control()
parent = container
Else
' If partial rendering is enabled, set the parent as
' a new UpdatePanel object and the container to the
' content template of the UpdatePanel object.
Dim up As UpdatePanel = New UpdatePanel()
container = up.ContentTemplateContainer
parent = up
End If
AddDataboundControls(container)
Controls.Add(parent)
End Sub
protected override void CreateChildControls() {
base.CreateChildControls();
Control parent;
Control container;
// Get a reference to the ScriptManager object for the page
// if one exists.
ScriptManager sm = ScriptManager.GetCurrent(Page);
if (sm == null || !sm.EnablePartialRendering)
{
// If partial rendering is not enabled, set the parent
// and container as a basic control.
container = new Control();
parent = container;
}
else
{
// If partial rendering is enabled, set the parent as
// a new UpdatePanel object and the container to the
// content template of the UpdatePanel object.
UpdatePanel up = new UpdatePanel();
container = up.ContentTemplateContainer;
parent = up;
}
AddDataboundControls(container);
Controls.Add(parent);
}
下列範例中的自訂控制項會在網頁局部呈現功能啟用時，包含一個 UpdatePanel 控制項。
<%@ Page Language="VB" AutoEventWireup="true" %>
<%@ Register Namespace="UpdatePanelTutorialCustom.VB" TagPrefix="sample" %>
<!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>Browse Products</title>
<script >
Protected Sub ProductsView1_RowCommand(ByVal sender As Object, ByVal e As EventArgs)
ShoppingCartList.DataSource = ProductsView1.Cart
ShoppingCartList.DataBind()
End Sub
</script>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="false" />
<h2>Browse Products</h2>
<sample:ProductsView ID="ProductsView1" PageSize="5" OnRowCommand="ProductsView1_RowCommand" />
<asp:UpdatePanel ID="CartUpdatePanel">
<ContentTemplate>
<h3>Selected Items</h3>
<asp:BulletedList BulletStyle="numbered" ID="ShoppingCartList" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Namespace="UpdatePanelTutorialCustom.CS" TagPrefix="sample" %>
<!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 Products</title>
<script >
protected void ProductsView1_RowCommand(object sender, EventArgs e)
{
ShoppingCartList.DataSource = ProductsView1.Cart;
ShoppingCartList.DataBind();
}
</script>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="false" />
<h2>Browse Products</h2>
<sample:ProductsView ID="ProductsView1" PageSize="5" OnRowCommand="ProductsView1_RowCommand" />
<asp:UpdatePanel ID="CartUpdatePanel">
<ContentTemplate>
<h3>Selected Items</h3>
<asp:BulletedList BulletStyle="numbered" ID="ShoppingCartList" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Imports System
Imports System.Data
Imports System.Configuration
Imports System.Collections
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports System.Web.UI
Imports System.Drawing
Namespace UpdatePanelTutorialCustom.VB
Public Class ProductsView
Inherits CompositeControl
Private _pageSize As Integer
Private _cart As ArrayList
Private Shared ReadOnly EventRowCommand As Object = New Object()
Public Property PageSize() As Integer
Get
Return _pageSize
End Get
Set(ByVal value As Integer)
_pageSize = value
End Set
End Property
Public ReadOnly Property Cart() As ArrayList
Get
Return _cart
End Get
End Property
Protected Overrides Sub CreateChildControls()
MyBase.CreateChildControls()
Dim parent As Control
Dim container As Control
' Get a reference to the ScriptManager object for the page
' if one exists.
Dim sm As ScriptManager = ScriptManager.GetCurrent(Page)
If sm Is Nothing OrElse Not sm.EnablePartialRendering Then
' If partial rendering is not enabled, set the parent
' and container as a basic control.
container = New Control()
parent = container
Else
' If partial rendering is enabled, set the parent as
' a new UpdatePanel object and the container to the
' content template of the UpdatePanel object.
Dim up As UpdatePanel = New UpdatePanel()
container = up.ContentTemplateContainer
parent = up
End If
AddDataboundControls(container)
Controls.Add(parent)
End Sub
Private Sub GridView_RowCommand(ByVal sender As Object, ByVal e As GridViewCommandEventArgs)
Dim productID As String
If e.CommandName = "AddToCart" Then
productID = CType(sender, GridView).DataKeys(Convert.ToInt32(e.CommandArgument)).Value.ToString()
If _cart Is Nothing Then GetCart()
If _cart.IndexOf(productID) = -1 Then _
_cart.Add(productID)
ViewState("Cart") = _cart
End If
If e.CommandName = "RemoveFromCart" Then
productID = CType(sender, GridView).DataKeys(Convert.ToInt32(e.CommandArgument)).Value.ToString()
If _cart Is Nothing Then GetCart()
_cart.Remove(productID)
ViewState("Cart") = _cart
End If
Me.OnRowCommand(New EventArgs())
End Sub
Private Sub GetCart()
If ViewState("Cart") Is Nothing Then
_cart = New ArrayList()
Else
_cart = CType(ViewState("Cart"), ArrayList)
End If
End Sub
Custom Event RowCommand As EventHandler
RaiseEvent(ByVal sender As Object, ByVal e As EventArgs)
End RaiseEvent
AddHandler(ByVal value As EventHandler)
Events.AddHandler(EventRowCommand, value)
End AddHandler
RemoveHandler(ByVal value As EventHandler)
Events.RemoveHandler(EventRowCommand, value)
End RemoveHandler
End Event
Protected Overridable Sub OnRowCommand(ByVal e As EventArgs)
Dim handler As EventHandler = CType(Events(EventRowCommand), EventHandler)
If handler IsNot Nothing Then
handler(Me, e)
End If
End Sub
Private Sub AddDataboundControls(ByVal parent As Control)
Dim ds As SqlDataSource = New SqlDataSource()
ds.ID = "ProductsSqlDataSource"
ds.ConnectionString = _
ConfigurationManager.ConnectionStrings("AdventureWorksConnectionString").ConnectionString
ds.SelectCommand = _
"SELECT Production.ProductDescription.Description, Production.Product.Name, Production.ProductPhoto.ThumbnailPhotoFileName, " & _
"Production.Product.ProductID " & _
"FROM Production.Product INNER JOIN " & _
"Production.ProductProductPhoto ON Production.Product.ProductID = Production.ProductProductPhoto.ProductID INNER JOIN " & _
"Production.ProductPhoto ON Production.ProductProductPhoto.ProductPhotoID = Production.ProductPhoto.ProductPhotoID INNER JOIN " & _
"Production.ProductModelProductDescriptionCulture ON " & _
"Production.Product.ProductModelID = Production.ProductModelProductDescriptionCulture.ProductModelID INNER JOIN " & _
"Production.ProductDescription ON " & _
"Production.ProductModelProductDescriptionCulture.ProductDescriptionID = Production.ProductDescription.ProductDescriptionID"
Dim gv As GridView = New GridView()
gv.ID = "ProductsGridView"
gv.DataSourceID = ds.ID
gv.AutoGenerateColumns = False
gv.DataKeyNames = New String() {"ProductID"}
gv.GridLines = GridLines.None
gv.HeaderStyle.BackColor = Color.LightGray
gv.AlternatingRowStyle.BackColor = Color.LightBlue
gv.AllowPaging = True
gv.PageSize = _pageSize
AddHandler gv.RowCommand, AddressOf Me.GridView_RowCommand
Dim if1 As ImageField = New ImageField()
if1.HeaderText = "Product"
if1.DataImageUrlField = "ThumbnailPhotoFileName"
if1.DataImageUrlFormatString = "..\images\thumbnails\{0}"
Dim bf1 As BoundField = New BoundField()
bf1.HeaderText = "Name"
bf1.DataField = "Name"
Dim bf2 As BoundField = New BoundField()
bf2.HeaderText = "Description"
bf2.DataField = "Description"
Dim btf1 As ButtonField = New ButtonField()
btf1.Text = "Add"
btf1.CommandName = "AddToCart"
Dim btf2 As ButtonField = New ButtonField()
btf2.Text = "Remove"
btf2.CommandName = "RemoveFromCart"
gv.Columns.Add(if1)
gv.Columns.Add(bf1)
gv.Columns.Add(bf2)
gv.Columns.Add(btf1)
gv.Columns.Add(btf2)
parent.Controls.Add(New LiteralControl("<br />"))
parent.Controls.Add(gv)
parent.Controls.Add(New LiteralControl("<br />"))
parent.Controls.Add(ds)
End Sub
End Class
End Namespace
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Web.UI;
using System.Drawing;
namespace UpdatePanelTutorialCustom.CS
{
public class ProductsView : CompositeControl
{
private int _pageSize;
private ArrayList _cart;
private static readonly object EventRowCommand = new object();
public int PageSize
{
get { return _pageSize; }
set { _pageSize = value; }
}
public ArrayList Cart
{
get { return _cart; }
}
protected override void CreateChildControls() {
base.CreateChildControls();
Control parent;
Control container;
// Get a reference to the ScriptManager object for the page
// if one exists.
ScriptManager sm = ScriptManager.GetCurrent(Page);
if (sm == null || !sm.EnablePartialRendering)
{
// If partial rendering is not enabled, set the parent
// and container as a basic control.
container = new Control();
parent = container;
}
else
{
// If partial rendering is enabled, set the parent as
// a new UpdatePanel object and the container to the
// content template of the UpdatePanel object.
UpdatePanel up = new UpdatePanel();
container = up.ContentTemplateContainer;
parent = up;
}
AddDataboundControls(container);
Controls.Add(parent);
}
private void GridView_RowCommand(object sender, GridViewCommandEventArgs e)
{
string productID;
if (e.CommandName == "AddToCart")
{
productID = ((GridView)sender).DataKeys[Convert.ToInt32(e.CommandArgument)].Value.ToString();
if (_cart == null) { GetCart(); }
if (_cart.IndexOf(productID) == -1)
_cart.Add(productID);
ViewState["Cart"] = _cart;
}
if (e.CommandName == "RemoveFromCart")
{
productID = ((GridView)sender).DataKeys[Convert.ToInt32(e.CommandArgument)].Value.ToString();
if (_cart == null) { GetCart(); }
_cart.Remove(productID);
ViewState["Cart"] = _cart;
}
this.OnRowCommand(new EventArgs());
}
private void GetCart()
{
if (ViewState["Cart"] == null)
_cart = new ArrayList();
else
_cart = (ArrayList)ViewState["Cart"];
}
public event EventHandler RowCommand
{
add { Events.AddHandler(EventRowCommand, value); }
remove { Events.RemoveHandler(EventRowCommand, value); }
}
protected virtual void OnRowCommand(EventArgs e)
{
EventHandler handler = (EventHandler)Events[EventRowCommand];
if (handler != null)
{
handler(this, e);
}
}
private void AddDataboundControls(Control parent)
{
SqlDataSource ds = new SqlDataSource();
ds.ID = "ProductsSqlDataSource";
ds.ConnectionString =
ConfigurationManager.ConnectionStrings["AdventureWorksConnectionString"].ConnectionString;
ds.SelectCommand =
"SELECT Production.ProductDescription.Description, Production.Product.Name, Production.ProductPhoto.ThumbnailPhotoFileName, " +
"Production.Product.ProductID " +
"FROM Production.Product INNER JOIN " +
"Production.ProductProductPhoto ON Production.Product.ProductID = Production.ProductProductPhoto.ProductID INNER JOIN " +
"Production.ProductPhoto ON Production.ProductProductPhoto.ProductPhotoID = Production.ProductPhoto.ProductPhotoID INNER JOIN " +
"Production.ProductModelProductDescriptionCulture ON " +
"Production.Product.ProductModelID = Production.ProductModelProductDescriptionCulture.ProductModelID INNER JOIN " +
"Production.ProductDescription ON " +
"Production.ProductModelProductDescriptionCulture.ProductDescriptionID = Production.ProductDescription.ProductDescriptionID";
GridView gv = new GridView();
gv.ID = "ProductsGridView";
gv.DataSourceID = ds.ID;
gv.AutoGenerateColumns = false;
gv.DataKeyNames = new string[] { "ProductID" };
gv.GridLines = GridLines.None;
gv.HeaderStyle.BackColor = Color.LightGray;
gv.AlternatingRowStyle.BackColor = Color.LightBlue;
gv.AllowPaging = true;
gv.PageSize = _pageSize;
gv.RowCommand += this.GridView_RowCommand;
ImageField if1 = new ImageField();
if1.HeaderText = "Product";
if1.DataImageUrlField = "ThumbnailPhotoFileName";
if1.DataImageUrlFormatString = @"..\images\thumbnails\{0}";
BoundField bf1 = new BoundField();
bf1.HeaderText = "Name";
bf1.DataField = "Name";
BoundField bf2 = new BoundField();
bf2.HeaderText = "Description";
bf2.DataField = "Description";
ButtonField btf1 = new ButtonField();
btf1.Text = "Add";
btf1.CommandName = "AddToCart";
ButtonField btf2 = new ButtonField();
btf2.Text = "Remove";
btf2.CommandName = "RemoveFromCart";
gv.Columns.Add(if1);
gv.Columns.Add(bf1);
gv.Columns.Add(bf2);
gv.Columns.Add(btf1);
gv.Columns.Add(btf2);
parent.Controls.Add(new LiteralControl("<br />"));
parent.Controls.Add(gv);
parent.Controls.Add(new LiteralControl("<br />"));
parent.Controls.Add(ds);
}
}
}