Extension du contrôle HTML Map à l'aide du framework ASP.NET AJAX

Maintenant, écrivez notre méthode Web :

Voici l'extrait de citation :
[MéthodeWeb]
[ScriptMethod (UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
chaîne publique GetAreaInfo (zone de chaîne)
{
zone de retour;
}

Selon les conseils de sources faisant autorité, pour des raisons de sécurité, nous utilisons généralement HttpPost (ou HttpGet=false) pour accéder aux méthodes Web. Ensuite, nous configurons le format des données renvoyées au format JSON (le mode par défaut est le mode JSON).

Pour plus de simplicité, la méthode GetAreaInfo renvoie ici simplement la même valeur du paramètre d'entrée ; mais dans le développement réel, nous devrions remplacer ici pour récupérer les données de la base de données.

Jusqu'à présent, nous avons réussi à créer un service Web appelé depuis le client à l'aide d'AJAX.

Cependant, nous devons également effectuer certaines configurations appropriées pour le contrôle serveur ScriptManager dans la page, comme indiqué ci-dessous :

Ce qui suit est un fragment cité :
<asp:ScriptManager ID="ScriptManager1" runat="server">
<services>
<asp:servicereference path="~/LocationService.asmx" />
</services>
</asp:ScriptManager>

Ici, nous avons uniquement ajouté une référence de service sous le nœud, mais quel est son rôle ?

A partir de l'analyse du code source HTML généré, la configuration ci-dessus va générer le contenu suivant :

Ce qui suit est un fragment de référence :

<script src="LocationService .asmx /jsdebug" type="text/javascript"></script>

La balise de script ici fait référence à un fichier JavaScript LocationService.asmx/jsdebug. En fait, il s'agit d'une classe proxy de service Web. C'est grâce à cette classe proxy que nous pouvons appeler le service Web côté serveur de manière asynchrone depuis le client.

Ce qui est plus intéressant, c'est que si vous copiez simplement le chemin indiqué ci-dessus dans votre navigateur, vous verrez un fichier JavaScript généré par l'environnement AJAX au moment de l'exécution - ce fichier rend les appels du service de script disponibles. Nous ne discuterons pas en profondeur de la classe proxy.

Voyons ensuite comment créer une classe client personnalisée.

4. Créer des classes personnalisées côté client

Nous savons que l'une des « inventions » majeures du framework ASP.NET AJAX est qu'il introduit le modèle de programmation JavaScript orienté objet. Désormais, avec l'aide des modèles de conception JavaScript, nous pouvons facilement créer nos propres modèles ou classes, ajouter des concepts d'héritage, créer des interfaces et des énumérations, etc.

Dans cet article, nous développerons une classe client qui encapsule toutes les fonctionnalités requises dans cet exemple.

Maintenant, faites un clic droit sur le projet et ajoutez un nouveau fichier JavaScript appelé ImageMap. Dans ce fichier, nous définirons un nouvel espace de noms MyServices ; cet espace de noms contiendra les classes client que nous développerons. Comme indiqué ci-dessous :

Ce qui suit est un fragment de la citation :
Type.registerNamespace("MesServices");

Ensuite, nous définissons le constructeur de la classe client que nous voulons créer :

Voici l'extrait de référence :

MyServices.Location = function (uiElement, uiBody) {
MyServices.Location.initializeBase(this);
this._uiElement = uiElement;
this._uiBody = uiBody;
ceci._xAxis = 0;
this._yAxis = 0;
}

Un constructeur de modèle ou de classe n’est rien de plus qu’une fonction JavaScript ordinaire. Ce constructeur a deux paramètres : uiElement et uiBody.

Les deux paramètres seront utilisés pour décrire la fenêtre pop-up affichée sur la page. Les deux autres variables privées _xAxis et _yAxis sont utilisées pour décrire la position d'affichage de la fenêtre pop-up. En règle générale, il est préférable de déclarer tous les membres privés du constructeur.

Ensuite, nous utiliserons le modèle de conception du prototype pour écrire les fonctions et propriétés membres de cette classe :

Voici le fragment de référence :

MyServices.Location.prototype =
{
get_uiElement : fonction()
{
renvoie this._uiElement ;
},
set_uiElement : fonction (valeur)
{
this._uiElement = valeur ;
},
get_uiBody : fonction()
{
renvoie this._uiBody;
},
set_uiBody : fonction (valeur)
{
this._uiBody = valeur ;
},

Notez que la définition de la méthode d'attribut d'élément d'interface utilisateur ici est très similaire au formulaire de définition dans diverses langues​​dans .NET.

La fonction membre suivante est notre priorité, elle est responsable de l'appel du service Web distant :

Ce qui suit est un fragment de référence :
ShowPopupinfo : fonction (événement, nom de zone)
{
MyServices.LocationService.GetAreaInfo(areaName,
Function.createDelegate(this, this.OnCompleted),
this.OnError, //Fonction de rappel responsable de la gestion des erreurs
this.OnTimeOut); //Fonction de rappel responsable du traitement du délai d'attente
this._xAxis = event.clientX;
this._yAxis = event.clientY;
}

Le code ci-dessus montre une méthode très typique d'appel d'un service Web à partir du client :

1) Le formulaire est presque aussi pratique que l'appel d'une méthode locale ordinaire ;

2) La fonction Function.createDelegate est extrêmement importante dans le développement global du client ASP.NET AJAX ; fonction. L'un des objectifs initiaux de la création de cette fonction était de résoudre le problème de ce mot-clé. Dans un gestionnaire d'événements déclenché par un élément DOM, le mot-clé this fait toujours référence à l'élément DOM plutôt qu'à la classe elle-même. Mais ici, la raison pour laquelle nous utilisons cette fonction est que l'environnement AJAX appelle la fonction de rappel en cas de succès dans la même instance de classe qui a déclenché le service Web. Ceci est très important lorsque vous devez référencer les propriétés et les méthodes des classes clientes. En bref, l'utilisation de cette fonction rendra l'accès aux propriétés et méthodes de la classe client qui appelle le service Web sûr et précis. Sinon, l'instance de classe client effectuant l'appel asynchrone sera nulle car la réponse du service Web est exécutée dans un contexte différent : ce contexte n'est plus équivalent au contexte dans lequel la demande d'appel Web asynchrone a été effectuée.

3) Fait intéressant, la méthode GetAreaInfo ici n'est pas celle du service Web que nous avons créé précédemment, mais appartient à la classe proxy du service Web créée au moment de l'exécution : cette classe proxy agit comme un proxy client pour accéder au service Web ASMX côté serveur. .

Dans les deux dernières lignes de code de la fonction ShowPopupInfo ci-dessus, les paramètres d'entrée de l'événement sont utilisés pour définir les valeurs des deux variables privées xAxis et yAxis. Notre objectif ici est d'afficher la popup aussi près que possible de l'endroit où l'utilisateur a cliqué.

Voici le code d'implémentation de la fonction de rappel correspondante lorsque l'appel réussit :

Ce qui suit est un fragment de référence :

OnCompleted : function(result, userContext, methodName)
{
var uiElement = $get(this.get_uiElement());
var uiBody = $get(this.get_uiBody());
si (uiBody != null)
{
var textNode = uiBody.firstChild;
si (!textNode)
{
textNode = document.createTextNode(result);
uiBody.appendChild(textNode);
}
autre
{
textNode.nodeValue = résultat ;
}
si (uiElement != null)
{
uiElement.style.visibility = "visible";
uiElement.style.display = "en ligne" ;
uiElement.style.left = this._xAxis + "px" ;
uiElement.style.top = this._yAxis + "px" ;
}
}
},

Le contenu est assez simple : définissez les données renvoyées par le serveur sur le contenu d'affichage de la fenêtre contextuelle et assurez-vous que cette fenêtre s'affiche en fonction de la situation.

A la fin de la création de la classe client, nous devons également dire au framework AJAX de l'enregistrer côté client afin qu'elle soit accessible depuis le client :

Voici l'extrait de citation :
MyServices.Location.registerClass("MyServices.Location");

À ce stade, la classe client MyServices.Location a été créée avec succès. Alors, comment l’utiliser ?

Tout d’abord, nous devons définir une nouvelle instance de la classe client lors du chargement de la page. Pour ce faire, nous devons programmer dans la fonction pageLoad :

Voici l'extrait de citation :
var emplacement = nul ;
fonction pageLoad (expéditeur, arguments) {
location = new MyServices.Location("modal", "modalBody");
location.HidePopupInfo();
}

Le code ci-dessus crée simplement une nouvelle instance de la classe MyServices.Location. Appelez ensuite l'une des fonctions membres de la classe client pour masquer la fenêtre contextuelle dans la page. Pourquoi créons-nous une instance de la classe client dans la fonction pageLoad ? La raison en est que lorsque le flux de contrôle de l'environnement AJAX atteint la fonction pageLoad, tout le client AJAX et le code JavaScript défini par l'utilisateur ont été chargés avec succès. Par conséquent, à ce moment, nous pouvons accéder en toute sécurité à n’importe quel code JavaScript défini par l’utilisateur ou le système.

Plusieurs autres fonctions de l'outil sont relativement simples et ne seront pas décrites en détail ici.

5. Résumé

Dans cet article, je vous ai montré comment étendre le contrôle HTML Map en créant un service AJAX et en créant votre propre classe client personnalisée. Dans le contrôle étendu, lorsqu'on clique sur une certaine zone de l'image, nous pouvons fournir des informations détaillées pertinentes via une nouvelle méthode AJAX sans avoir à actualiser la page Web entière. Bien que nous utilisions rarement ce contrôle Map dans la plupart des applications Web (peut-être à cause de cela, il est omis de la barre d'outils VS2005), mais si nous développons des applications Web liées à un grand nombre d'images, d'images et d'opérations cartographiques, la Map après transformation AJAX sur la base de cet article, les contrôles rendront certainement votre application Web plus colorée.

[Pièce jointe] L'environnement de débogage du code source de cet article : Windows XP Professionnel Edition + Visual Studio 2005 + ASP.NET AJAX 1.0.