ASP.NET Atlas 서버측 Extender 컨트롤 개발 - 클라이언트측 동작 작성

저자：Eve Cole 업데이트 시간：2009-06-30 16:39:58

작성자: Dflying Chen ( http://dflying.cnblogs.com/ )
기본 개념을 이해하고 전제 조건을 완료한 후(ASP.NET Atlas 서버 측 Extender 컨트롤 개발 - 기본 개념 및 전제 조건 참조) 이 ValidateUserNameExtender 개발을 시작할 수 있습니다.

먼저 Visual Studio에서 새 Atlas Control 프로젝트를 만들고 이름을 ValidateUserName으로 지정합니다. 생성 후 솔루션은 다음 그림과 같아야 합니다.

보시다시피 다음 어셈블리는 프로젝트 템플릿에서 자동으로 참조됩니다.

Microsoft.Web.Atlas.dll은 Atlas의 핵심 어셈블리이며 다음 Microsoft.AtlasControlExtender.dll에서 사용됩니다.
Microsoft.AtlasControlExtender.dll은 Microsoft에서 제공하는 Atlas의 Extender 기본 클래스가 있는 어셈블리입니다. 사용자 정의된 Extender에 필요한 여러 클래스는 이 어셈블리에서 제공되는 기본 클래스에서 상속됩니다.
동시에 이 프로젝트 템플릿은 JavaScript 파일과 세 개의 C# 파일인

ValidateUserNameBehavior.js도 생성했습니다. 이는 Extender의 핵심 부분이자 모든 클라이언트 측 스크립트를 수용하는 파일이기도 합니다. ASP.NET을 사용하는 것과 동일합니다. Atlas는 사용자 정의 동작에서 ValidateUserNameBehavior.js 파일의 내용을 개발하여 사용자 이름이 등록되었는지 실시간으로 확인합니다. 이에 대한 자세한 내용은 나중에 분석하겠습니다. Atlas의 Extender는 실제로 이 클라이언트 측 동작을 캡슐화한 것으로, 이를 사용할 때 웹 사이트 프로그램 개발자의 작업을 단순화하기 위한 서버 측 제어 기능을 제공합니다. 컨트롤 개발자로서 많은 작업이 추가됩니다.
ValidateUserNameDesigner.cs는 Visual Studio에서 디자인 타임 지원을 제공하는 코드를 작성하는 데 사용됩니다.
ValidateUserNameExtender.cs는 여기에서 Extender를 정의하는 데 사용됩니다.
ValidateUserNameProperties.cs는 Extender에서 사용되는 속성을 정의하는 데 사용됩니다. 이러한 속성의 값은 클라이언트의 동작 속성에 매핑됩니다.
ValidateUserNameBehavior.js JavaScript 파일부터 시작하겠습니다. ValidateUserNameBehavior.js 파일을 열면 템플릿에 77줄의 코드가 추가되었으며 코드에 3개의 TODO가 더 있습니다. 1단계:

속성 값을 저장할 로컬 변수를 만듭니다.
이러한 지역 변수를 유형 설명자에 추가하면 Atlas가 클래스를 이해할 수 있습니다.
로컬 변수에 접근자(getter 및 setter)를 추가합니다.
1단계를 시작하기 전에 먼저 템플릿의 기본 네임스페이스를 필요한 것으로 변경합니다. 여기서는 Dflying.Atlas.ControlTookit.ValidateUserName을 사용하고 코드에 나타나는 모든 관련 클래스 이름을 업데이트합니다.

그런 다음 1단계와 3단계에서는 ASP.NET Atlas를 사용하여 사용자 이름이 등록되었는지 확인하는 사용자 지정 동작의 ValidateUserNameBehavior.js를 참조하세요. InvalidMessage 속성을 추가해야 합니다. 여기서는 예시만 제공합니다.

var _MethodName

= function() {
_MethodName을 반환합니다.
}
this.set_MethodName = 함수(값) {
if (_MethodName != 값) {
_메소드이름 = 값;
this.raisePropertyChanged('MethodName');
}
}

그런 다음 2단계: this.getDescriptor = function() {
var td = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'getDescriptor');

td.addProperty('CheckResultLabelID', String);
td.addProperty('ServiceName', String);
td.addProperty('MethodName', String);
td.addProperty('ValidMessage', String);
td.addProperty('InvalidMessage', String);

td를 반환;
}
마지막으로 TODO에도 나타나는 생성자와 분석 함수가 있습니다.

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

_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 = 함수() {
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);
그중 dflying은 Extender에서 생성된 클라이언트 컨트롤 선언의 접두사를 나타내고 ValidateUserNameBehavior는 클라이언트 컨트롤의 태그 이름을 나타냅니다. 이 두 이름은 선택하고 기억해야 하며 다음 CS 파일에서도 사용됩니다.

이러한 방식으로 전체 ValidateUserNameBehavior.js 소스 코드는 다음과 같습니다.

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 = function() {
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 = 함수() {
_ServiceName을 반환합니다.
}
this.set_ServiceName = 함수(값) {
if (_ServiceName != 값) {
_서비스명 = 값;
this.raisePropertyChanged('ServiceName');
}
}
this.get_MethodName = 함수() {
_MethodName을 반환합니다.
}
this.set_MethodName = 함수(값) {
if (_MethodName != 값) {
_메소드이름 = 값;
this.raisePropertyChanged('MethodName');
}
}
this.get_ValidMessage = 함수() {
_ValidMessage를 반환합니다.
}
this.set_ValidMessage = 함수(값) {
if (_ValidMessage != 값) {
_ValidMessage = 값;
this.raisePropertyChanged('ValidMessage');
}
}
this.get_InvalidMessage = 함수() {
_InvalidMessage를 반환합니다.
}
this.set_InvalidMessage = 함수(값) {
if (_InvalidMessage != 값) {
_InvalidMessage = 값;
this.raisePropertyChanged('InvalidMessage');
}
}

this.initialize = 함수() {
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, '초기화');

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

this.dispose = 함수() {

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

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

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

td.addProperty('CheckResultLabelID', String);
td.addProperty('ServiceName', String);
td.addProperty('MethodName', 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 = 함수() {
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의 나머지 세 가지 준비인 서버 측이 완료됩니다. 파일.