.NET TIPS

[ASP.NET AJAX]独自のエクステンダ・コントロールを作成するには?(サーバサイド編)[3.5、C#、VB]

山田 祥寛
2009/11/26

 エクステンダ・コントロールとは、(自分自身でユーザー・インターフェイスを提供するのではなく)既存のサーバ・コントロールに対して必要な機能(Ajax機能)だけを付与するコントロールのこと。ただ単に「エクステンダ」と呼ばれる場合もある。

 例えば、ASP.NET AJAX Control Toolkit(以降、Control Toolkit)ではあまたのサーバ・コントロールが提供されているが、その大部分はエクステンダに分類される。要は、既存のTextBoxやDropDownList、Panelなどのコントロールに対して、例えば入力補完やモーダル・ダイアログ、ポップアップ・カレンダーなどの「機能」を追加するわけである。

 ちなみに、Control Toolkitが提供するコントロールの数は執筆時点でおよそ40にも及ぶ。Control Toolkitが提供するコントロールを利用するだけでも、定型的な機能の多くを実現できるはずだ。しかし当然のことながら、Control Toolkitだけですべての要件を満たせるわけではない。アプリケーション固有の機能を、自分でコントロールとして実装したいというケースもままあるだろう。

 そこで本稿では、Control Toolkitが提供する基本クラスを継承して、独自のエクステンダ・コントロールを作成する方法について紹介する。本稿で作成するのは、標準のボタン・コントロール(Button、LinkButton、ImageButton)に対して、ダイアログ・ボックス表示機能を付与するDialogButtonコントロール(DialogButtonExtender)である。このDialogButtonコントロールは、ダイアログに表示するメッセージを表すMessageプロパティだけを定義しているものとする。

本稿で作成するDialogButtonコントロールの実行例
ボタンをクリックすると、あらかじめ決められたメッセージをダイアログ表示。

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

 なお、本稿で紹介するサンプル・プログラムを動作させるに当たっては、「TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?」で紹介した手順に従って、Control Toolkitを利用可能な状態にしておく必要がある。

1. 新規にプロジェクトを作成する

 かつて、Control Toolkitでは自作コントロール開発を支援するプロジェクトとして「ASP.NET AJAX Control Project」プロジェクトを用意していた。しかし、残念ながら、現在のControl Toolkitではコントロール作成のためのプロジェクト・テンプレートは取り除かれている。コントロールを作成する場合には、標準的な「クラスライブラリ」プロジェクトから行う必要がある。

 ここでは、プロジェクト名を「MyExtender」に設定したものとして、以降の説明を続ける。

2. プロジェクトに参照を追加する

 プロジェクトを作成したら、ソリューション・エクスプローラからプロジェクト名(ここでは「MyExtender」)を右クリックし、表示されたコンテキスト・メニューから[参照の追加]を選択する。

[参照の追加]ダイアログ

 [参照の追加]ダイアログが表示されるので、[.NET]タブから以下のアセンブリを追加してほしい。

  • System.Web
  • System.Web.Extensions
  • System.Design
  • System.Web.Extensions.Design

 さらに、[参照]タブからAjaxControlToolkit.dllへの参照も追加しておく。これで、エクステンダを開発する準備が整った。

3. デザイナ・クラスを定義する

 エクステンダ・コントロールの動作に最低限必要なファイルは、次のとおりである。

ファイル名 概要
XxxxxExtender.cs/XxxxxExtender.vb エクステンダ・クラス。コントロールのサーバサイド機能を定義するクラス
XxxxxDesigner.cs/XxxxxDesigner.vb デザイナ・クラス(コントロールのフォーム・デザイナ上での挙動を定義するためのクラス)
XxxxxBehavior.js Behaviorオブジェクト。コントロールのクライアントサイド機能を定義するクラス
エクステンダ・コントロールの動作に最低限必要なファイル

 そのほか、エクステンダの機能によっては、スタイルシートや画像ファイルなどのリソースが必要になる場合もあるが、最低限の構成としては、これら3ファイルと考えておけばよいだろう(スタイルシートや画像ファイルを組み込む例については、後日「TIPS:[ASP.NET AJAX]エクステンダ・コントロールにスタイルシートや画像を組み込むには?」で紹介する予定だ)。

 サーバ編となる本稿では、まずこれら必要なファイルの中から、サーバサイドの挙動にかかわるデザイナ・クラスとエクステンダ・クラスについて紹介する。

 まずは、デザイナ・クラスから見ていこう。エクステンダ・コントロールの場合、いわゆるフォーム・デザイナ上での見掛けは持たないので、デザイナ・クラスは空のものを用意しておけば差し支えない。以下のような外枠だけのクラスを用意しておこう。これは、ほかのエクステンダを定義する場合も同様である。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using AjaxControlToolkit.Design;

namespace MyExtender {
  class DialogButtonDesigner : ExtenderControlBaseDesigner<DialogButtonExtender> { }
}
Imports AjaxControlToolkit.Design

Namespace MyExtender
  Public Class DialogButtonDesigner : Inherits ExtenderControlBaseDesigner(Of DialogButtonExtender)
  End Class
End Namespace
DialogButtonコントロールのデザイナ・クラス(上がDialogButtonDesigner.cs、下がDialogButtonDesigner.vb)

 デザイナ・クラスであることの条件は、ExtenderControlBaseDesigner<T>クラス(AjaxControlToolkit.Design名前空間)を継承するという点だけだ。ジェネリックの型パラメータには、対応するエクステンダ・クラスを指定すればよい*1

*1 この時点では、エクステンダ・クラスを用意していないので、当然、コンパイルはエラーとなるが、気にせず先に進もう。

4. エクステンダ・クラスを定義する

 次に、エクステンダ・コントロールのサーバサイド機能を定義するエクステンダ・クラスを用意する。もっとも、サーバサイド機能とはいっても、多くの場合はさほどのものではない。

 Ajax対応のエクステンダでは、その機能の大部分はBehaviorオブジェクト(JavaScript)で提供されるので、エクステンダ・クラスで定義する必要があるのは、コントロールとして公開すべきプロパティの定義と、デザイナ・クラス/Behaviorオブジェクトの宣言(関連付け)程度であると考えておけばよいだろう。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;

[assembly:WebResource("MyExtender.DialogButtonBehavior.js", "text/javascript")] 
namespace MyExtender {

  [Designer(typeof(DialogButtonDesigner))]
  [ClientScriptResource("MyExtender.DialogButtonBehavior", "MyExtender.DialogButtonBehavior.js")]
  [TargetControlType(typeof(IButtonControl))] 
  public class DialogButtonExtender : ExtenderControlBase { 

    // Messageプロパティを定義
    [ExtenderControlProperty]
    [DefaultValue("")]  
    public string Message {
      get {
        return GetPropertyValue("Message", ""); 
      }
      set {
        SetPropertyValue("Message", value);  
      }
    }
  }
}
Imports System.ComponentModel
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports AjaxControlToolkit
Imports MyExtender.MyExtender

<Assembly: WebResource("MyExtender.DialogButtonBehavior.js", "text/javascript")> 
Namespace MyExtender

  <Designer(GetType(DialogButtonDesigner))> _
  <ClientScriptResource("MyExtender.DialogButtonBehavior", "MyExtender.DialogButtonBehavior.js")> _
  <TargetControlType(GetType(IButtonControl))>
  Public Class DialogButtonExtender : Inherits ExtenderControlBase 

    ' Messageプロパティを定義
    <ExtenderControlProperty()> _
    <DefaultValue("")> _  
    Public Property Message() As String
      Get
        Return GetPropertyValue("Message", "") 
      End Get
      Set(ByVal value As String)
        SetPropertyValue("Message", value)  
      End Set
    End Property
  End Class
End Namespace
+++/スクリプト+++
DialogButtonコントロールのエクステンダ・クラス(上がDialogButtonExtender.cs、下がDialogButtonExtender.vb)
各番号については以下で説明する。

 一見すると複雑なコードにも見えるが、前述したように、その大部分は属性による宣言であるにすぎない。ポイントさえ押さえてしまえば、ごく定型的な記述であることがお分かりになるはずだ。

エクステンダ・クラスはExtenderControlBaseクラスを継承する

 ExtenderControlBaseクラス(AjaxControlToolkit名前空間)は、クライアントサイド・スクリプトの管理をはじめ、Behaviorオブジェクトとのプロパティ値の受け渡し、ターゲット要素とのひも付けなど、エクステンダ・コントロールの動作には欠かせない基本的な機能を提供するクラスである。エクステンダ・クラスを定義する場合には、原則、このExtenderControlBaseクラスを継承する必要がある。

エクステンダ・クラスに必要な属性定義

 前述したように、エクステンダ・クラスの大部分は、関連するリソースとのひも付けを表す属性宣言である。以下に、エクステンダ・クラスでよく使う属性をまとめておこう。

名前空間 属性 設定内容
AjaxControlToolkit [C]ClientScriptResource(type, path) 組み込むBehaviorオブジェクト(型とパス。パスは「プロジェクト名.フォルダ名.ファイル名」の形式)
[P]ExtenderControlProperty() プロパティをBehaviorオブジェクトに関連付けるか(クライアントサイドでアクセス可能にするか)
[P]RequiredProperty() プロパティが必須であるか
[P]ClientPropertyName(name) Behaviorオブジェクトにおけるプロパティ名(省略時はエクステンダ・クラスと同名)
System.Web.UI [A]WebResource(path, mime) アセンブリに組み込むリソース(パスとコンテンツタイプ。パスは「プロジェクト名.フォルダ名.ファイル名」の形式)
[C]TargetControlType(type) ターゲット要素の型
System.ComponentModel [C]Designer(type) デザイナ・クラスの型
[P]DefaultValue(default) プロパティのデフォルト値
System.Drawing [C]ToolboxBitmap(type, path) ツールボックスに表示するアイコン画像(型とパス。パスは「プロジェクト名.フォルダ名.ファイル名」の形式)
エクステンダ・クラスで利用可能な主な属性
属性名の前方の記号は、属性の利用場所を表す。[A]はアセンブリ・レベル、[C]はクラス・レベル、[P]はプロパティ・レベル。

 TargetControlType属性は、エクステンダを適用できるコントロールを制限するための属性だ。

 例えば、本稿で紹介しているDialogButtonコントロールであれば、ボタンに適用することを想定したエクステンダであるので、ターゲット要素の型としてIButtonControlを指定している。これによって、IButtonControlインターフェイスを実装したButton、LinkButton、ImageButtonコントロールにのみエクステンダを適用できるようになる。

プロパティ値の取得/設定はGetPropertyXxxxxValue/SetPropertyXxxxxValueメソッドで

 GetPropertyXxxxxValue/SetPropertyXxxxxValueメソッド*2は、ExtenderControlBaseクラスで公開されたクラスで、プロパティ値をBehaviorオブジェクト(JavaScript)と受け渡しするのに必要な処理を行う。

 エクステンダ・クラスでプロパティを宣言する場合には、プロパティにExtenderControlProperty属性を付与するだけではなく、読み書きのコードをGetPropertyXxxxxValue/SetPropertyXxxxxValueメソッドで行う必要がある。

*2 Xxxxxの部分には、プロパティのデータ型に応じてBool、Int、Stringなどを指定できる。

 以上、今回はエクステンダ・コントローラに必要な要素のうち、サーバサイドの挙動を決めるデザイナ・クラス、エクステンダ・クラスについて解説した。後日公開予定の「TIPS:[ASP.NET AJAX]自作のエクステンダ・コントロールを作成するには?(クライアントサイド編)」では、残るBehaviorオブジェクトを定義するとともに、自作したエクステンダを実際に利用する方法について解説する。End of Article

利用可能バージョン:.NET Framework 3.5
カテゴリ:Webフォーム 処理対象:ASP.NET AJAX
関連TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?
関連TIPS:[ASP.NET AJAX]自作のエクステンダ・コントロールを作成するには?(クライアントサイド編)(後日公開予定)
関連TIPS:[ASP.NET AJAX]エクステンダ・コントロールにスタイルシートや画像を組み込むには?(後日公開予定)

この記事と関連性の高い別の.NET TIPS
[ASP.NET AJAX]独自のエクステンダ・コントロールを作成するには?(クライアントサイド編)
[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?
[ASP.NET AJAX]ローカリゼーション対応を行うには?(アセンブリ組み込み編)
[ASP.NET AJAX]AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには?
[ASP.NET AJAX]DropDownコントロールでSharePoint風のドロップダウン・メニューを作成するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間