UpdatePanel コントロールの概要
更新 : 2007 年 11 月
ASP.NET UpdatePanel コントロールを使用すると、クライアント中心型の高機能 Web アプリケーションを構築できます。UpdatePanel コントロールを使用すると、ポストバック時にページ全体を再表示するのではなく、ページの選択した部分を再表示できます。これを、部分ページ更新の実行と呼びます。1 つの ScriptManager コントロールと 1 つ以上の UpdatePanel コントロールを含む ASP.NET Web ページは、カスタム クライアント スクリプトなしで、自動的に部分ページ更新に参加できます。
このトピックでは、以下に関する情報を提供します。
シナリオ
背景
コード例
クラス リファレンス
シナリオ
サーバー コントロールである UpdatePanel コントロールを使用すると、複雑なクライアント動作を備えた Web ページを開発して、エンド ユーザーに表示する Web ページをより対話的にすることができます。コードを記述してサーバーとクライアントを連携させ、Web ページの指定した部分のみ更新するには、一般的に ECMAScript (JavaScript) に関する詳しい知識が必要になります。ただし、UpdatePanel コントロールを使用すると、クライアント スクリプトを一切記述することなく、Web ページを部分ページ更新に参加させることができます。必要な場合は、カスタム クライアント スクリプトを追加してクライアント ユーザー エクスペリエンスを拡張できます。UpdatePanel コントロールを使用する場合、ページの動作はブラウザに依存しません。またこのコントロールを使用することで、クライアントとサーバーの間のデータ転送量を減らすことができる場合があります。
背景
ページ全体を再表示せずに更新できるページ領域を指定することで、UpdatePanel コントロールは動作します。このプロセスは、ScriptManager サーバー コントロールとクライアントの PageRequestManager クラスにより調整されます。部分ページ更新が有効になると、コントロールはサーバーに対し非同期にポストできます。非同期ポストバックは、結果のサーバー ページによって完全なページおよびコントロールのライフ サイクルが実行されるという点においては通常のポストバックと同じです。ただし、非同期ポストバックでは、ページの更新は、UpdatePanel コントロールで囲まれていて、更新のマークが付けられているページの領域に制限されます。サーバーは、影響する要素のみの HTML マークアップをブラウザに送信します。ブラウザでは、クライアントの PageRequestManager クラスがドキュメント オブジェクト モデル (DOM: Document Object Model) 操作を実行して、既存の HTML を更新されたマークアップに置き換えます。
.gif "メモ") メモ : |
|---|
非同期ポストバックまたは XMLHTTPRequest オブジェクトの使用中に、URL に 2 バイト文字が含まれている場合、ポストバック エラーが発生します。この問題は、href 属性が、ページを参照する URL エンコードされた文字列に設定されている場合、そのページの head 要素に <base href="url"/> 要素を含めることにより解決できます。サーバー コードに動的に追加されるこの要素を追加できます。 |
次の図は、最初に読み込まれたページと、UpdatePanel コントロールのコンテンツを再表示するそれ以降の非同期ポストバックを表しています。
部分ページ レンダリングの概要
.png "部分ページ レンダリングの概要")
部分ページ更新の有効化
UpdatePanel コントロールを使用するには、Web ページに ScriptManager コントロールが必要です。既定では、部分ページ更新は有効化されています。これは、ScriptManager コントロールの EnablePartialRendering プロパティの既定値が true のためです。
次に、ページで ScriptManager コントロールと UpdatePanel コントロールを定義しているマークアップの例を示します。UpdatePanel コントロールには、クリックするとパネル内部のコンテンツを再表示する Button コントロールが含まれています。既定では、ChildrenAsTriggers プロパティは true です。したがって、Button コントロールは、非同期ポストバック コントロールとして動作します。
<asp:ScriptManager ID="ScriptManager"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<!-- Other content in the panel. -->
<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1"
Text="Refresh Panel"
runat="server" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<asp:ScriptManager ID="ScriptManager"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<!-- Other content in the panel. -->
<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1"
Text="Refresh Panel"
runat="server" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
UpdatePanel コントロールのコンテンツの指定
宣言によって、または ContentTemplate プロパティを使用してデザイナでコンテンツを UpdatePanel コントロールに追加します。マークアップでは、このプロパティは ContentTemplate 要素として公開されています。コンテンツをプログラムによって追加するには、ContentTemplateContainer プロパティを使用します。
1 つ以上の UpdatePanel コントロールを含むページが最初にレンダリングされると、UpdatePanel コントロールのすべてのコンテンツがレンダリングされ、ブラウザに送信されます。以降の非同期ポストバックでは、個々の UpdatePanel コントロールのコンテンツが更新される場合があります。更新は、パネルの設定、ポストバックを発生させた要素、および各パネルに固有のコードに基づきます。
UpdatePanel トリガの指定
既定では、UpdatePanel コントロール内部のポストバック コントロールが非同期ポストバックを発生させ、パネルのコンテンツを再表示します。ただし、ページ上の他のコントロールにより UpdatePanel コントロールが再表示されるように構成することもできます。これを行うには、UpdatePanel コントロールのトリガを定義します。トリガとはバインディングで、どのポストバック コントロールおよびイベントによりパネルの更新を発生させるかを指定します。トリガ コントロールの指定イベント (たとえば、ボタンの Click イベント) が発生すると、更新パネルが再表示されます。
UpdatePanel コントロールのトリガを指定する方法を次の例に示します。
<asp:Button ID="Button1"
Text="Refresh Panel"
runat="server" />
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<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"
runat="server" />
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<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 に設定すると、例外がスローされます。ChildrenAsTriggers プロパティは、UpdateMode プロパティを Conditional に設定した場合に限り使用できるように設計されています。
マスタ ページでの 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 runat="server">
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" runat="server">
<title>ScriptManager in Master Page Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Panel ID="MasterPanel1" runat="server" GroupingText="Master Page">
<asp:Button ID="Button1" runat="server" Text="Full Page Refresh" />
<asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="MasterButton2_Click" />
</asp:Panel>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</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 runat="server">
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" runat="server">
<title>ScriptManager in Master Page Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Panel ID="MasterPanel1" runat="server" GroupingText="Master Page">
<asp:Button ID="Button1" runat="server" Text="Full Page Refresh" />
<asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="MasterButton2_Click" />
</asp:Panel>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
<%@ Page Language="VB" MasterPageFile="MasterVB.master"
Title="ScriptManager in Content Page" %>
<%@ MasterType VirtualPath="MasterVB.master" %>
<script runat="server">
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"
runat="server" >
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<p>
Last updated: <strong>
<%= Master.LastUpdate.ToString() %>
</strong>
</p>
<asp:Button ID="Button3"
Text="Refresh Panel"
OnClick="Button3_Click"
runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</asp:Content>
<%@ Page Language="C#" MasterPageFile="MasterCS.master"
Title="ScriptManager in Content Page" %>
<%@ MasterType VirtualPath="MasterCS.master" %>
<script runat="server">
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"
runat="server" >
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<p>
Last updated: <strong>
<%= Master.LastUpdate.ToString() %>
</strong>
</p>
<asp:Button ID="Button3"
Text="Refresh Panel"
OnClick="Button3_Click"
runat="server" />
</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 runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>UpdatePanelUpdateMode Example</title>
<style type="text/css">
div.NestedPanel
{
position: relative;
margin: 2% 5% 2% 5%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager"
runat="server" />
<asp:UpdatePanel ID="OuterPanel"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<div>
<fieldset>
<legend>Outer Panel </legend>
<br />
<asp:Button ID="OPButton1"
Text="Outer Panel Button"
runat="server" />
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<br />
<asp:UpdatePanel ID="NestedPanel1"
UpdateMode="Conditional"
runat="server">
<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"
runat="server" />
</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 runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>UpdatePanelUpdateMode Example</title>
<style type="text/css">
div.NestedPanel
{
position: relative;
margin: 2% 5% 2% 5%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager"
runat="server" />
<asp:UpdatePanel ID="OuterPanel"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<div>
<fieldset>
<legend>Outer Panel </legend>
<br />
<asp:Button ID="OPButton1"
Text="Outer Panel Button"
runat="server" />
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<br />
<asp:UpdatePanel ID="NestedPanel1"
UpdateMode="Conditional"
runat="server">
<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"
runat="server" />
</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 runat="server">
<title>Browse Departments</title>
<script runat="server">
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" runat="server">
<div>
<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="true" />
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="DepartmentsGridView" runat="server" 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" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" runat="server" 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 runat="server" ID="InnerTimeLabel"><%=DateTime.Now %></asp:Label>
<asp:SqlDataSource ID="EmployeesDataSource" runat="server" 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 runat="server" ID="OuterTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="DepartmentDataSource" runat="server" 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 runat="server">
<title>Browse Departments</title>
<script runat="server">
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" runat="server">
<div>
<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="true" />
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="DepartmentsGridView" runat="server" 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" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" runat="server" 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 runat="server" ID="InnerTimeLabel"><%=DateTime.Now %></asp:Label>
<asp:SqlDataSource ID="EmployeesDataSource" runat="server" 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 runat="server" ID="OuterTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="DepartmentDataSource" runat="server" 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 runat="server">
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" runat="server">
<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" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="AnswerFloatPanel" class="AnswerFloatPanelStyle" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
Completed Questions:
<asp:DataList ID="ResultsList" runat="server">
<ItemTemplate>
<asp:Label ID="ResultQuestion" runat="server" Text='<%# Eval("Key") %>' />
::
<asp:Label ID="ResultAnswer" runat="server" Text='<%# Eval("Value") %>' />
</ItemTemplate>
</asp:DataList>
<p style="text-align: right">
<asp:Button ID="SubmitButton" Text="Submit" runat="server" Visible="false"
OnClick="SubmitButton_Click" />
</p>
<asp:Label ID="Message" runat="Server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:XmlDataSource ID="SurveyDataSource"
runat="server"
XPath="/Questions/Question"
DataFile="~/App_Data/SurveyQuestions.xml"/>
<asp:DataList
ID="SurveyDataList"
DataSourceID="SurveyDataSource"
runat="server">
<ItemTemplate>
<table cellpadding="2" cellspacing="2">
<tr>
<td valign="top">
<asp:Label id="QuestionLabel" Text='<%# XPath("@Title")%>' runat="server" />
</td>
</tr>
<tr><td>
<asp:RadioButtonList ID="ChoicesRadioButtonList" runat="server"
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 runat="server">
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" runat="server">
<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" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="AnswerFloatPanel" class="AnswerFloatPanelStyle" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
Completed Questions:
<asp:DataList ID="ResultsList" runat="server">
<ItemTemplate>
<asp:Label ID="ResultQuestion" runat="server" Text='<%# Eval("Key") %>' />
::
<asp:Label ID="ResultAnswer" runat="server" Text='<%# Eval("Value") %>' />
</ItemTemplate>
</asp:DataList>
<p style="text-align: right">
<asp:Button ID="SubmitButton" Text="Submit" runat="server" Visible="false"
OnClick="SubmitButton_Click" />
</p>
<asp:Label ID="Message" runat="Server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:XmlDataSource ID="SurveyDataSource"
runat="server"
XPath="/Questions/Question"
DataFile="~/App_Data/SurveyQuestions.xml"/>
<asp:DataList
ID="SurveyDataList"
DataSourceID="SurveyDataSource"
runat="server">
<ItemTemplate>
<table cellpadding="2" cellspacing="2">
<tr>
<td valign="top">
<asp:Label id="QuestionLabel" Text='<%# XPath("@Title")%>' runat="server" />
</td>
</tr>
<tr><td>
<asp:RadioButtonList ID="ChoicesRadioButtonList" runat="server"
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 runat="server">
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" runat="server">
<title>UpdatePanel Added Programmatically Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="TheScriptManager"
runat="server" />
</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 runat="server">
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" runat="server">
<title>UpdatePanel Added Programmatically Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="TheScriptManager"
runat="server" />
</div>
</form>
</body>
</html>
UpdatePanel コントロールと互換性のないコントロール
次の ASP.NET コントロールは、部分ページ更新とは互換性がありません。つまり、これらのコントロールは、UpdatePanel コントロールの内部で動作するようには設計されていません。
次の条件下の TreeView コントロール。非同期ポストバックに属さないコールバックが有効になっている場合。CSS スタイルへの参照を使用してコントロールを暗黙的にスタイル設定する代わりに、コントロール プロパティでスタイルを直接設定している場合。EnableClientScript プロパティが false の場合 (既定は true です)。非同期ポストバックと非同期ポストバックの間に EnableClientScript プロパティの値を変更した場合。詳細については、「TreeView Web サーバー コントロールの概要」を参照してください。
CSS スタイルへの参照を使用してコントロールを暗黙的にスタイル設定するのではなく、コントロール プロパティでスタイルを直接設定している場合の Menu コントロール。詳細については、「メニュー コントロールの概要」を参照してください。
非同期ポストバックの一部としてファイルをアップロードするために使用する場合の FileUpload コントロールと HtmlInputFile コントロール。
EnableSortingAndPagingCallbacks プロパティを true に設定した場合の GridView コントロールと DetailsView コントロール。既定値は、false です。
コンテンツが編集可能なテンプレートに変換されていない Login、PasswordRecovery、ChangePassword、および CreateUserWizard の各コントロール。
Substitution コントロール。
FileUpload コントロールまたは HtmlInputFile コントロールを UpdatePanel コントロールの内部で使用するには、ファイルを送信するポストバック コントロールが、そのパネルの PostBackTrigger コントロールになるように設定します。FileUpload コントロールと HtmlInputFile コントロールは、ポストバック シナリオでのみ使用できます。
その他のすべてのコントロールは、UpdatePanel コントロールの内部で動作します。ただし、一部の状況では、UpdatePanel コントロールの内部でコントロールが期待どおりに動作しない場合があります。これらの状況には、以下が含まれます。
ClientScriptManager コントロールの登録メソッドを呼び出してスクリプトを登録する場合。
Write メソッドを呼び出すなど、コントロールのレンダリング時にスクリプトまたはマークアップを直接レンダリングする場合。
コントロールにより ClientScriptManager コントロールのスクリプト登録メソッドを呼び出す場合、代わりに ScriptManager コントロールの対応するスクリプト登録メソッドを使用できる場合があります。その場合、コントロールは UpdatePanel コントロールの内部で動作できます。
UpdatePanel コントロールの内部での Web パーツ コントロールの使用
ASP.NET Web パーツは Web サイト作成用の一連の組み込みコントロールであり、これを使用すると、エンド ユーザーは Web ページの内容、外観、動作をブラウザから直接編集できます。Web パーツ コントロールは UpdatePanel コントロールの内部で使用できますが、次のような制限があります。
すべての WebPartZone コントロールは同じ UpdatePanel コントロールの内部に配置する必要があります。たとえば、ページに 2 つの UpdatePanel コントロールを作成して、それぞれに専用の WebPartZone コントロールを配置することはできません。
WebPartManager コントロールは、Web パーツ コントロールのすべてのクライアント状態情報を管理します。このコントロールは、ページの最も外側の UpdatePanel コントロールに配置する必要があります。
非同期ポストバックを使用して Web パーツ コントロールをインポートまたはエクスポートすることはできません (このタスクを実行するには、非同期ポストバックでは使用できない FileUpload コントロールが必要です)。既定では、Web パーツ コントロールをインポートすると、完全ポストバックが実行されます。
非同期ポストバック中に、Web パーツ コントロールのスタイルを追加または変更することはできません。
Web パーツ コントロールの詳細については、「ASP.NET Web パーツの概要」を参照してください。
非同期ポストバック時にサポートされないプロパティおよびメソッド
非同期ポストバック時に、ページ上に既定のポストバック ボタンがサポートされない場合のシナリオは次のとおりです。
非同期ポストバック時に、プログラムによって DefaultButton を変更した場合。
UpdatePanel コントロール内にない Panel コントロールで、非同期ポストバック中に DefaultButton をプログラムによって変更した場合。
HttpResponse クラスの次のメソッドは、ポストバックの状況でのみサポートされ、非同期ポストバックの状況ではサポートされません。
コード例
次のセクションでは、UpdatePanel コントロールの作成方法および使用方法の例を示します。
"方法" トピックと "チュートリアル" トピック
クラス リファレンス
UpdatePanel コントロールの主要なサーバー クラスを次の表に示します。
クラス |
説明 |
|---|---|
部分ページ更新に参加できる Web ページの一部を指定するサーバー コントロール。 |
|
部分ページ レンダリングを管理するサーバー コントロール。ScriptManager コントロールは、ブラウザに送信するスクリプト コンポーネントを登録します。またこのコントロールは、指定した領域のみページにレンダリングされるようにするために、ページ レンダリングをオーバーライドします。 |
|
(コンテンツ ページ、ユーザー コントロールなどの) 入れ子になったコンポーネントでスクリプト参照および Web サーバー参照を追加できるようにするサーバー コントロール。このコントロールは、親要素に ScriptManager コントロールが既に含まれている場合に便利です。 |
|
ブラウザでの部分ページ レンダリングを調整する、Microsoft AJAX Library のクラス。PageRequestManager クラスは、サーバーと情報を非同期に交換します。このクラスは、カスタム クライアント スクリプト開発用のイベントおよびメソッドを公開します。 |
その他のトピック
参照
処理手順
複数の UpdatePanel コントロールを使用した単純な ASP.NET ページの作成