- 2025/01/18
- Category :
[PR]
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
IT系全般に及び知識メモ、全般と言っても興味があるもののみ
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
[ASP.NET AJAX]独自のエクステンダ・コントロールを作成するには?(サーバサイド編)
http://www.atmarkit.co.jp/fdotnet/dotnettips/947aspajaxcustomextender1/aspajaxcustomextender1.html
[ASP.NET AJAX]独自のエクステンダ・コントロールを作成するには?(クライアントサイド編)
http://www.atmarkit.co.jp/fdotnet/dotnettips/951aspajaxcustomextender2/aspajaxcustomextender2.html
1. プロジェクト作成
クラスライブラリでプロジェクトを作成
binにAjaxControlToolkit.dllを配置
2. プロジェクトに参照を追加する
System.Design
System.Web
System.Web.Extensions
System.Web.Extensions.Design
AjaxControlToolkit.dll
3. デザイナ・クラスを定義する
最低限のファイルは以下の構成
XxxxxExtender.cs
エクステンダ・クラス。コントロールのサーバサイド機能を定義するクラス
XxxxxDesigner.cs
デザイナ・クラス(コントロールのフォーム・デザイナ上での挙動を定義するためのクラス)
XxxxxBehavior.js
Behaviorオブジェクト。コントロールのクライアントサイド機能を定義するクラス
必要であれば、画像ファイル・スタイルシートなどのリソースファイルを追加
エクステンダー・コントロールはフォーム・デザイナ上の見掛けを持たないので
デザイナクラスは空のものでよい
①デザイナ・クラス定義
デザイナ・クラスであることの条件は、
ExtenderControlBaseDesigner<T>クラス(AjaxControlToolkit.Design名前空間)を継承するという
ジェネリックの型パラメータには、対応するエクステンダ・クラスを指定すればよい
-------------------------------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using AjaxControlToolkit.Design;
namespace MyExtender {
class DialogButtonDesigner : ExtenderControlBaseDesigner<DialogButtonExtender> { }
}
-------------------------------------------------------------------------------------------
②エクステンダ・クラスを定義
サーバサイド機能を定義する
エクステンダ・クラスで定義する必要があるのは、コントロールとして公開すべきプロパティの定義と、
デザイナ・クラス/Behaviorオブジェクトの宣言(関連付け)
・エクステンダ・クラスはExtenderControlBaseクラスを継承する
ExtenderControlBaseクラス(AjaxControlToolkit名前空間)は、クライアントサイド・スクリプトの
管理をはじめ、Behaviorオブジェクトとのプロパティ値の受け渡し、ターゲット要素とのひも付けなど、
エクステンダ・コントロールの動作には欠かせない基本的な機能を提供するクラス
・TargetControlType属性は、エクステンダを適用できるコントロールを制限するための属性
-------------------------------------------------------------------------------------------
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);
}
}
}
}
-------------------------------------------------------------------------------------------
4. Behaviorオブジェクトを定義する
・Behaviorオブジェクトはエクステンダのクライアントサイド機能を定義するためのJavaScriptのクラス
・Behaviorオブジェクトはエクステンダの挙動を決める
―実質、エクステンダ・コントロールの中核を担うクラス
・Behavior.jsは「ビルドアクション」-「埋め込まれたリソース」として設定する
①AjaxControlToolkit.BehaviorBaseクラスを継承すること
②エクステンダ・クラスのプロパティと対応していること
③プロパティ値の変更はraisePropertyChangedメソッドで通知
④イベント・ハンドラを登録する
-------------------------------------------------------------------------------------------
// 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) {
// ダイアログを表示した後、イベントをキャンセル(ポストバックを抑制)
window.alert(this._message);
return false;
}
};
// BehaviorBaseオブジェクトを継承する
// MyExtender.DialogButtonBehaviorクラスを登録
MyExtender.DialogButtonBehavior.registerClass(
'MyExtender.DialogButtonBehavior',
AjaxControlToolkit.BehaviorBase);
-------------------------------------------------------------------------------------------