【ASP.NET コントロール】ASP.NET AJAX Control Toolkit (独自のエクステンダ・コントロール編)

目的・使いどころ

 * 既存のTextBoxなどのコントロールに対して、独自の「機能」を追加するために用いる。

サンプル1:確認ダイアログ表示

DialogButtonExtender.vb

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

DialogButtonDesigner.vb

Namespace MyExtender
    Public Class DialogButtonDesigner : Inherits ExtenderControlBaseDesigner(Of DialogButtonExtender)
    End Class
End Namespace

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) {

        // ダイアログを表示した後、イベントをキャンセル(ポストバックを抑制)
        if (window.confirm(this._message)) {

            location.href = "http://www.yahoo.co.jp/";

        } else {

            window.alert('キャンセルされました'); // 警告ダイアログを表示
        }

        return false;
    }
};

// BehaviorBaseオブジェクトを継承する
// MyExtender.DialogButtonBehaviorクラスを登録
MyExtender.DialogButtonBehavior.registerClass(
    'MyExtender.DialogButtonBehavior',
    Sys.Extended.UI.BehaviorBase);


補足

サーバサイド編

http://www.atmarkit.co.jp/fdotnet/dotnettips/947aspajaxcustomextender1/aspajaxcustomextender1.html

クライアントサイド編

http://www.atmarkit.co.jp/fdotnet/dotnettips/951aspajaxcustomextender2/aspajaxcustomextender2.html
 * ただし、上記を丸コピーじゃ、以下の例外を吐いて、動かない。

Assembly 'MyExtender, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null' contains a Web resource with name 'MyExtender.DialogButtonBehavior.js', but does not contain an embedded resource with name 'MyExtender.DialogButtonBehavior.js'

 * 以下を参考に修正する必要がある。
http://forums.asp.net/t/1518627.aspx/1?AjaxControlToolkit+is+not+defined+from+javascript+file#4431011
【修正前】
Modus.Controls.UpdatePanelDisable.UpdatePanelDisableBehavior.registerClass(
    'Modus.Controls.UpdatePanelDisable.UpdatePanelDisableBehavior', 
    AjaxControlToolkit.BehaviorBase);

【修正後】
Modus.Controls.UpdatePanelDisable.UpdatePanelDisableBehavior.registerClass(
    'Modus.Controls.UpdatePanelDisable.UpdatePanelDisableBehavior', 
    Sys.Extended.UI.BehaviorBase);


トラブル・シューティング

例外が発生した場合

 * ソリューション・エクスプローラから該当のファイルを選択したうえで、プロパティ・ウィンドウから[ビルド アクション]として「埋め込まれたリソース」を選択されているかを確認する
http://www.atmarkit.co.jp/fdotnet/dotnettips/951aspajaxcustomextender2/aspajaxcustomextender2.html