Desarrollar el control del extensor del lado del servidor ASP.NET Atlas: escribir el comportamiento del lado del cliente

Autor: Dflying Chen ( http://dflying.cnblogs.com/ )
Después de comprender los conceptos básicos y completar los requisitos previos (consulte: Desarrollo del control extensor del lado del servidor ASP.NET Atlas: conceptos básicos y requisitos previos), podemos comenzar a desarrollar este ValidateUserNameExtender.

Primero, cree un nuevo proyecto de Atlas Control en Visual Studio y asígnele el nombre ValidateUserName. Después de la creación, la solución debería verse como la siguiente imagen:

Como puede ver, hacemos referencia automáticamente al siguiente ensamblado en la plantilla del proyecto:

Microsoft.Web.Atlas.dll, que es el ensamblado principal de Atlas y será utilizado por el siguiente Microsoft.AtlasControlExtender.dll.
Microsoft.AtlasControlExtender.dll, este es el ensamblado donde se ubica la clase base del Extender en Atlas proporcionada por Microsoft. Varias clases necesarias en nuestro Extender personalizado heredan de la clase base proporcionada en este ensamblado.
Al mismo tiempo, esta plantilla de proyecto también creó un archivo JavaScript y tres archivos C# para nosotros:

ValidateUserNameBehavior.js, que es la parte central de nuestro Extender y también es el archivo que contiene todos los scripts del lado del cliente. Al igual que con ASP.NET, Atlas desarrolla el contenido del archivo ValidateUserNameBehavior.js en el Comportamiento personalizado para verificar en tiempo real si el nombre de usuario está registrado, lo cual será analizado en detalle más adelante. Atlas' Extender es en realidad una encapsulación de este comportamiento del lado del cliente, lo que lo convierte en un control del lado del servidor para simplificar el trabajo de los desarrolladores de programas de sitios web cuando lo utilizan. Como desarrollador de controles, añade mucho trabajo.
ValidateUserNameDesigner.cs, usado aquí para escribir código que proporciona soporte en tiempo de diseño en Visual Studio.
ValidateUserNameExtender.cs, utilizado aquí para definir nuestro Extender.
ValidateUserNameProperties.cs se utiliza para definir las propiedades utilizadas en nuestro Extender. Los valores de estas propiedades se asignarán a las propiedades del comportamiento del cliente.
Comencemos con el archivo JavaScript ValidateUserNameBehavior.js. Abra el archivo ValidateUserNameBehavior.js. Encontraremos que Template ha agregado 77 líneas de código para nosotros y hay muchos TODO en el código. Hay 3 más en la sección Léame. el código. Paso uno:

crear variables locales para almacenar valores de atributos.
Agregue estas variables locales al descriptor de tipo. Este paso es para que Atlas comprenda su clase.
Agregue accesores (captadores y definidores) a las variables locales.
Antes de comenzar el paso 1, primero cambiamos el espacio de nombres predeterminado en la Plantilla a lo que necesitamos. Aquí uso Dflying.Atlas.ControlTookit.ValidateUserName y actualizo todos los nombres de clases relacionados que aparecen en el código.

Luego, para los pasos 1 y 3, lo hacemos juntos. Consulte ValidateUserNameBehavior.js en el comportamiento personalizado que utiliza ASP.NET Atlas para desarrollar la verificación en tiempo real de si el nombre de usuario está registrado CheckResultLabelID, ServiceName, MethodName, ValidMessage y. Se deben agregar atributos InvalidMessage, aquí solo doy un ejemplo:

var _MethodName

this.get_MethodName = function() {
devolver _NombreMétodo;
}
this.set_MethodName = función (valor) {
if (_MethodName! = valor) {
_MethodName = valor;
this.raisePropertyChanged('Nombre del método');
}
}

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

td.addProperty('CheckResultLabelID', Cadena);
td.addProperty('NombreServicio', Cadena);
td.addProperty('Nombre del método', Cadena);
td.addProperty('ValidMessage', Cadena);
td.addProperty('Mensaje no válido', Cadena);

volver td;
}
Finalmente, están el constructor y la función de análisis, que también aparecen en TODO:

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

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

this.dispose = función() {

si (_blurHandler) {
this.control.element.detachEvent('onblur', _blurHandler);
_blurHandler = nulo;
}

Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'dispose');
}
Más el Handler que llama al Servicio Web y el CallBack correspondiente:

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

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

this.dispose = función() {

si (_blurHandler) {
this.control.element.detachEvent('onblur', _blurHandler);
_blurHandler = nulo;
}

Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'dispose');
}
También hay una parte del Código generado automáticamente por la Plantilla, que se utiliza para conectar la interacción de estado entre el servidor y el cliente. En este ejemplo, no necesitamos usarlo. Por supuesto, no hay ningún daño en conservarlo.

this.getClientState = función() {
valor var = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'get_ClientState');
si (valor == '') valor = nulo;
valor de retorno;
}

this.setClientState = función (valor) {
return Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'set_ClientState',[valor]);
}
Lo último que hay que tener en cuenta es la última línea de este JavaScript:

Sys.TypeDescriptor.addType('dflying', 'ValidateUserNameBehavior', Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior);
Entre ellos, dflying representa el prefijo de la declaración de control de cliente generada por nuestro Extender, y ValidateUserNameBehavior representa el nombre de etiqueta del control de cliente. Estos dos nombres deben seleccionarse y recordarse, y también se usarán en los siguientes archivos CS.

De esta forma, el código fuente completo de ValidateUserNameBehavior.js es el siguiente:

ValidateUserNameBehavior.js
// (c) Copyright Microsoft Corporation.
// Esta fuente está sujeta a la licencia permisiva de Microsoft.
// Consultehttp://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx .
// Todos los demás derechos reservados

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

Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior = function() {
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.initializeBase(esto);

var _blurHandler;

var _CheckResultLabelID;
var _checkResultLabel;
var_NombreServicio;
var_MethodName;
var _ValidMessage = "Puede utilizar este nombre de usuario.";
var _InvalidMessage = "Este nombre de usuario ya ha sido utilizado, elija otro.";

this.get_CheckResultLabelID = función() {
devolver _CheckResultLabelID;
}
this.set_CheckResultLabelID = función (valor) {
si (_CheckResultLabelID! = valor) {
_checkResultLabel = $(valor);
debug.assert(_checkResultLabel != null, "CheckResultLabelID debe establecerse en un elemento DOM válido.");
_CheckResultLabelID = valor;
this.raisePropertyChanged('CheckResultLabelID');
}
}
this.get_ServiceName = función() {
devolver _NombreServicio;
}
this.set_ServiceName = función (valor) {
si (_ServiceName! = valor) {
_NombreServicio = valor;
this.raisePropertyChanged('NombreServicio');
}
}
this.get_MethodName = función() {
devolver _NombreMétodo;
}
this.set_MethodName = función (valor) {
if (_MethodName! = valor) {
_MethodName = valor;
this.raisePropertyChanged('Nombre del método');
}
}
this.get_ValidMessage = función() {
devolver _ValidMessage;
}
this.set_ValidMessage = función (valor) {
si (_ValidMessage! = valor) {
_ValidMessage = valor;
this.raisePropertyChanged('ValidMessage');
}
}
this.get_InvalidMessage = función() {
devolver _InvalidMessage;
}
this.set_InvalidMessage = función (valor) {
si (_InvalidMessage! = valor) {
_InvalidMessage = valor;
this.raisePropertyChanged('InvalidMessage');
}
}

this.initialize = función() {
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'inicializar');

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

this.dispose = función() {

si (_blurHandler) {
this.control.element.detachEvent('onblur', _blurHandler);
_blurHandler = nulo;
}

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

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

td.addProperty('CheckResultLabelID', Cadena);
td.addProperty('NombreServicio', Cadena);
td.addProperty('Nombre del método', Cadena);
td.addProperty('ValidMessage', Cadena);
td.addProperty('Mensaje no válido', Cadena);

volver td;
}

función desenfoqueHandler() {
if (este.control.elemento.valor == '') {
_checkResultLabel.innerHTML = '';
devolver;
}

Sys.Net.ServiceMethod.invoke(
_Nombre del servicio,
_Nombre del método,
'',
{nombredeusuarioCandidato: this.control.element.value},
_onMethodComplete
);
}

función _onMethodComplete(resultado)
{
_checkResultLabel.innerHTML = resultado? _ValidMessage: _InvalidMessage;
}

this.getClientState = función() {
valor var = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'get_ClientState');
si (valor == '') valor = nulo;
valor de retorno;
}

this.setClientState = función (valor) {
return 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

En este punto, la parte del cliente se ha completado, seguida por el lado del servidor, que son los tres restantes Preparación de CS

archivos.