Tweet

.NET TIPS ［ASP.NET AJAX］独自のエクステンダ・コントロールを作成するには？（クライアントサイド編）［3.5、C#、VB］ 山田 祥寛 2009/12/03

　本稿は「TIPS：［ASP.NET AJAX］独自のエクステンダ・コントロールを作成するには？（サーバサイド編）」の続きである。サーバサイド編では、エクステンダ・コントロールに必要な要素のうち、サーバサイド（サーバ・コントロール）の挙動にかかわるデザイン・クラスとエクステンダ・クラスとについて解説した。

　本稿では、引き続きクライアントサイドの挙動を定義するBehaviorオブジェクトを作成するとともに、出来上がったエクステンダを.aspxファイルから呼び出す方法について解説する。

　サーバサイド編でも示したが、本稿で作成するDialogButtonコントロール（DialogButtonExtender）の実行結果は次の画面のようになる。

本稿で作成するDialogButtonコントロールの実行例

ボタンをクリックすると、あらかじめ決められたメッセージをダイアログ表示

　それではさっそく、実装の手順を見ていくことにしよう。

1. Behaviorオブジェクトを定義する

　サーバサイド編でも触れたように、Behaviorオブジェクトはエクステンダのクライアントサイド機能を定義するためのJavaScriptのクラスである。サーバサイドのデザイナ・クラスはその中身が空で、そのペアとなるエクステンダ・クラスも単なる宣言の塊であったのに対して、Behaviorオブジェクトはエクステンダの挙動を決める――実質、エクステンダ・コントロールの中核を担うクラスであるといえる。

　次のコードは、独自のBehaviorオブジェクト「DialogButtonBehavior」を定義するDialogButtonBehavior.jsファイルの内容だ。

// MyExtender名前空間を宣言 Type.registerNamespace("MyExtender"); // MyExtender.DialogButtonBehaviorクラスのコンストラクタ MyExtender.DialogButtonBehavior = function(element) {   // 基底クラスのコンストラクタをコール   MyExtender.DialogButtonBehavior.initializeBase(this, [element]);   // Messageプロパティの値を格納するためのプライベート変数を初期化   this._Message = ''; } // MyExtender.DialogButtonBehaviorクラスのメソッドを定義 MyExtender.DialogButtonBehavior.prototype = {   // Behaviorオブジェクトを初期化   initialize: function() {   // 基底クラスのinitializeメソッドをコール     MyExtender.DialogButtonBehavior.callBaseMethod(this, 'initialize');     // ターゲット要素にclickイベント・ハンドラを関連付け     $addHandler(       this.get_element(),       'click',       Function.createDelegate(this, this._onClick)     ); },   // Messageプロパティのゲッター・メソッド   get_Message: function() {       return this._message;   },   // Messageプロパティのセッター・メソッド   set_Message: function(value) {     // 設定値が元の値と異なる場合にのみ変更処理を実施     if (this._message !== value) {       this._message = value;       this.raisePropertyChanged('Message');      }   },   // ターゲット要素がクリックされたときの処理   _onClick: function(e) {      // ダイアログを表示した後、イベントをキャンセル（ポストバックを抑制）     window.alert(this._message);     return false;   } }; // BehaviorBaseオブジェクトを継承する // MyExtender.DialogButtonBehaviorクラスを登録 MyExtender.DialogButtonBehavior.registerClass(   'MyExtender.DialogButtonBehavior',   AjaxControlToolkit.BehaviorBase);

DialogButtonコントロールの挙動を規定するBehaviorオブジェクト（DialogButtonBehavior.js）

　なお、Behaviorオブジェクトを新たに作成した場合、ソリューション・エクスプローラから該当のファイルを選択したうえで、プロパティ・ウィンドウから［ビルド アクション］として「埋め込まれたリソース」を選択する必要がある。さもないと、Behaviorオブジェクトがアセンブリに組み込まれなくなってしまうので、要注意だ。

Behaviorオブジェクトは埋め込みリソースとして定義する

　それでは、コードの内容について、ポイントを押さえていこう。なお、JavaScriptでクラスを定義する方法については、「Microsoft AJAX Libraryで実践オブジェクト指向JavaScript」が詳しいので、併せて参照していただくとよい。

AjaxControlToolkit.BehaviorBaseクラスを継承すること

　AjaxControlToolkit.BehaviorBaseクラスは、エクステンダ・クラスとのプロパティ値の受け渡しをはじめ、Behaviorオブジェクトに必要な最低限の機能を提供するものだ。Behaviorオブジェクトは、原則として、このBehaviorBaseオブジェクトを継承している必要がある。

エクステンダ・クラスのプロパティと対応していること

　エクステンダ・クラスで公開されたプロパティをBehaviorオブジェクトで利用するには、Behaviorオブジェクトで対応するプロパティ（アクセサ・メソッド）を用意しておく必要がある。ここでは、get_Messageメソッドとset_Messageメソッドがそれだ。

　アクセサ・メソッドの名前は、「get_＜プロパティ名＞」「set_＜プロパティ名＞」の形式で命名する必要がある（大文字小文字も区別される）。

プロパティ値の変更はraisePropertyChangedメソッドで通知

　プロパティ値を変更した場合、raisePropertyChangedメソッドを使ってプロパティ値の変更を通知するのが作法だ。このサンプルでは、特にこの通知を受け取って何かをしているわけではないので、省略しても動作には支障ないが、Behaviorオブジェクトとしての汎用性と後々の拡張を考慮するならば、このようなわずかな手間を惜しむ理由はないだろう。

イベント・ハンドラを登録する

　ここでは、ターゲット要素でclickイベントが発生したタイミングで、ダイアログ・ボックスを表示する必要がある。このためのイベント・ハンドラを定義するのが、$addHandlerショートカット関数の役割である。

　Behaviorオブジェクトでターゲット要素を取得するには、get_elementメソッドをコールすればよい。これによって、ここではエクステンダに関連付いたボタンを取得することができる。

2. DialogButtonコントロールを配置する

　以上で、エクステンダの準備は完了だ。プロジェクトをビルドすると、プロジェクト・フォルダ配下の「bin/Release」フォルダ（または「bin/Debug」フォルダ）配下に「プロジェクト名.dll」（ここではMyExtender.dll）ができているはずだ。

　これを、DialogButtonコントロールを利用するWebサイト配下のBinフォルダに配置しよう。また、「TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？」で紹介した要領で、ツールボックスにエクステンダを登録しておくこと。

ツールボックスに登録されたエクステンダ・コントロール

3. 新規のWebフォームを作成する

　新規のWebフォーム（DialogButton.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する。

Webフォーム（DialogButton.aspx）のフォーム・レイアウト

以下のコントロールを配置する。

ScriptManagerコントロール（IDは「manager」）。   Buttonコントロール（IDは「btnSend」、Textは「決定」）。

　あとは、Buttonコントロールに対してDialogButtonコントロールを関連付けるだけだ。Buttonコントロール右肩のタスク・メニューから［エクステンダの追加］を選択する。

［エクステンダ ウィザード］ダイアログ

　［エクステンダ ウィザード］ダイアログが起動するので、エクステンダの一覧から「DialogButtonExtender」を選択し、ID値には「dbe」と指定しておこう。これでButtonコントロール「btnSend」にDialogButtonコントロールが適用された。

　DialogButtonコントロールのプロパティは、（エクステンダそのものではなく）関連付けたコントロールのプロパティとして設定する必要がある点に注意してほしい。この場合であれば、Buttonコントロール「btnSend」のプロパティ・ウィンドウに「dbe」（DialogButtonコントロールのID値）という項目が追加されているので、この項目の配下から個々の値を設定することができる。ここでは、Messageプロパティに「こんにちは、エクステンダ！」という文字列だけを設定しておく*1。

　以上の手順を終えたら、サンプルを実行してみよう。冒頭の画面のように、ボタンをクリックしたタイミングで、ダイアログ・ボックスが表示されればエクステンダは正しく動作している。

　本稿では、エクステンダ独自の基本を押さえるという意味で、まずは最小限の構成でエクステンダを作成してみたが、本格的にエクステンダを実装するうえでは知っておきたい事項はあまたある。

　例えば、エクステンダからの出力をきれいにレイアウトしたい場合には、エクステンダに画像やスタイルシートを組み込みたいこともあるだろう。また、エクステンダをJavaScriptコードから操作するためのイベントを定義したいということもあるかもしれない。はたまた、そもそもエクステンダからサーバ側に対して非同期通信を行いたいというケースもあるだろう。

　これらのケースについては、それぞれ後日「TIPS：［ASP.NET AJAX］エクステンダ・コントロールでイベントを定義するには？」「TIPS：［ASP.NET AJAX］エクステンダ・コントロールにスタイルシートや画像を組み込むには？」「TIPS：［ASP.NET AJAX］エクステンダ・コントロールから非同期通信を行うには？」で紹介する予定である。

この記事と関連性の高い別の.NET TIPS ［ASP.NET AJAX］独自のエクステンダ・コントロールを作成するには？（サーバサイド編） ［ASP.NET AJAX］ローカリゼーション対応を行うには？（アセンブリ組み込み編） ［ASP.NET AJAX］MultiHandleSliderコントロールで複数ハンドルのスライダを作成するには？ ［ASP.NET AJAX］クライアントサイド・スクリプトからASP.NETのプロファイル機能を利用するには？ ［ASP.NET AJAX］ダイナミック・コンテキスト機能で構造化データを受け渡しするには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）