「実行中」の明示(UpdateProgress) のバックアップ(No.4)

閲覧総計：12581　　（本日：1　　昨日：0)

　Ajaxでは、ページ遷移が発生しない為、プログラムが動いているのか？どうか？がわからない。
　プログラムが「実行中」であることを明示する機能としてUpdateProgressが用意されている。
　UpdateProgressの使用法を確認した。　　10/08/12

　教材にはビデオ動画でASP.NET Ajaxをわかり易く丁寧に解説してくれている
http://msdn.microsoft.com/ja-jp/events/dd297548.aspx?ppud=4
↑こちらのページ（全14回）を使用する事にした。
　今回は、第3回「UpdateProgressを使ってみよう」の解説にしたがい作業をトレースしてみた。
http://www.microsoft.com/japan/seminar/msdn/webcast/bg/47.ajax.updateprogress/play.aspx

【参考】loading.gif画像は↓こちらの素材集から選んだ
http://www.benricho.org/loading_images/popular01.html

開発環境：VWD2008 + Access2003
サーバ：ASP.NET3.5 + Access2003

【デザイン画面↓】

【実行画面↓】

【実行サンプル↓】
http://www.kuri6005.useiis7.net/AjaxTr/UpdateProgress2/UpdateProgress.aspx

【UpdateProgress.aspx】

<%@ Page Language="VB" %>

<%@ Register src="../HistoryCounter.ascx" tagname="HistoryCounter" tagprefix="uc1" %>

<!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)
        System.Threading.Thread.Sleep(3000)
        
        Label1.Text = DateTime.Now.ToString()
        
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        Ajaxの「実行中」を明示するUpdateProgressの使用法　10/08/11<br />
    <br />
    <fieldset>
        <legend>　UpdatePnel窓（この窓内のみの情報が更新されます）</legend>
            <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <br />
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                    <br />
                    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
                    Text="Button" />
                    <br />
                </ContentTemplate>
            </asp:UpdatePanel>
            </div>
    </fieldset>
        <br />
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" 
            AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="100">
            <ProgressTemplate>
                <img src="../loading-05.gif" 
    style="width: 32px; height: 32px" />しばらくお待ちください
            </ProgressTemplate>
        </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>

【参考にしたページ】
1.「UpdateProgressを使ってみよう」　07/06/01
http://www.microsoft.com/japan/seminar/msdn/webcast/bg/47.ajax.updateprogress/play.aspx

test -- test 2010-11-30 (火) 09:51:32

選択肢	投票
参考になった	1
ふつう	0
参考にならなかった	0