目的・使いどころ
* 既存の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://blogs.msdn.com/b/tsmatsuz/archive/2007/01/16/asp-net-ajax-1-0-4-extender-control-toolkit.aspxhttp://www.atmarkit.co.jp/fdotnet/aspnetajax/aspnetajax02/aspnetajax02_01.html
トラブル・シューティング
例外が発生した場合
* ソリューション・エクスプローラから該当のファイルを選択したうえで、プロパティ・ウィンドウから[ビルド アクション]として「埋め込まれたリソース」を選択されているかを確認するhttp://www.atmarkit.co.jp/fdotnet/dotnettips/951aspajaxcustomextender2/aspajaxcustomextender2.html