Erweitern des HTML Map-Steuerelements mithilfe des ASP.NET AJAX-Frameworks

Schreiben Sie nun unsere Webmethode:

Hier ist der Zitatausschnitt:
[WebMethod]
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
öffentlicher String GetAreaInfo(String-Bereich)
{
Rückgabebereich;
}

Gemäß den Ratschlägen seriöser Quellen verwenden wir aus Sicherheitsgründen im Allgemeinen HttpPost (oder HttpGet = false), um auf Webmethoden zuzugreifen. Anschließend konfigurieren wir das zurückgegebene Datenformat im JSON-Format (der Standardmodus ist der JSON-Modus).

Der Einfachheit halber gibt die GetAreaInfo-Methode hier nur den gleichen Wert des Eingabeparameters zurück, aber in der tatsächlichen Entwicklung sollten wir ihn hier ersetzen, um Daten aus der Datenbank abzurufen.

Bisher haben wir erfolgreich einen Webdienst erstellt, der mithilfe von AJAX vom Client aufgerufen wird.

Allerdings müssen wir auch einige entsprechende Konfigurationen für den Server-Control-ScriptManager auf der Seite vornehmen, wie unten gezeigt:

Das Folgende ist ein zitiertes Fragment:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Dienste>
<asp:servicereference path="~/LocationService.asmx" />
</services>
</asp:ScriptManager>

Hier haben wir nur eine Dienstreferenz unter dem Knoten hinzugefügt, aber welche Rolle spielt sie?

Aus der Analyse des generierten HTML-Quellcodes generiert die obige Konfiguration den folgenden Inhalt:

Das Folgende ist ein Referenzfragment:

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

Das Skript-Tag verweist hier auf eine JavaScript-Datei LocationService.asmx/jsdebug. Tatsächlich handelt es sich hierbei um eine Webdienst-Proxy-Klasse. Über diese Proxy-Klasse können wir den serverseitigen Webdienst asynchron vom Client aus aufrufen.

Noch interessanter ist, dass Sie, wenn Sie einfach den oben gezeigten Pfad in Ihren Browser kopieren, eine von der AJAX-Umgebung zur Laufzeit generierte JavaScript-Datei sehen – diese Datei stellt die Skriptdienstaufrufe zur Verfügung. Wir werden die Proxy-Klasse nicht ausführlich besprechen.

Schauen wir uns als Nächstes an, wie Sie eine benutzerdefinierte Clientklasse erstellen.

4. Clientseitige benutzerdefinierte Klassen erstellen

Wir wissen, dass eine der wichtigsten „Erfindungen“ des ASP.NET AJAX-Frameworks darin besteht, dass es das objektorientierte JavaScript-Programmiermodell einführt. Mithilfe von JavaScript-Entwurfsmustern können wir jetzt ganz einfach unsere eigenen Vorlagen oder Klassen erstellen, Vererbungskonzepte hinzufügen, Schnittstellen und Aufzählungen erstellen usw.

In diesem Artikel entwickeln wir eine Client-Klasse, die alle in diesem Beispiel erforderlichen Funktionen kapselt.

Klicken Sie nun mit der rechten Maustaste auf das Projekt und fügen Sie eine neue JavaScript-Datei namens ImageMap hinzu. In dieser Datei definieren wir einen neuen Namespace MyServices; dieser Namespace enthält die Client-Klassen, die wir entwickeln werden. Wie unten gezeigt:

Das Folgende ist ein Fragment des Zitats:
Type.registerNamespace("MyServices");

Als nächstes definieren wir den Konstruktor der Client-Klasse, die wir erstellen möchten:

Hier ist das Referenz-Snippet:

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

Eine Vorlage oder ein Klassenkonstruktor ist nichts anderes als eine gewöhnliche JavaScript-Funktion. Dieser Konstruktor hat zwei Parameter: uiElement und uiBody.

Beide Parameter werden verwendet, um das auf der Seite angezeigte Popup-Fenster zu beschreiben. Die anderen beiden privaten Variablen _xAxis und _yAxis werden verwendet, um die Anzeigeposition des Popup-Fensters zu beschreiben. Normalerweise ist es am besten, alle privaten Mitglieder im Konstruktor zu deklarieren.

Als Nächstes verwenden wir das Prototyp-Entwurfsmuster, um die Mitgliedsfunktionen und -eigenschaften in dieser Klasse zu schreiben:

Hier ist das Referenzfragment:

MyServices.Location.prototype =
{
get_uiElement: function()
{
return this._uiElement;
},
set_uiElement: Funktion(Wert)
{
this._uiElement = value;
},
get_uiBody: function()
{
return this._uiBody;
},
set_uiBody: Funktion(Wert)
{
this._uiBody = value;
},

Beachten Sie, dass die Definition der UI-Elementattributmethode hier der Definitionsform in verschiedenen Sprachen in .NET sehr ähnlich ist.

Unser Fokus liegt auf der folgenden Mitgliedsfunktion, die für den Aufruf des Remote-Webdienstes verantwortlich ist:

Das Folgende ist ein Referenzfragment:
ShowPopupinfo: Funktion(Ereignis, Bereichsname)
{
MyServices.LocationService.GetAreaInfo(areaName,
Function.createDelegate(this, this.OnCompleted),
this.OnError, //Callback-Funktion, die für die Fehlerbehandlung verantwortlich ist
this.OnTimeOut); //Callback-Funktion, die für die Timeout-Verarbeitung verantwortlich ist
this._xAxis = event.clientX;
this._yAxis = event.clientY;
}

Der obige Code zeigt eine sehr typische Methode zum Aufrufen eines Webdienstes vom Client aus:

1) Das Formular ist fast so praktisch wie der Aufruf einer gewöhnlichen lokalen Methode.

2) Die Funktion Function.createDelegate ist in der globalen ASP.NET AJAX-Cliententwicklung äußerst wichtig Funktion. Einer der ursprünglichen Zwecke bei der Erstellung dieser Funktion bestand darin, das Problem dieses Schlüsselworts zu lösen. In einem durch ein DOM-Element ausgelösten Ereignishandler bezieht sich das Schlüsselwort this immer auf das DOM-Element und nicht auf die Klasse selbst. Der Grund, warum wir diese Funktion hier verwenden, besteht jedoch darin, dass die AJAX-Umgebung die Rückruffunktion bei Erfolg in derselben Klasseninstanz aufruft, die den Webdienst ausgelöst hat. Dies ist sehr wichtig, wenn Sie auf Eigenschaften und Methoden von Clientklassen verweisen müssen. Kurz gesagt, die Verwendung dieser Funktion macht den Zugriff auf die Eigenschaften und Methoden der Client-Klasse, die den Webdienst aufruft, sicher und genau. Andernfalls ist die Clientklasseninstanz, die den asynchronen Aufruf ausführt, null, da die Antwort des Webdiensts in einem anderen Kontext ausgeführt wird – dieser Kontext entspricht nicht mehr dem Kontext, in dem die asynchrone Webaufrufanforderung gestellt wurde.

3) Interessanterweise ist die GetAreaInfo-Methode hier nicht diejenige im Webdienst, den wir zuvor erstellt haben, sondern gehört zur Webdienst-Proxy-Klasse, die zur Laufzeit erstellt wird – diese Proxy-Klasse fungiert als Client-Proxy für den Zugriff auf den ASMX-Webdienst auf der Serverseite . .

In den letzten beiden Codezeilen der obigen ShowPopupInfo-Funktion werden die Eingabeparameter des Ereignisses verwendet, um die Werte der beiden privaten Variablen xAxis und yAxis festzulegen. Unser Ziel hierbei ist es, das Popup so nah wie möglich an der Stelle anzuzeigen, auf die der Benutzer geklickt hat.

Das Folgende ist der Implementierungscode der entsprechenden Rückruffunktion, wenn der Aufruf erfolgreich ist:

Das Folgende ist ein Referenzfragment:

OnCompleted: function(result, userContext, methodName)
{
var uiElement = $get(this.get_uiElement());
var uiBody = $get(this.get_uiBody());
if (uiBody != null)
{
var textNode = uiBody.firstChild;
if (!textNode)
{
textNode = document.createTextNode(result);
uiBody.appendChild(textNode);
}
anders
{
textNode.nodeValue = Ergebnis;
}
if (uiElement != null)
{
uiElement.style.visibility = "visible";
uiElement.style.display = "inline";
uiElement.style.left = this._xAxis + "px";
uiElement.style.top = this._yAxis + "px";
}
}
},

Der Inhalt ist ganz einfach: Stellen Sie die vom Server zurückgegebenen Daten auf den Anzeigeinhalt des Popup-Fensters ein und stellen Sie sicher, dass dieses Fenster entsprechend der Situation angezeigt wird.

Am Ende der Erstellung der Client-Klasse müssen wir das AJAX-Framework außerdem anweisen, sie auf der Client-Seite zu registrieren, damit vom Client aus darauf zugegriffen werden kann:

Hier ist der Zitatausschnitt:
MyServices.Location.registerClass("MyServices.Location");

Zu diesem Zeitpunkt wurde die Clientklasse MyServices.Location erfolgreich erstellt. Wie benutzt man es also?

Zuerst müssen wir beim Laden der Seite eine neue Instanz der Client-Klasse definieren. Dazu müssen wir die pageLoad-Funktion einprogrammieren:

Hier ist der Zitatausschnitt:
var location = null;
Funktion pageLoad(sender, args) {
location = new MyServices.Location("modal", "modalBody");
location.HidePopupInfo();
}

Der obige Code erstellt einfach eine neue Instanz der MyServices.Location-Klasse. Rufen Sie dann eine der Mitgliedsfunktionen der Client-Klasse auf, um das Popup-Fenster auf der Seite auszublenden. Warum erstellen wir eine Instanz der Client-Klasse in der pageLoad-Funktion? Der Grund dafür ist, dass der gesamte AJAX-Client und der benutzerdefinierte JavaScript-Code erfolgreich geladen wurden, wenn der Kontrollfluss der AJAX-Umgebung die pageLoad-Funktion erreicht. Daher können wir in diesem Moment sicher auf jeden vom Benutzer oder System definierten JavaScript-Code zugreifen.

Einige andere Werkzeugfunktionen sind relativ einfach und werden hier nicht im Detail beschrieben.

5. Zusammenfassung

In diesem Artikel habe ich Ihnen gezeigt, wie Sie das HTML-Map-Steuerelement erweitern, indem Sie einen AJAX-Dienst und Ihre eigene benutzerdefinierte Client-Klasse erstellen. Wenn im erweiterten Steuerelement auf einen bestimmten Bereich im Bild geklickt wird, können wir über eine neue AJAX-Methode relevante Detailinformationen bereitstellen, ohne die gesamte Webseite aktualisieren zu müssen. Obwohl wir dieses Kartensteuerelement in den meisten Webanwendungen selten verwenden (möglicherweise wird es aus diesem Grund in der VS2005-Symbolleiste weggelassen), wenn wir jedoch Webanwendungen entwickeln, die sich auf eine große Anzahl von Bildern, Bildern und Kartenoperationen beziehen, wird die Karte nach der AJAX-Transformation verwendet Basierend auf diesem Artikel werden Steuerelemente Ihre Webanwendung definitiv bunter machen.

[Anhang] Die Quellcode-Debugging-Umgebung dieses Artikels: Windows XP Professional Edition + Visual Studio 2005 + ASP.NET AJAX 1.0.