ASP.NET Atlas サーバー側 Extender コントロールの開発 - クライアント側の動作を作成する

著者：Eve Cole 更新時間：2009-06-30 16:39:58

著者: Dflying Chen ( http://dflying.cnblogs.com/ )
基本概念を理解し、前提条件を満たした後 (「ASP.NET Atlas サーバー側エクステンダーコントロールの開発 - 基本概念と前提条件」を参照)、この ValidateUserNameExtender の開発を開始できます。

まず、Visual Studio で新しい Atlas Control プロジェクトを作成し、ValidateUserName という名前を付けます。作成後のソリューションは次の図のようになります。

ご覧のとおり、プロジェクトテンプレートでは次のアセンブリが自動的に参照されます:

Microsoft.Web.Atlas.dll。これは Atlas のコアアセンブリであり、次の Microsoft.AtlasControlExtender.dll によって使用されます。
Microsoft.AtlasControlExtender.dll は、Microsoft が提供する Atlas のエクステンダーの基本クラスが配置されるアセンブリです。カスタマイズされたエクステンダーのいくつかの必要なクラスは、このアセンブリで提供される基本クラスから継承されます。
同時に、このプロジェクトテンプレートは JavaScript ファイルと 3 つの C# ファイルも作成しました:

ValidateUserNameBehavior.js。これはエクステンダーのコア部分であり、すべてのクライアント側スクリプトに対応するファイルでもあります。 ASP.NET を使用する場合と同様に、Atlas はカスタム Behavior で ValidateUserNameBehavior.js ファイルの内容を開発し、ユーザー名が登録されているかどうかをリアルタイムで確認します。これについては後ほど詳しく分析します。 Atlas の Extender は、実際にはこのクライアント側の動作をカプセル化したもので、Web サイトプログラム開発者の使用時に作業を簡素化するサーバー側のコントロールになります。コントロール開発者としては、多くの作業が追加されます。
ValidateUserNameDesigner.cs。Visual Studio でデザイン時サポートを提供するコードを記述するためにここで使用されます。
ValidateUserNameExtender.cs、ここでエクステンダーを定義するために使用されます。
ValidateUserNameProperties.cs は、エクステンダーで使用されるプロパティを定義するために使用されます。これらのプロパティの値は、クライアントの動作のプロパティにマップされます。
ValidateUserNameBehavior.js JavaScript ファイルから始めましょう。ValidateUserNameBehavior.js ファイルを開くと、Template によって 77 行のコードが追加されており、このコードにはさらに 3 行の TODO が含まれていることがわかります。ステップ 1:

属性値を保存するローカル変数を作成します。
これらのローカル変数を型記述子に追加するこのステップは、Atlas にクラスを理解させることです。
アクセサー (ゲッターとセッター) をローカル変数に追加します。
ステップ 1 を開始する前に、まずテンプレート内のデフォルトの名前空間を必要なものに変更します。ここでは Dflying.Atlas.ControlTookit.ValidateUserName を使用し、コード内に表示されるすべての関連クラス名を更新します。

次に、ステップ 1 とステップ 3 については、ASP.NET Atlas を使用してユーザー名が登録されているかどうかのリアルタイム検証を開発するカスタム Behavior.js を参照してください。

InvalidMessage 属性を追加する必要があり

ます

。ここでは例のみを示します

。

メソッド名を返します;
}
this.set_MethodName = 関数(値) {
if (_メソッド名 != 値) {
_MethodName = 値;
this.raisePropertyChanged('メソッド名');
}
}

次にステップ 2: this.getDescriptor = function() {
var td = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'getDescriptor');

td.addProperty('CheckResultLabelID', String);
td.addProperty('サービス名', String);
td.addProperty('メソッド名', String);
td.addProperty('ValidMessage', String);
td.addProperty('InvalidMessage', String);

tdを返します。
}
最後に、コンストラクターと分析関数があります。これらは TODO にも表示されます。

this.initialize = function() {
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'initialize');

_blurHandler = Function.createDelegate(this, BlurHandler);
this.control.element.attachEvent('onblur', _blurHandler);
this.dispose

= function() {

if (_blurHandler) {
this.control.element.detachEvent('onblur', _blurHandler);
_blurHandler = null;
}

Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'dispose');
}
テンプレートによって自動的に生成されるコードの一部もあります。これは、サーバーとクライアント間のステータスのやり取りを接続するために使用されます。もちろん、これを使用する必要はありません。

this.getClientState = function() {
var value = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'get_ClientState');
if (値 == '') 値 = null;
戻り値;
}

this.setClientState = 関数(値) {
return Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'set_ClientState',[value]);
}
最後に注意すべき点は、この JavaScript の最後の行です:

Sys.TypeDescriptor.addType('dflying', 'ValidateUserNameBehavior', Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior);
このうち、dffly はエクステンダーによって生成されたクライアントコントロール宣言のプレフィックスを表し、ValidateUserNameBehavior はクライアントコントロールのタグ名を表します。これら 2 つの名前は選択して覚えておく必要があり、次の CS ファイルでも使用されます。

このようにして、完全な

ValidateUserNameBehavior.js

ソースコードは次のようになります。

// (c) 著作権 Microsoft Corporation.
// このソースは Microsoft Permissive License の対象です。
//http://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx を参照してください。
// その他の権利はすべて留保されます。

Type.registerNamespace

(

'Dflying.Atlas.ControlTookit.ValidateUserName');

Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.initializeBase(this);

var _blurHandler;

var _CheckResultLabelID;
var _checkResultLabel;
var_サービス名;
var_メソッド名;
var _ValidMessage = "このユーザー名を使用できます。";
var _InvalidMessage = "このユーザー名はすでに使用されています。別のユーザー名を選択してください。";

this.get_CheckResultLabelID = function() {
_CheckResultLabelID を返します。
}
this.set_CheckResultLabelID = 関数(値) {
if (_CheckResultLabelID != 値) {
_checkResultLabel = $(値);
debug.assert(_checkResultLabel != null, "CheckResultLabelID は有効な DOM 要素に設定する必要があります。");
_CheckResultLabelID = 値;
this.raisePropertyChanged('CheckResultLabelID');
}
}
this.get_ServiceName = function() {
_サービス名を返します;
}
this.set_ServiceName = 関数(値) {
if (_ServiceName != 値) {
_ServiceName = 値;
this.raisePropertyChanged('サービス名');
}
}
this.get_MethodName = function() {
メソッド名を返します;
}
this.set_MethodName = 関数(値) {
if (_MethodName != 値) {
_MethodName = 値;
this.raisePropertyChanged('メソッド名');
}
}
this.get_ValidMessage = function() {
_ValidMessage を返します;
}
this.set_ValidMessage = 関数(値) {
if (_ValidMessage != 値) {
_ValidMessage = 値;
this.raisePropertyChanged('ValidMessage');
}
}
this.get_InvalidMessage = function() {
_InvalidMessage を返します;
}
this.set_InvalidMessage = 関数(値) {
if (_InvalidMessage != 値) {
_InvalidMessage = 値;
this.raisePropertyChanged('InvalidMessage');
}
}

this.initialize = function() {
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'initialize');

_blurHandler = Function.createDelegate(this, BlurHandler);
this.control.element.attachEvent('onblur', _blurHandler);
}

this.dispose = function() {

if (_blurHandler) {
this.control.element.detachEvent('onblur', _blurHandler);
_blurHandler = null;
}

Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'dispose');
}

this.getDescriptor = function() {
var td = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'getDescriptor');

td.addProperty('CheckResultLabelID', String);
td.addProperty('サービス名', String);
td.addProperty('メソッド名', String);
td.addProperty('ValidMessage', String);
td.addProperty('InvalidMessage', String);

tdを返します。
}

関数 BlurHandler() {
if (this.control.element.value == '') {
_checkResultLabel.innerHTML = '';
戻る;
}

Sys.Net.ServiceMethod.invoke(
_サービス名、
_メソッド名、
”、
{ userNameCandidate : this.control.element.value},
_onMethodComplete
);
}

関数_onMethodComplete(結果)
{
_checkResultLabel.innerHTML = 結果 _ValidMessage : _InvalidMessage;
}

this.getClientState = function() {
var value = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'get_ClientState');
if (値 == '') 値 = null;
戻り値;
}

this.setClientState = 関数(値) {
return Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'set_ClientState',[value]);
}
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.registerSealedClass

('Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior', Microsoft.AtlasControlExtender.BehaviorBase);
Sys.TypeDescriptor.addType('dflying', 'ValidateUserNameBehavior', Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior);

この時点で、CS の残り 3 つの準備であるサーバー側が完了しました。ファイル。