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

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

更新日: 2007/08/10
公開日: 2007/08/03

ポスト

ソリューションの作成

　今回は1つのソリューション内にプロジェクトとWebサイト両方を作成します。［ファイル］-［追加］-［新しいWebサイト］を選択してください。ASP.NET AJAXのコントロールを自作して利用するので、Webサイトテンプレートの「Default.aspx」にScriptManager（またはToolkitScriptManager）が配置されている［AJAX Control Toolkit Web Site］か［ASP.NET AJAX-Enabled Web Site］のテンプレートを選びましょう。どちらでも構いませんが、ここでは［AJAX Control Toolkit Web Site］を選択します。

ToolkitScriptManagerについて

　ToolkitScriptManagerとは、6月6日のバージョンアップから追加されたコントロールで、詳細は後篇で説明します。

　なお、このまま実行すると、先に作成された［ASP.NET AJAX Control Project］プロジェクト（クラスライブラリプロジェクト）が実行されてしまい、エラーが発生してしまいます。エラーを回避するために追加したWebサイトを右クリックして、［スタートアッププロジェクトに設定］を選択し、Webサイトが実行されるように設定しましょう。

Extenderコントロールに必要な記述

　［ASP.NET AJAX Control Project］プロジェクトが生成するファイルは、テンプレートでコードが自動生成されます。その中でいくつか肝となる部分がありますので、「Extender.vb」ファイルと「Behavior.js」ファイルの2点に焦点を絞って紹介します。

　まずはじめに、Extenderコントロールの作成に必要な記述として「Extender.vb」を説明します。実際にどのように記述するかも併記しますので、確認してください。

AjaxControlToolkit名前空間の定義

Imports AjaxControlToolkit

自作Extenderコントロールの名前空間の定義

Namespace ［名前空間名（既定ではプロジェクト名）］

自作Extenderコントロール上で利用するJavaScriptファイルのリソース登録

<Assembly: System.Web.UI.WebResource(
"［プロジェクト名］.［Behaviorファイル名］.js", "text/javascript")>

自作Extenderコントロールのフォームデザイナ上のデザインを指定したファイルの登録

<Designer(GetType(［Designerファイル名］))>

ExtenderControlBaseクラスのインスタンスを指定したJavaScriptファイルと紐付ける

<ClientScriptResource("［プロジェクト名］.［Behaviorファイル名］",
 "［プロジェクト名］. ［Behaviorファイル名］.js")>

TargetControlIDプロパティとして設定するコントロールを指定

<TargetControlType(GetType(クラス名))>

自作Extenderコントロールクラスを作る際に、ExtenderControlBaseクラスの継承

Inherits ExtenderControlBase

Extender.vbファイル上のプロパティとBehavior.jsファイルのプロパティを連動するための設定

<ExtenderControlProperty()>

プロパティ設定の中で、Behavior.jsファイルと値を共有するためのメソッドの記述

GetPropertyValue("プロパティ名", 値)
SetPropertyValue("プロパティ名", value)

TargetControlType内で指定するクラス名とインターフェイス名について

　<TargetControlType(GetType(クラス名))>の属性部分で指定するクラス名はSystem.Web.UI名前空間とSystem.Web.UI.WebControls名前空間のクラス名かインターフェイス名になります。例えば、ButtonコントロールとLinkButtonコントロールなど、ボタン系のコントロールを対象にしたい場合はIButtonControlインターフェイスを指定することでTargetControlIDプロパティにボタン系コントロールを設定できるようになります。

　続いて「Behavior.js」について説明します。

Extender.vbファイル上で定義した名前空間の定義.

Type.registerNamespace('[プロジェクト名]');

Behavior.jsファイルのクラスのコンストラクタを作成（初期化設定の記述内で、次の構文を書く必要がある）

［プロジェクト名］.［クラス名］= 
  function(element) { 初期化設定の記述 }

継承元すべてのメンバを［名前空間名］.［クラス名］のクラスに引き継ぎ初期化（initializeBase関数はMicrosoft AJAX Libraryの中で定義されている関数）

［プロジェクト名］.［クラス名］.initializeBase(this, [element]);

［クラス名］クラスの定義を行う（この中にイベントハンドラ、関数、プロパティなどを記述する）

［プロジェクト名］.［クラス名］.prototype = {}

対象の親クラスの初期化を呼び出す（callBaseMethod関数はMicrosoft AJAX Libraryの中で定義されている関数）

［プロジェクト名］.［クラス名］.callBaseMethod(this, 'initialize');

対象のクラスの破棄を行う

［プロジェクト名］.［クラス名］.callBaseMethod(this, 'dispose');

Extender.vbファイル上のプロパティと連動するプロパティ関数

get_［プロパティ名］ : function() {}
set_[プロパティ名] : function() {}

コンストラクタやクラスの登録を行う（registerClass関数はMicrosoft AJAX Libraryの中で定義されている関数）

［プロジェクト名］.［Behaviorファイル名］.registerClass(
  '［プロジェクト名］.［Behaviorファイル名］',
  AjaxControlToolkit.BehaviorBase);

　ここに記述した項目はすべてテンプレートが自動生成してくれますが、それぞれどういった意味をもった構文なのか理解をすることが重要です。次の節ではこれらの構文を成り立たせる上で非常に重要なExtenderControlBaseクラスについて説明します。

ExtenderControlBaseクラスとは

　ExtenderControlBaseクラスは、ASP.NET AJAXとASP.NET AJAX Control Toolkitの間を繋ぐ抽象クラスです。また、ASP.NET AJAX Control Toolkitのほとんどのクラスの親クラスとして利用されています。ExtenderControlBaseクラスの他にはExtenderControlBaseクラスを継承したAnimationExtenderControlBaseクラスと、AnimationExtenderControlBaseクラスを継承したDynamicPopulateExtenderControlBaseクラスがあります。

ExtenderControlBaseを継承したクラス（28）

AccordionExtender
AlwaysVisibleControlExtender
AnimationExtenderControlBase
CalendarExtender
CascadingDropDown
CollapsiblePanelExtender
ConfirmButtonExtender
DraggableListItemExtender
DropShadowExtender
DropWatcherExtender
DragPanelExtender
DynamicPopulateExtender
ExtenderControlBaseDesigner<T>
FilteredTextBoxExtender
HoverExtender
MaskedEditExtender
MutuallyExclusiveCheckBoxExtender
NoBotExtender
NumericUpDownExtender
PagingBulletedListExtender
PasswordStrength
RatingExtender
ResizableControlExtender
RoundedCornersExtender
SliderExtender
SlideShowExtender
TextBoxWatermarkExtender
ToggleButtonExtender

AnimationExtenderControlBaseを継承したクラス（7）

AnimationExtender
AutoCompleteExtender
DynamicPopulateExtenderControlBase
ListSearchExtender
PopupExtender
UpdatePanelAnimationExtender
ValidatorCalloutExtender

DynamicPopulateExtenderControlBaseを継承したクラス（4）

DropDownExtender
HoverMenuExtender
ModalPopupExtender
PopupControlExtender

図6 ExtenderBaseとその派生クラス

　ASP.NET AJAXとASP.NET AJAX Control Toolkitを繋ぐための、ExtenderControlBaseクラスの主な機能は次の3つです。

Extenderコントロール（HTML要素）と振る舞い（JavaScript）の間で接続を行う
正しいスクリプトをロードするためScriptManager（ToolkitControlManager）コントロールと対話しながら、管理をする
対象のコントロールを制御するためのTargetControlTypeAttribute属性の提供

　実際にExtenderControlBaseクラスを継承して利用する場合には、ほとんどの機能は意識せずに利用できますが、いくつかのプロパティとメソッドは利用することがあると思うので以下の表を参考にしてください。

ExtenderControlBaseクラスが提供するメソッド

メソッド名	説明
GetPropertyValue(propertyname, nullValue)	Getプロパティ内で利用されるメソッドで、第一引数の値がnull（nothing）ではない場合に値を取得する。第一引数がViewstateのキーとして扱われ、第二引数の値をプロパティウィンドウに表示する値として扱われる。
SetPropertyValue(propertyname, nullValue)	Setプロパティ内で利用されるメソッドで、上記同様にViewStateを利用しているが、プロパティウィンドウで設定した値をJavaScriptファイルと連動し、振る舞い（Behaviors.jsファイル上）の処理に利用することができる。
CheckIfValid(throwException)	プロパティが正しくセットされたかどうか調べるメソッド（引数はBool型で、例外が無効になっている場合に限りTrueを設定）。
EnsureValid()	派生クラスのプロパティ検証をするためにレンダリングの間呼び出されるメソッド。

　また、このExtenderControlBaseクラスを継承して利用する時には、AjaxControlToolkit名前空間の属性を利用することになるので以下の属性は最低限押さえておきましょう。

AjaxControlToolkit名前空間の代表的な属性

属性名	説明
ClientScriptResource(componentType, fullResourceName)	ExtenderControlBaseクラスを継承したクラスのインスタンスと、ここに指定されたリソースのスクリプトファイルを結びつける。第一引数のcomponentTypeにJavaScriptファイルのクラス名を、第二引数のfullResourceNameにBehavior.jsファイルのパスを記述する必要あり。
ClientCssResource(fullResourceName)	ExtenderControlBaseクラスを継承したクラスのインスタンスと、ここに指定されたCSSファイルを結びつける。上記同様に、引数fullResourceName にCSSファイルのパスを記述する必要有り
ExtenderControlProperty()	この属性が記述されたプロパティはBehavior.jsファイルの同名プロパティと紐付けられる。つまり、クライアントサイドの振る舞いに関係するプロパティすべてに属性として記述する必要あり。
ClientPropertyName(propertyName)	Behavior.jsファイルのスクリプトコード上でExtender.vbファイル上で宣言した名前と異なるプロパティ名を宣言することができる。引数propertyNameにBehavior.jsファイル上で使用したい名前を記述する必要あり。
RequiredScript(extenderType, loadOrder)	指定されたクラスを読み込んで、そのクラスが組み込んで利用しているスクリプトファイルが利用できる。読み込むクラスの数だけ宣言が可能な属性。第一引数で読み込むクラスの指定を、第二引数は任意だが、もし、Behavior.jsファイルの中で別のBehavior.jsファイルを参照している場合は、参照元のBehavior.jsファイルを記述する必要あり（詳細は後述）。

　テンプレートを利用してプロジェクトを作成した場合は、テンプレートにより骨組みはほとんどできているので、必要な部分だけ修正や書き加えるだけで利用できます。ExtenderControlBaseクラスに関する説明は以上です。実際開発する前に一度ExtenderControlBase.csクラスや各Attributeクラスも目を通すとExtenderコントロールクラスの作成がもっと楽になるかと思います。

次のページ
テンプレートの修正

この記事は参考になりましたか？

印刷用を表示

ポスト

ASP.NET AJAXで学ぶAJAX対応コントロール実装の基本連載記事一覧: ASP.NET AJAXで学ぶAJAX対応コントロール実装の基本（後篇）

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

この記事の著者: 山田祥寛（ヤマダヨシヒロ）

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編」他、著書多数。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事; WINGSプロジェクト　ナオキ（ナオキ）

＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事