実例で説明してくれる動画サイト

 * 非常に分かりやすく参考になった。一読する価値あり。

http://www.microsoft.com/japan/seminar/msdn/webcast/bg/47.ajax.updateprogress/play.aspx

ポイント

 (1) 時間が掛かる処理に「UpdatePanel」で囲っておく
 (2) 「UpdatePanel」に遅延している間に表示しているパネルを作成しておく
 (3) (2)の「AssociatedUpdatePanelID」プロパティに、(1)のパネルIDを関連付けておく★重要★

 ※なお、UpdatePanelについては、以下のサイトを参照のこと。

http://blogs.yahoo.co.jp/dk521123/26775531.html

使用上の注意

 * 以下のサイトにもあるように、ファイル・アップロードのFileUpload／HtmlInputFileコントロールにはUpdatePanelコントロールと組み合わせて利用することはできないため、UpdateProgressコントロールも使えない。

http://www.atmarkit.co.jp/fdotnet/dotnettips/966aspajaxasyncfileupload/aspajaxasyncfileupload.html

主なプロパティ

 * AssociatedUpdatePanelID:関連付けておくパネルのID（上述「ポイント」の(3)を参照のこと）
 * DisplayAfter:表示する時間（ミリ秒）

サンプル

 * 上記の動画サイトを参考に、実装してみた。

準備

 * 遅延している間に表示しているときに表示するアニメーションGIFをプロジェクトに追加しておく。（ASP.NET AJAX Control Toolkitのサンプル用のZipを解凍した後をその配下の画像フォルダ内にアニメーションGIFがある）

デザイン部（一部抜粋）

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:UpdateProgress ID="UpdateProgress1" runat="server" 
    AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="100">
    <ProgressTemplate>
        <img alt="bbb" src="Images/loading.gif" />
    </ProgressTemplate>
</asp:UpdateProgress>

コード部

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    Threading.Thread.Sleep(4000)
    Me.Label1.Text = DateTime.Now.ToString()
End Sub

メモ

 * CSSなどで、パネル表示位置などを調整した方がよさそう。
 * 「UpdatePanel」をWebユーザーコントロール化しておき、「AssociatedUpdatePanelID」をPublicプロパティにしておけば使いまわしできそう。（Webユーザーコントロールについては、以下の通り。）

http://blogs.yahoo.co.jp/dk521123/25943315.html

Public WriteOnly Property AssociatedUpdatePanelID As String
    Set(value As String)
        Me.UpdateProgress1.AssociatedUpdatePanelID = value
    End Set
End Property