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

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

更新 : 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 コントロールをアニメーション化するクライアントスクリプトを作成するには

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

このファイルに次の 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 コントロールをアニメーション化するには

新しいページを作成し、デザインビューに切り替えます。
ページに ScriptManager コントロールがまだない場合は、ツールボックスの [AJAX Extensions] タブからドラッグします。
ツールボックスで UpdatePanel コントロールをダブルクリックして、ページに UpdatePanel コントロールを追加します。
UpdatePanel コントロール内をクリックし、ツールボックスの [標準] タブで、Button コントロールを 2 回ダブルクリックして、2 つのボタンを UpdatePanel コントロールに追加します。
最初のボタンの Text プロパティを "Refresh with Animation" に設定し、ID を "AnimateButton1" に設定します。
2 番目のボタンの Text プロパティを "Refresh with no Animation" に設定します。ID は Button2 の既定値のままにします。
ソースビューに切り替えて、ページの 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 要素の高さ、幅、および境界線が定義されます。
asp:UpdatePanel 要素の ContentTemplate 要素内に次にコードを追加します。
```
<%=DateTime.Now.ToString() %>
```
```
<%=DateTime.Now.ToString() %>
```
このコードは、マークアップが最後にレンダリングされた時刻を表示します。
デザインビューに切り替え、ScriptManager コントロールを選択します。
[プロパティ] ウィンドウで、Scripts プロパティをクリックします。次に、省略記号 ([…]) ボタンをクリックして、[ScriptReference コレクションエディタ] ダイアログボックスを表示します。
[追加] をクリックしてスクリプト参照を追加します。
スクリプト参照の Path プロパティを UpdatePanelAnimation.js (前の手順で作成した JavaScript ファイル) に設定します。

ScriptManager の Scripts コレクションを使用してスクリプト参照を追加し、Microsoft AJAX Library のコードの読み込み後にスクリプトが確実に読み込まれるようにします。
[OK] をクリックして、[ScriptReference コレクションエディタ] ダイアログボックスを閉じます。
変更内容を保存し、Ctrl キーを押しながら F5 キーを押して、ブラウザでページを表示します。

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

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

<%@ 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 クラス

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

前提条件

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

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

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

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

レビュー

参照

概念

参照

その他のリソース

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

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

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