Développer le contrôle d'extension côté serveur ASP.NET Atlas : écrire le comportement côté client

Auteur：Eve Cole Date de mise à jour：2009-06-30 16:39:58

Auteur : Dflying Chen ( http://dflying.cnblogs.com/ )
Après avoir compris les concepts de base et rempli les conditions préalables (veuillez vous référer à : Développement du contrôle Extender côté serveur ASP.NET Atlas - concepts de base et conditions préalables), nous pouvons commencer à développer ce ValidateUserNameExtender.

Tout d’abord, créez un nouveau projet Atlas Control dans Visual Studio et nommez-le ValidateUserName. Après la création, la solution devrait ressembler à l’image suivante :

Comme vous pouvez le constater, l'assembly suivant est automatiquement référencé pour nous dans le modèle de projet :

Microsoft.Web.Atlas.dll, qui est l'assembly principal d'Atlas et sera utilisé par le Microsoft.AtlasControlExtender.dll suivant.
Microsoft.AtlasControlExtender.dll, il s'agit de l'assembly où se trouve la classe de base de l'Extender dans Atlas fourni par Microsoft. Plusieurs classes nécessaires dans notre Extender personnalisé héritent de la classe de base fournie dans cet assembly.
Dans le même temps, ce modèle de projet a également créé pour nous un fichier JavaScript et trois fichiers C# :

ValidateUserNameBehavior.js, qui est la partie centrale de notre extension et est également le fichier qui héberge tous les scripts côté client. Le contenu sera essentiellement. de la même manière que l'utilisation d'ASP.NET Atlas développe le contenu du fichier ValidateUserNameBehavior.js dans le comportement personnalisé pour vérifier en temps réel si le nom d'utilisateur est enregistré, ce qui sera analysé en détail ultérieurement. Atlas' Extender est en fait une encapsulation de ce comportement côté client, ce qui en fait un contrôle côté serveur pour simplifier le travail des développeurs de programmes de sites Web lors de son utilisation. En tant que développeur de contrôles, cela ajoute beaucoup de travail.
ValidateUserNameDesigner.cs, utilisé ici pour écrire du code qui fournit une prise en charge au moment du design dans Visual Studio.
ValidateUserNameExtender.cs, utilisé ici pour définir notre Extender.
ValidateUserNameProperties.cs est utilisé pour définir les propriétés utilisées dans notre Extender. Les valeurs de ces propriétés seront mappées aux propriétés du comportement du client.
Commençons par le fichier JavaScript ValidateUserNameBehavior.js. Ouvrez le fichier ValidateUserNameBehavior.js. Nous constaterons que le modèle a ajouté 77 lignes de code pour nous et qu'il y a de nombreuses TODO dans le code. le code. Première étape :

créer des variables locales pour stocker les valeurs d'attribut.
Ajoutez ces variables locales au descripteur de type. Cette étape consiste à permettre à Atlas de comprendre votre classe.
Ajoutez des accesseurs (getters et setters) aux variables locales.
Avant de commencer l'étape 1, nous modifions d'abord l'espace de noms par défaut dans le modèle en fonction de ce dont nous avons besoin. Ici, j'utilise Dflying.Atlas.ControlTookit.ValidateUserName et je mets à jour tous les noms de classe associés qui apparaissent dans le code.

Ensuite, pour les étapes 1 et 3, nous le faisons ensemble. Reportez-vous à ValidateUserNameBehavior.js dans le comportement personnalisé qui utilise ASP.NET Atlas pour développer une vérification en temps réel pour savoir si le nom d'utilisateur est enregistré CheckResultLabelID, ServiceName, MethodName, ValidMessage et. Des attributs InvalidMessage doivent être ajoutés, ici je ne donne qu'un exemple :

var _MethodName;

this.get_MethodName = function() {
retourner _MethodName ;
}
this.set_MethodName = fonction (valeur) {
if (_MethodName != valeur) {
_MethodName = valeur ;
this.raisePropertyChanged('MethodName');
}
}

Puis étape 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);

retourner td ;
}
Enfin, il y a le constructeur et la fonction d'analyse, qui apparaissent également dans 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 = fonction() {

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

Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'dispose');
}
Il existe également une partie du code générée automatiquement par Template, qui est utilisée pour connecter l'interaction de statut entre le serveur et le client. Dans cet exemple, nous n'avons pas besoin de l'utiliser. Bien sûr, il n'y a aucun mal à la conserver :

this.getClientState = fonction() {
var value = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'get_ClientState');
si (valeur == '') valeur = null ;
valeur de retour ;
}

this.setClientState = fonction (valeur) {
return Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'set_ClientState',[value]);
}
La dernière chose à noter est la dernière ligne de ce JavaScript :

Sys.TypeDescriptor.addType('dflying', 'ValidateUserNameBehavior', Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior);
Parmi eux, dflying représente le préfixe de la déclaration du contrôle client généré par notre Extender, et ValidateUserNameBehavior représente le nom de balise du contrôle client. Ces deux noms doivent être choisis et mémorisés, et ils seront également utilisés dans les fichiers CS suivants.

De cette façon, le code source complet de ValidateUserNameBehavior.js est le suivant :

ValidateUserNameBehavior.js
// (c) Copyright Microsoft Corporation.
// Cette source est soumise à la licence permissive Microsoft.
// Voirhttp://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx .
// Tous les autres droits réservés.

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

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

var _blurHandler;

var _CheckResultLabelID;
var _checkResultLabel;
var_ServiceName;
var_MethodName ;
var _ValidMessage = "Vous pouvez utiliser ce nom d'utilisateur.";
var _InvalidMessage = "Ce nom d'utilisateur a déjà été utilisé, veuillez en choisir un autre.";

this.get_CheckResultLabelID = fonction() {
retourner _CheckResultLabelID ;
}
this.set_CheckResultLabelID = fonction (valeur) {
if (_CheckResultLabelID != valeur) {
_checkResultLabel = $(valeur);
debug.assert(_checkResultLabel != null, "CheckResultLabelID doit être défini sur un élément DOM valide.");
_CheckResultLabelID = valeur ;
this.raisePropertyChanged('CheckResultLabelID');
}
}
this.get_ServiceName = fonction() {
retourner _ServiceName ;
}
this.set_ServiceName = fonction (valeur) {
if (_ServiceName != valeur) {
_ServiceName = valeur ;
this.raisePropertyChanged('ServiceName');
}
}
this.get_MethodName = fonction() {
retourner _MethodName ;
}
this.set_MethodName = fonction (valeur) {
if (_MethodName != valeur) {
_MethodName = valeur ;
this.raisePropertyChanged('MethodName');
}
}
this.get_ValidMessage = fonction() {
renvoyer _ValidMessage ;
}
this.set_ValidMessage = fonction (valeur) {
if (_ValidMessage != valeur) {
_ValidMessage = valeur ;
this.raisePropertyChanged('ValidMessage');
}
}
this.get_InvalidMessage = fonction() {
renvoyer _InvalidMessage ;
}
this.set_InvalidMessage = fonction (valeur) {
if (_InvalidMessage != valeur) {
_InvalidMessage = valeur ;
this.raisePropertyChanged('InvalidMessage');
}
}

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

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

this.dispose = fonction() {

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

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

this.getDescriptor = fonction() {
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);

retourner td ;
}

fonction flouHandler() {
if (this.control.element.value == '') {
_checkResultLabel.innerHTML = '';
retour;
}

Sys.Net.ServiceMethod.invoke(
_NomService,
_NomMéthode,
'',
{ userNameCandidate : this.control.element.value},
_onMethodComplete
);
}

fonction _onMethodComplete (résultat)
{
_checkResultLabel.innerHTML = résultat _ValidMessage : _InvalidMessage;
}

this.getClientState = fonction() {
var value = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'get_ClientState');
si (valeur == '') valeur = null ;
valeur de retour ;
}

this.setClientState = fonction (valeur) {
return Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'set_ClientState',[value]);
}
}

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

À ce stade, la partie client est terminée, suivie du côté serveur, qui est les trois autres Préparation de CS

);

fichiers.