ASP.NET AJAXで学ぶAJAX対応コントロール実装の基本（前篇）

ASP.NET AJAX Controlの作成方法を学習する

ASP.NET AJAXと同様に、ASP.NET AJAX Control Toolkitも非常に便利な開発ツールです。開発の幅を広げるのに役立ちますが、使っているうちにもう少し利用しやすいコントロールが欲しいと思うことがあるかもしれません。本稿ではASP.NET AJAX Control Toolkit Extenderを利用して自作のExtenderコントロールを作成する方法を学習します。

はじめに

　ASP.NET AJAX V1.0も使い慣れてきた方がいると思います。しかしASP.NET AJAX Controlは英語圏で使うことを想定して作られているため、日本で扱うには少々扱いづらいコントロールが存在することも事実です。そういったコントロールをカスタマイズするためにも、本稿ではASP.NET AJAXコントロールを自作する方法について、またAJAXの機能は持たずとも、コントロールに対してちょっとした機能拡張を行うためのExtenderコントロールの作成方法について学習していきたいと思います。

対象読者

• ASP.NET 2.0を使ったことがある方
• ASP.NET AJAXに興味がある方
• AJAXに興味がある方
• JavaScriptを使える方

必要な環境と準備

• Visual Studio 2005（以下、VS）もしくは、J#、C++を除くExpress Edition
• ASP.NET AJAX V1.0
• ASP.NET AJAX Control Toolkit

　ASP.NET AJAXの入手方法、インストール方法はこちらの記事を参照してください。また、Control Toolkitの入手方法と利用方法はこちらの記事を参照してください。

Extenderコントロール作成のためにプロジェクトを作成する

　Control Toolkitの利用方法の解説でASP.NET AJAX Control Toolkit Extenderのテンプレートのインストールが完了していると思うので、Visual Studio 2005の［ファイル］-［新しいプロジェクト］から［ASP.NET AJAX Control Project］のテンプレートを選択し、プロジェクト名を決めて［OK］をクリックします（図1）。今回はVBによるプロジェクト作成ですが、実際にはC#による作成も可能です。また、この［ASP.NET AJAX Control Project］テンプレートはVB 2005 Express EditionとC# 2005 Express Editionでも利用できます。

図1 新しいプロジェクトのダイアログ

　［OK］ボタンをクリックすると次のようなソリューションが出来上がります。既定で3種類のファイルが作成されます（図2）。

図2 ソリューションエクスプローラ

表1

ファイル名	概要
プロジェクト名+Behavior.js（以下xxxBehavior.js）	コントロールにどういった振る舞いを持たせるかをJavaScriptで直接記述するファイル。
プロジェクト名+Designer.vb（以下xxxDesigner.vb）	フォームデザイナ上でコントロールを張り付けた時に表示されるコントロールのデザインが必要な場合は記述するが、基本的なExtenderコントロールの場合は記述する必要がないファイル。
プロジェクト名+Extender.vb（以下xxxExtender.vb）	コントロールのExtenderを作ることを管理して、デザイン時にプロパティをセットすることができるサーバーサイドのコントロールクラス。Extenderにセットされるプロパティを設定します。このプロパティはデザイン時にプロパティウィンドウやスマートタグから、コード記述時に直接記述することでアクセスでき、xxxBehavior.jsファイルで設定されるプロパティとマッチします。

　ほとんどのExtenderコントロールはxxxExtender.vbファイルとxxxBehavior.jsファイルの2種類を設定することで作成可能です。xxxDesigner.vbを利用するのは、Ratingコントロールや、ReorderListコントロールなど、既存のコントロールの機能拡張では無く、そのコントロールだけで利用できるコントロールを作成する際に必要になります。

　ただし、xxxDesigner.vbに書き込むにはレンダリングされるHTMLの記述や、デザイン時のプロパティに応じた表示の変更に対応したコーディング、必要に応じてスマートタグの記述などが必要になってきます。本稿ではxxxDesigner.vbの内容はテンプレートで作成された状態から手を加えませんのでご了承ください。

HelloAjaxControlExtenderコントロールを作成する

　それでは実際にアプリケーションを作成して、AJAX Control Extenderの動作を確認しましょう。コントロール全般を拡張するExtenderコントロールを作成します。肝心の拡張内容は次のとおりです。

• TargetControlIDプロパティに設定したコントロール（サンプルはラベル）の上にマウスオーバーさせた時に、アラートを表示する
• アラート表示後に対象のButtonコントロール（<asp:Button --/>）1つの利用状態を可能・不可能に切り替える

　上記から分かるように本稿は学習をメインに進めていくので、作成サンプルは実際に活用できるExtenderコントロールではありません。完成したExtenderコントロールは図3～5のように動作します。

図3 初期表示画面

図4 マウスオーバーイベントを発生させた画面

図5 マウスオーバーイベント終了後の画面