次の方法で共有


チュートリアル : ASP.NET UpdatePanel コントロールのアニメーション化

更新 : 2007 年 11 月

このチュートリアルでは、非同期ポストバックの結果として更新された UpdatePanel コントロールをアニメーション化する方法について説明します。

Microsoft AJAX Library を使用すると、クライアント ページのライフ サイクル内のイベントを管理できます。そのためには、クライアントの PageRequestManager クラスのイベントを処理する必要があります。このチュートリアルでは、ページ上の特定のコントロールによって非同期ポストバックが発生する場合に、beginRequest イベントと pageLoaded イベントを使用して UpdatePanel コントロールをアニメーション化する方法について説明します。beginRequest イベントは、非同期ポストバックが開始され、ポストバックがサーバーに送信される前に発生します。pageLoaded イベントはポストバックおよび非同期ポストバックの実行中に発生します。このイベント中に、最新の非同期ポストバックの結果として作成および更新されるパネルに関する情報にアクセスできます (ポストバックではパネルが作成されるだけですが、非同期ポストバックではパネルが作成および更新されます)。

前提条件

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

  • Visual Studio 2008 または Visual Web Developer 2008 Express Edition。

  • AJAX 対応の ASP.NET Web サイト。

UpdatePanel コントロールをアニメーション化するクライアント スクリプトの作成

この手順では、アニメーション クラスを定義する ECMAScript (JavaScript または JScript) ファイルを作成します。このクラスには、HTML DOM 要素をアニメーション化するメソッドが含まれています。ブラウザでは、アニメーション化する UpdatePanel コントロールが div 要素として表されます。

UpdatePanel コントロールをアニメーション化するクライアント スクリプトを作成するには

  1. AJAX 対応の ASP.NET Web サイトで、JScript ファイルを追加し、UpdatePanelAnimation.js という名前を付けます。

  2. このファイルに次の JavaScript コードを追加します。

    Type.registerNamespace("ScriptLibrary");
    ScriptLibrary.BorderAnimation = function(startColor, endColor, duration) {
        this._startColor = startColor;
        this._endColor = endColor;
        this._duration = duration;
    }
    ScriptLibrary.BorderAnimation.prototype = {
        animatePanel: function(panelElement) {
            var s = panelElement.style;
            var startColor = this._startColor;
            var endColor = this._endColor;
            s.borderColor = startColor;
            window.setTimeout(
                function() {{ s.borderColor = endColor; }},
                this._duration
            );
        }
    }
    ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);
    
    var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 'gray', 1000);
    var postbackElement;
    
    Sys.Application.add_load(ApplicationLoadHandler);
    function ApplicationLoadHandler() {
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
    }
    
    function beginRequest(sender, args) {
        postbackElement = args.get_postBackElement();
    }
    function pageLoaded(sender, args) {
        var updatedPanels = args.get_panelsUpdated();
        if (typeof(postbackElement) === "undefined") {
            return;
        } 
        else if (postbackElement.id.toLowerCase().indexOf('animate') > -1) {
            for (i=0; i < updatedPanels.length; i++) {            
                panelUpdatedAnimation.animatePanel(updatedPanels[i]);
            }
        }
    
    }
    if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();
    
    Type.registerNamespace("ScriptLibrary");
    ScriptLibrary.BorderAnimation = function(startColor, endColor, duration) {
        this._startColor = startColor;
        this._endColor = endColor;
        this._duration = duration;
    }
    ScriptLibrary.BorderAnimation.prototype = {
        animatePanel: function(panelElement) {
            var s = panelElement.style;
            var startColor = this._startColor;
            var endColor = this._endColor;
            s.borderColor = startColor;
            window.setTimeout(
                function() {{ s.borderColor = endColor; }},
                this._duration
            );
        }
    }
    ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);
    
    var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 'gray', 1000);
    var postbackElement;
    
    Sys.Application.add_load(ApplicationLoadHandler);
    function ApplicationLoadHandler() {
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
    }
    
    function beginRequest(sender, args) {
        postbackElement = args.get_postBackElement();
    }
    function pageLoaded(sender, args) {
        var updatedPanels = args.get_panelsUpdated();
        if (typeof(postbackElement) === "undefined") {
            return;
        } 
        else if (postbackElement.id.toLowerCase().indexOf('animate') > -1) {
            for (i=0; i < updatedPanels.length; i++) {            
                panelUpdatedAnimation.animatePanel(updatedPanels[i]);
            }
        }
    
    }
    if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();
    

    コードは次のタスクを実行します。

    • registerNamespace メソッドを呼び出すことにより、ScriptLibrary 名前空間を登録します。

    • プロトタイプ デザイン パターンを使用して、ScriptLibrary 名前空間の BorderAnimation クラスを定義します。BorderAnimation クラスの animatePanel というメソッドは、アニメーション ロジックを定義します。

    • registerClass メソッドを呼び出して、BorderAnimation クラスを登録します。

    • BorderAnimation クラスの新しいインスタンスを作成します。アニメーションの色、既定の色、およびアニメーションの色を表示するミリ秒数の 3 つの値をクラス コンストラクタに渡します。

    • Sys.Application クラスの load イベントのイベント ハンドラを定義します。このクラスは、PageRequestManager クラスの beginRequest イベントおよび pageLoaded イベントのハンドラを定義します。

    • beginRequest イベント ハンドラには、ポストバックを発生させた要素の名前が保存されます。

    • ポストバック要素の ID に "animate" という単語が含まれる場合、コードは pageLoaded イベント ハンドラ内でアニメーションを実行します。

UpdatePanel コントロールに対するクライアント スクリプトの使用

この手順では、UpdatePanel コントロールを含むページでアニメーション スクリプトを使用します。パネルのコンテンツが更新されるときに、スクリプトによってパネルがアニメーション化されます。

UpdatePanel コントロールをアニメーション化するには

  1. 新しいページを作成し、デザイン ビューに切り替えます。

  2. ページに ScriptManager コントロールがまだない場合は、ツールボックス[AJAX Extensions] タブからドラッグします。

    UpdatePanel のチュートリアル

  3. ツールボックスUpdatePanel コントロールをダブルクリックして、ページに UpdatePanel コントロールを追加します。

    UpdatePanel のチュートリアル

  4. UpdatePanel コントロール内をクリックし、ツールボックスの [標準] タブで、Button コントロールを 2 回ダブルクリックして、2 つのボタンを UpdatePanel コントロールに追加します。

  5. 最初のボタンの Text プロパティを "Refresh with Animation" に設定し、ID を "AnimateButton1" に設定します。

  6. 2 番目のボタンの Text プロパティを "Refresh with no Animation" に設定します。ID は Button2 の既定値のままにします。

    UpdatePanel のチュートリアル

  7. ソース ビューに切り替えて、ページの head 要素の style ブロックに、次のスタイル ルールを追加します。

    <style type="text/css">
    #UpdatePanel1 {
      width: 300px;
      height: 100px;
      border:solid 1px gray;
    }    
    </style>
    
    <style type="text/css">
    #UpdatePanel1 {
      width: 300px;
      height: 100px;
      border:solid 1px gray;
    }    
    </style>
    

    このスタイル ルールでは、UpdatePanel コントロールのためにレンダリングされる div 要素の高さ、幅、および境界線が定義されます。

  8. asp:UpdatePanel 要素の ContentTemplate 要素内に次にコードを追加します。

    <%=DateTime.Now.ToString() %>
    
    <%=DateTime.Now.ToString() %>
    

    このコードは、マークアップが最後にレンダリングされた時刻を表示します。

  9. デザイン ビューに切り替え、ScriptManager コントロールを選択します。

  10. [プロパティ] ウィンドウで、Scripts プロパティをクリックします。次に、省略記号 ([…]) ボタンをクリックして、[ScriptReference コレクション エディタ] ダイアログ ボックスを表示します。

  11. [追加] をクリックしてスクリプト参照を追加します。

  12. スクリプト参照の Path プロパティを UpdatePanelAnimation.js (前の手順で作成した JavaScript ファイル) に設定します。

    UpdatePanel のチュートリアル

    ScriptManagerScripts コレクションを使用してスクリプト参照を追加し、Microsoft AJAX Library のコードの読み込み後にスクリプトが確実に読み込まれるようにします。

  13. [OK] をクリックして、[ScriptReference コレクション エディタ] ダイアログ ボックスを閉じます。

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

  15. [更新] ボタンをクリックして、パネルを更新します。

    パネルの境界線の色が短時間で変化することを確認します。

    <%@ 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 id="Head1" runat="server">
        <title>UpdatePanel Animation Example</title>
        <style type="text/css">
        #UpdatePanel1 {
          width: 300px;
          height: 100px;
          border:solid 1px gray;
        }    
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
            <asp:ScriptReference Path="UpdatePanelAnimation.js" />
            </Scripts>
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <%=DateTime.Now.ToString() %>
                    <asp:Button ID="AnimateButton1" runat="server" Text="Refresh with Animation" />
                    <asp:Button ID="Button2" runat="server" Text="Refresh with no Animation" />
                </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">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>UpdatePanel Animation Example</title>
        <style type="text/css">
        #UpdatePanel1 {
          width: 300px;
          height: 100px;
          border:solid 1px gray;
        }    
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
            <asp:ScriptReference Path="UpdatePanelAnimation.js" />
            </Scripts>
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <%=DateTime.Now.ToString() %>
                    <asp:Button ID="AnimateButton1" runat="server" Text="Refresh with Animation" />
                    <asp:Button ID="Button2" runat="server" Text="Refresh with no Animation" />
                </ContentTemplate>
            </asp:UpdatePanel>
    
        </div>
        </form>
    </body>
    </html>
    

レビュー

このチュートリアルでは、パネルのコンテンツが更新されるときに UpdatePanel コントロールに単純なアニメーションを表示する方法について説明しました。JavaScript ファイル内のコードは、UpdatePanel コントロールによってレンダリングされる HTML div 要素をアニメーション化します。JavaScript ファイルは ScriptManager コントロールの Scripts コレクションに追加します。スクリプト ファイルの主なロジックは、PageRequestManager クラスの beginRequest イベントおよび pageLoaded イベントのハンドラで定義します。

参照

概念

PageRequestManager のイベントの処理

参照

Sys.WebForms.PageRequestManager クラス

Sys.WebForms.PageLoadedEventArgs クラス