Desenvolva o controle Extender do lado do servidor ASP.NET Atlas – escreva o comportamento do lado do cliente

Autor: Dflying Chen ( http://dflying.cnblogs.com/ )
Depois de compreender os conceitos básicos e concluir os pré-requisitos (consulte: Desenvolvendo o controle Extender do lado do servidor ASP.NET Atlas - conceitos básicos e pré-requisitos), podemos começar a desenvolver este ValidateUserNameExtender.

Primeiro, crie um novo projeto Atlas Control no Visual Studio e nomeie-o como ValidateUserName. Após a criação, a solução deverá ficar semelhante à imagem a seguir:

Como você pode ver, o seguinte assembly é referenciado automaticamente para nós no modelo de projeto:

Microsoft.Web.Atlas.dll, que é o assembly principal do Atlas e será usado pelo seguinte Microsoft.AtlasControlExtender.dll.
Microsoft.AtlasControlExtender.dll, este é o assembly onde está localizada a classe base do Extender no Atlas fornecido pela Microsoft. Várias classes necessárias em nosso Extender customizado herdam da classe base fornecida neste assembly.
Ao mesmo tempo, este modelo de projeto também criou um arquivo JavaScript e três arquivos C# para nós:

ValidateUserNameBehavior.js, que é a parte central do nosso Extender e também é o arquivo que acomoda todos os scripts do lado do cliente. o mesmo que usar ASP.NET Atlas desenvolve o conteúdo do arquivo ValidateUserNameBehavior.js no Behavior customizado para verificar em tempo real se o nome do usuário está cadastrado, o que será analisado detalhadamente posteriormente. O Extender do Atlas é na verdade um encapsulamento desse comportamento do lado do cliente, tornando-o um controle do lado do servidor para simplificar o trabalho dos desenvolvedores de programas de sites ao usá-lo. Como desenvolvedor de controle, isso acrescenta muito trabalho.
ValidateUserNameDesigner.cs, usado aqui para escrever código que fornece suporte em tempo de design no Visual Studio.
ValidateUserNameExtender.cs, usado aqui para definir nosso Extender.
ValidateUserNameProperties.cs é usado para definir as propriedades usadas em nosso Extender. Os valores dessas propriedades serão mapeados para as propriedades do Behavior do cliente.
Vamos começar com o arquivo JavaScript ValidateUserNameBehavior.js. Abra o arquivo ValidateUserNameBehavior.js. Descobriremos que o modelo adicionou 77 linhas de código para nós e há muitos TODOs no código. o código. Etapa um:

Crie variáveis ​​locais para armazenar valores de atributos.
Adicione essas variáveis ​​locais ao descritor de tipo. Esta etapa permite que o Atlas entenda sua classe.
Adicione acessadores (getters e setters) às variáveis ​​locais.
Antes de iniciar a etapa 1, primeiro alteramos o namespace padrão no modelo para o que precisamos. Aqui eu uso Dflying.Atlas.ControlTookit.ValidateUserName e atualizo todos os nomes de classes relacionadas que aparecem no código.

Em seguida, para as etapas 1 e 3, fazemos isso juntos. Consulte ValidateUserNameBehavior.js no comportamento personalizado que usa ASP.NET Atlas para desenvolver verificação em tempo real se o nome do usuário está registrado, ServiceName, MethodName, ValidMessage e. Devem ser adicionados atributos InvalidMessage, aqui dou apenas um exemplo:

var _MethodName

;
return _NomeMetodo;
}
this.set_MethodName = função (valor) {
if (_MethodName! = valor) {
_NomeMetodo = valor;
this.raisePropertyChanged('NomedoMetodo');
}
}

Em seguida, etapa 2: this.getDescriptor = function() {
var td = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'getDescriptor');

td.addProperty('CheckResultLabelID', String);
td.addProperty('NomeServiço', String);
td.addProperty('NomeMetodo', String);
td.addProperty('ValidMessage', String);
td.addProperty('InvalidMessage', String);

retornar td;
}
Por fim, há o construtor e a função de análise, que também aparecem no 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');
}
Além do Handler que chama o Web Service e o CallBack correspondente:

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');
}
Há também uma parte do código gerada automaticamente pelo Template, que é usada para conectar a interação de status entre o servidor e o cliente. Neste exemplo, não precisamos usá-lo.

this.getClientState = function() {
var valor = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'get_ClientState');
if (valor == '') valor = nulo;
valor de retorno;
}

this.setClientState = função(valor) {
retornar Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'set_ClientState',[valor]);
}
A última coisa a notar é a última linha deste JavaScript:

Sys.TypeDescriptor.addType('dflying', 'ValidateUserNameBehavior', Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior);
Entre eles, dflying representa o prefixo da declaração de controle do cliente gerada pelo nosso Extender, e ValidateUserNameBehavior representa o nome da tag do controle do cliente. Esses dois nomes devem ser escolhidos e lembrados, e também serão usados ​​nos seguintes arquivos CS.

Desta forma, o código fonte completo do ValidateUserNameBehavior.js é o seguinte:

ValidateUserNameBehavior.js
// (c) Direitos Autorais Microsoft Corporation.
// Esta fonte está sujeita à Licença Permissiva da Microsoft.
// Consultehttp://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx .
// Todos os outros direitos reservados.

Type.registerNamespace('Dflying.Atlas.ControlTookit.ValidateUserName')

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

var _blurHandler;

var _CheckResultLabelID;
var _checkResultLabel;
var_NomeServiço;
var_MethodName;
var _ValidMessage = "Você pode usar este nome de usuário.";
var _InvalidMessage = "Este nome de usuário já foi usado, escolha outro.";

this.get_CheckResultLabelID = function() {
retornar _CheckResultLabelID;
}
this.set_CheckResultLabelID = função (valor) {
if (_CheckResultLabelID! = valor) {
_checkResultLabel = $(valor);
debug.assert(_checkResultLabel != null, "CheckResultLabelID deve ser definido como um elemento DOM válido.");
_CheckResultLabelID = valor;
this.raisePropertyChanged('CheckResultLabelID');
}
}
this.get_ServiceName=função(){
return _NomeServiço;
}
this.set_ServiceName = função (valor) {
if (_ServiceName! = valor) {
_NomeServiço = valor;
this.raisePropertyChanged('NomeServiço');
}
}
this.get_MethodName = function() {
return _NomeMetodo;
}
this.set_MethodName = função (valor) {
if (_MethodName! = valor) {
_NomeMetodo = valor;
this.raisePropertyChanged('NomedoMetodo');
}
}
this.get_ValidMessage = function() {
return _MensagemValida;
}
this.set_ValidMessage = função (valor) {
if (_ValidMessage! = valor) {
_ValidMessage = valor;
this.raisePropertyChanged('ValidMessage');
}
}
this.get_InvalidMessage = function() {
return _MensagemInválida;
}
this.set_InvalidMessage = função (valor) {
if (_InvalidMessage! = valor) {
_InvalidMessage = valor;
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('NomeServiço', String);
td.addProperty('NomeMetodo', String);
td.addProperty('ValidMessage', String);
td.addProperty('InvalidMessage', String);

retornar td;
}

função blurHandler() {
if (this.control.element.value == '') {
_checkResultLabel.innerHTML = '';
retornar;
}

Sys.Net.ServiceMethod.invoke(
_NomeServiço,
_MethodName,
'',
{userNameCandidate: this.control.element.value},
_onMethodComplete
);
}

função _onMethodComplete(resultado)
{
_checkResultLabel.innerHTML = resultado? _ValidMessage: _InvalidMessage;
}

this.getClientState = function() {
var valor = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'get_ClientState');
if (valor == '') valor = nulo;
valor de retorno;
}

this.setClientState = função(valor) {
retornar Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'set_ClientState',[valor]);
}
}

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

Neste ponto, a parte do cliente foi concluída, seguida pelo lado do servidor, que são os três restantes Preparação do CS)

arquivos.