UpdateProgress コントロールの概要

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

UpdateProgress コントロールは、UpdatePanel コントロールでの部分ページ更新に関するステータス情報を表示します。UpdateProgress コントロールの既定のコンテンツとレイアウトはカスタマイズできます。部分ページ更新が高速で実行されるときに画面がちらつくことを防ぐには、UpdateProgress コントロールが表示されるまでの遅延時間を指定します。

このトピックでは、以下に関する情報を提供します。

シナリオ
背景
コード例
クラスリファレンス

シナリオ

UpdateProgress コントロールは、Web ページに部分ページレンダリングのための UpdatePanel コントロールが 1 つ以上含まれるときに、より直感的な UI をデザインするのに役立ちます。部分ページ更新が低速で実行される場合は、UpdateProgress コントロールを使用して、更新の状態に関する視覚的フィードバックを表示できます。1 つのページに複数の UpdateProgress コントロールを含め、各コントロールを別々の UpdatePanel コントロールに関連付けることができます。または、1 つの UpdateProgress コントロールを使用して、それをページ上のすべての UpdatePanel コントロールに関連付けることもできます。

背景

UpdateProgress コントロールは <div> 要素をレンダリングします。この要素は、関連付けられている UpdatePanel コントロールが非同期ポストバックを実行したかどうかによって、表示または非表示になります。初期ページレンダリングまたは同期ポストバックでは、UpdateProgress コントロールは表示されません。

UpdateProgress コントロールと UpdatePanel コントロールの関連付け

UpdateProgress コントロールを UpdatePanel コントロールに関連付けるには、UpdateProgress コントロールの AssociatedUpdatePanelID プロパティを設定します。ポストバックイベントが UpdatePanel コントロールから発生すると、関連付けられている UpdateProgress コントロールが表示されます。UpdateProgress コントロールを特定の UpdatePanel コントロールに関連付けていない場合、UpdateProgress コントロールはすべての非同期ポストバックの進行状況を表示します。

UpdatePanel コントロールの ChildrenAsTriggers プロパティが false に設定されていて、その UpdatePanel コントロールから非同期ポストバックが発生した場合、関連付けられているすべての UpdateProgress コントロールが表示されます。

UpdateProgress コントロールのコンテンツの作成

UpdateProgress コントロールによって表示されるメッセージを宣言的に指定するには、ProgressTemplate プロパティを使用します。<ProgressTemplate> 要素には、HTML とマークアップを含めることができます。UpdateProgress コントロールに使用するメッセージを指定する方法を次の例に示します。

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
  An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
  An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>

1 つの UpdateProgress コントロールによって 2 つの 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 Sub Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 { 
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1" runat="server" Text="Refresh Panel" OnClick="Button_Click" />    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
      Update in progress...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </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 Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 { 
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1" runat="server" Text="Refresh Panel" OnClick="Button_Click" />    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
      Update in progress...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>

2 つの UpdateProgress コントロールを使用する例を次に示します。各コントロールは、関連付けられている 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 Sub Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
     }
     #UpdateProgress1, #UpdateProgress2 {
      width: 200px; background-color: #FFC080;
      position: absolute; bottom: 0px; left: 0px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1" runat="server" Text="Refresh Panel" OnClick="Button_Click" />    
    <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server">
    <ProgressTemplate>
      UpdatePanel1 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>    
    <asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" runat="server">
    <ProgressTemplate>
      UpdatePanel2 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </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">
    protected void Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
     }
     #UpdateProgress1, #UpdateProgress2 {
      width: 200px; background-color: #FFC080;
      position: absolute; bottom: 0px; left: 0px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1" runat="server" Text="Refresh Panel" OnClick="Button_Click" />    
    <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server">
    <ProgressTemplate>
      UpdatePanel1 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>    
    <asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" runat="server">
    <ProgressTemplate>
      UpdatePanel2 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

ユーザーがクリックすると非同期ポストバックを停止できるボタンを <ProgressTemplate> 要素に追加する方法を次の例に示します。別のポストバックの実行中に開始された新しいポストバックはキャンセルされます。

<%@ 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 Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;    
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    var postBackElement;
    function InitializeRequest(sender, args) {
       if (prm.get_isInAsyncPostBack())
       {
          args.set_cancel(true);
       }
       postBackElement = args.get_postBackElement();
       if (postBackElement.id == 'ButtonTrigger')
       {
         $get('UpdateProgress1').style.display = "block";
       }
    }
    function EndRequest (sender, args) {
       if (postBackElement.id == 'ButtonTrigger')
       {
         $get('UpdateProgress1').style.display = "none";    
       }
    }
    function AbortPostBack() {
      if (prm.get_isInAsyncPostBack()) {
           prm.abortPostBack();
      }        
    }
    </script>
    <asp:Button ID="ButtonTrigger" runat="server" Text="Refresh Panel 1" OnClick="Button_Click" />    
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    The trigger for this panel 
    causes the UpdateProgress to be displayed
    even though the UpdateProgress is associated
    with panel 2.     
    <br />
    </ContentTemplate>
    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="ButtonTrigger" />
    </Triggers>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel2" >
    <ProgressTemplate>
      Update in progress...
      <input type="button" value="stop" onclick="AbortPostBack()" />
    </ProgressTemplate>
    </asp:UpdateProgress>
    </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 Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;    
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    var postBackElement;
    function InitializeRequest(sender, args) {
       if (prm.get_isInAsyncPostBack())
       {
          args.set_cancel(true);
       }
       postBackElement = args.get_postBackElement();
       if (postBackElement.id == 'ButtonTrigger')
       {
         $get('UpdateProgress1').style.display = "block";
       }
    }
    function EndRequest (sender, args) {
       if (postBackElement.id == 'ButtonTrigger')
       {
         $get('UpdateProgress1').style.display = "none";    
       }
    }
    function AbortPostBack() {
      if (prm.get_isInAsyncPostBack()) {
           prm.abortPostBack();
      }        
    }
    </script>
    <asp:Button ID="ButtonTrigger" runat="server" Text="Refresh Panel 1" OnClick="Button_Click" />    
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    The trigger for this panel 
    causes the UpdateProgress to be displayed
    even though the UpdateProgress is associated
    with panel 2.     
    <br />
    </ContentTemplate>
    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="ButtonTrigger" />
    </Triggers>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel2" >
    <ProgressTemplate>
      Update in progress...
      <input type="button" value="stop" onclick="AbortPostBack()" />
    </ProgressTemplate>
    </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>

前の例では、<ProgressTemplate> 要素内の HtmlButton コントロールの onClick 属性が JavaScript AbortPostBack 関数を呼び出します。詳細については、PageRequestManager クラスの abortPostBack メソッドと isInAsyncPostBack プロパティを参照してください。

コンテンツのレイアウトの指定

DynamicLayout プロパティが true の場合、UpdateProgress コントロールは、最初はページ表示内の領域を使用しません。代わりに、必要に応じて UpdateProgress コンテンツを表示できるように、ページが動的に変更されます。動的表示をサポートするために、このコントロールは、display スタイルプロパティの初期値が none に設定された <div> 要素としてレンダリングされます。

DynamicLayout プロパティが false の場合、UpdateProgress コントロールは非表示のときにもページ表示内の領域を使用します。この場合、コントロールの <div> 要素の display スタイルプロパティは block に設定され、visibility の初期値は hidden に設定されます。

UpdateProgress コントロールのページへの配置

UpdateProgress コントロールは、UpdatePanel コントロールの内外に配置できます。UpdateProgress コントロールは、関連付けられている UpdatePanel コントロールが非同期ポストバックの結果として更新されるたびに表示されます。これは、UpdateProgress コントロールが別の UpdatePanel コントロール内にある場合でも同様です。

UpdatePanel コントロールが別の更新パネル内にある場合、子パネルからポストバックが発生すると、子パネルに関連付けられているすべての UpdateProgress コントロールが表示されます。また、親パネルに関連付けられているすべての UpdateProgress コントロールも表示されます。親パネルの直下にある子コントロールからポストバックが発生した場合は、親パネルに関連付けられている UpdateProgress コントロールだけが表示されます。これは、ポストバックのトリガ方法のロジックに従います。

UpdateProgress コンロトールの表示タイミングの指定

UpdateProgress コントロールが表示されるタイミングは、JavaScript の PageRequestManager クラスの beginRequest イベントと endRequest イベントを使用してプログラムで制御できます。beginRequest イベントハンドラで、UpdateProgress コントロールを表す DOM 要素を表示します。endRequest イベントハンドラで、この要素を非表示にします。

次のような場合は、クライアントスクリプトを使用して、UpdateProgress コントロールを表示および非表示にする必要があります。

更新パネルの非同期ポストバックのトリガとして登録されているが、UpdateProgress コントロールが関連付けられていないコントロールからポストバックが発生したとき。
プログラムで ScriptManager コントロールの RegisterAsyncPostBackControl メソッドを使用して非同期ポストバックコントロールとして登録されているコントロールからポストバックが発生したとき。この場合、UpdateProgress コントロールは非同期ポストバックがトリガされたかどうかを自動的には判断できません。

コード例

次のセクションでは、[T:System.Web.UI.]UpdateProgress コントロールを作成および使用するためのコード例を示します。

チュートリアル

クラスリファレンス

[T:System.Web.UI.]UpdateProgress クラスを扱う主要なクラスの一覧を次の表に示します。

クラス	説明
UpdateProgress	UpdatePanel コントロールのコンテンツが更新されるときに、ブラウザに視覚的フィードバックを表示します。
UpdatePanel	部分ページ更新に参加できる Web ページの部分を指定します。
ScriptManager	部分ページレンダリングを管理します。ScriptManager コントロールは、ブラウザに送信するスクリプトコンポーネントを登録し、ページレンダリングをオーバーライドして、ページの指定した領域だけがレンダリングされるようにします。
PageRequestManager	ブラウザでの部分ページレンダリングを調整します。PageRequestManager クラスは、サーバーと情報を非同期に交換します。このクラスは、カスタムクライアントスクリプト用のイベントおよびメソッドを公開しています。

その他のトピック

ASP.NET ページのライフサイクルの概要

参照

処理手順

UpdatePanel コントロールの概要

UpdateProgress コントロールの概要

クライアントスクリプト内の UpdateProgress コントロールのプログラミング

概念

UpdatePanel コントロールの概要

次の方法で共有

UpdateProgress コントロールの概要

シナリオ

背景

UpdateProgress コントロールと UpdatePanel コントロールの関連付け

UpdateProgress コントロールのコンテンツの作成

コンテンツのレイアウトの指定

UpdateProgress コントロールのページへの配置

UpdateProgress コンロトールの表示タイミングの指定

コード例

チュートリアル

クラスリファレンス

その他のトピック

参照

処理手順

概念

その他のリソース

次の方法で共有

UpdateProgress コントロールの概要

シナリオ

背景

UpdateProgress コントロールと UpdatePanel コントロールの関連付け

UpdateProgress コントロールのコンテンツの作成

コンテンツのレイアウトの指定

UpdateProgress コントロールのページへの配置

UpdateProgress コンロトールの表示タイミングの指定

コード例

チュートリアル

クラス リファレンス

その他のトピック

参照

処理手順

概念

その他のリソース

クラスリファレンス