UpdateProgress コントロールの概要

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

更新 : 2007 年 11 月

このチュートリアルでは、UpdateProgress コントロールを使用して、部分ページ更新の進行状況を表示します。ページに UpdatePanel コントロールが含まれている場合、UpdateProgress コントロールを追加して、部分ページ更新の状態をユーザーに通知することもできます。1 つの UpdateProgress コントロールを使用して、ページ全体の部分ページ更新の進行状況を表すことができます。または、すべての UpdatePanel コントロールに対して UpdateProgress コントロールを含めることもできます。このチュートリアルでは、この両方のパターンについて説明します。

前提条件

独自の開発環境でこの手順を実装するための要件は次のとおりです。

Microsoft Visual Studio 2005 または Visual Web Developer Express Edition。
AJAX 対応の ASP.NET Web サイト。

単一の UpdateProgress コントロールの使用

すべての部分ページ更新の進行状況をページに表示するには、まず単一の UpdateProgress コントロールを使用します。

ページ全体に単一の UpdateProgress コントロールを使用するには

新しいページを作成し、デザインビューに切り替えます。
ツールボックスの [AJAX Extensions] タブで、ScriptManager コントロールをダブルクリックしてページに追加します。
UpdatePanel コントロールをダブルクリックしてページに追加します。
UpdateProgress コントロールをダブルクリックしてページに追加します。
UpdateProgress コントロール内に、"Processing…" というテキストを追加します。
UpdatePanel コントロール内に Label コントロールと Button コントロールを追加します。
Label コントロールの Text プロパティを "Initial Page Rendered" に設定します。
Button コントロールをダブルクリックしてボタンの Click イベントのハンドラを追加します。

次のコードを Click ハンドラに追加します。これにより、3 秒の遅延が人為的に作成され、現在の時刻が表示されます。

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed at " +
        DateTime.Now.ToString();       
}

メモ :
Click イベントのハンドラは、このチュートリアルに意図的に遅延を導入します。実際には、ユーザーが遅延を導入することはありません。サーバートラフィックや、処理に時間がかかるサーバーコード (長時間実行するデータベースクエリなど) によって遅延が発生します。

変更内容を保存し、Ctrl キーを押しながら F5 キーを押して、ブラウザでページを表示します。

ボタンをクリックします。

少し待つと、進行状況メッセージが表示されます。Click イベントのハンドラが完了すると、進行状況メッセージが非表示になり、パネルに表示される時間が更新されます。

例では、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 Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Initial page rendered."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Processing...
            </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 Button1_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label1.Text = "Page refreshed at " +
            DateTime.Now.ToString();       
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Initial page rendered."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Processing...
            </ProgressTemplate>
        </asp:UpdateProgress>

    </div>
    </form>
</body>
</html>

複数の UpdateProgress コントロールの使用

ページ上の 1 つの UpdateProgress コントロールは、ページ上のすべての UpdatePanel コントロールの進行状況メッセージを表示できます。UpdatePanel コントロール内から発生する非同期ポストバックにより、UpdateProgress コントロールにメッセージが表示されます。パネルのトリガであるコントロールからのポストバックにも、メッセージが表示されます。

プログレスコントロールの AssociatedUpdatePanelID プロパティを設定することで、UpdateProgress コントロールを単一の UpdatePanel コントロールに関連付けることができます。この場合、関連付けられた UpdatePanel コントロール内からポストバックが発生する場合のみ、UpdateProgress コントロールにメッセージが表示されます。

次の手順では、2 つの UpdateProgress コントロールをページに追加します。各コントロールは、異なる UpdatePanel コントロールに関連付けられます。

ページで複数の UpdateProgress コントロールを使用するには

新しいページを作成し、デザインビューに切り替えます。
ツールボックスの [AJAX Extensions] タブで、ScriptManager コントロールをダブルクリックしてページに追加します。
UpdatePanel コントロールを 2 回ダブルクリックして、コントロールの 2 つのインスタンスをページに追加します。
各 UpdatePanel コントロールで、Label コントロールと Button コントロールを追加します。
両方の Label コントロールの Text プロパティを "Panel Initially Rendered" に設定します。
各 Button コントロールをダブルクリックして各ボタンの Click イベントのハンドラを追加します。

次のコードを各 Click ハンドラに追加します。これにより、3 秒の遅延が人為的に作成され、現在の時刻が表示されます。

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed at " +
        DateTime.Now.ToString();       
}

protected void Button2_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label2.Text = "Page refreshed at " +
        DateTime.Now.ToString();       

}

デザインビューに切り替えます。
最初の UpdatePanel コントロールの中をクリックし、UpdateProgress コントロールを追加します。
UpdateProgress コントロール内に、"Panel1 Updating" というテキストを追加します。

これにより、ProgressTemplate プロパティが設定されます。
[プロパティ] ウィンドウで UpdateProgress コントロールを選択し、その AssociatedUpdatePanelID プロパティを "UpdatePanel1" に設定します。
2 番目の UpdatePanel コントロールの中をクリックし、2 番目の UpdateProgress コントロールを追加します。
UpdateProgress コントロールのテキストを "Panel2 Updating" に設定し、AssociatedUpdatePanelID プロパティを "UpdatePanel2" に設定します。
変更内容を保存し、Ctrl キーを押しながら F5 キーを押して、ブラウザでページを表示します。
最初のパネル内のボタンをクリックします。

少し待つと、最初のパネルに関連付けられた進行状況メッセージが表示されます。もう 1 つの UpdateProgress コントロールは表示されません。

2 番目のパネル内のボタンをクリックします。

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 Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub

    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        Panel1 updating...
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Label ID="Label2" runat="server" Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
                <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
                    <ProgressTemplate>
                        Panel2 updating....
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </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 Button1_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label1.Text = "Page refreshed at " +
            DateTime.Now.ToString();       
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label2.Text = "Page refreshed at " +
            DateTime.Now.ToString();       

    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        Panel1 updating...
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Label ID="Label2" runat="server" Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
                <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
                    <ProgressTemplate>
                        Panel2 updating....
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

レビュー

このチュートリアルでは、UpdateProgress コントロールを使用する 2 つの方法について説明しました。最初の方法では、特定の UpdatePanel コントロールに関連付けられていないページで 1 つの UpdateProgress コントロールを追加します。この場合、コントロールには、すべての UpdatePanel コントロールの進行状況メッセージが表示されます。プログレスコントロールを使用する 2 番目の方法では、複数の UpdateProgress コントロールを追加し、それぞれを別の UpdatePanel コントロールに関連付けます。

参照

次の方法で共有