ASP.NET AJAX-Serversteuerelemente mit clientseitiger Funktionalität

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Im Verlauf dieses Lernprogramms erfahren Sie, wie Sie ein benutzerdefiniertes ASP.NET AJAX-Serversteuerelement als Wrapper für die Google Maps JavaScript-API erstellen. Der serverseitige Code wird in C# geschrieben (was ich sehr empfehlen kann), aber er kann genauso gut in VB.NET geschrieben werden. Der Schwerpunkt wird auf der Erstellung des Steuerelements liegen, und wir werden uns den gesamten Prozess der Erstellung eines benutzerdefinierten ASP.NET AJAX-Serversteuerelements mit clientseitigen Funktionen genauer ansehen.

Anfangen

Wenn Sie Visual Studio noch nicht installiert haben, sollten Sie die neueste Express Edition herunterladen.

Sobald dies erledigt ist, starten Sie es und gehen Sie zu Datei -> Neu -> Projekt. Wählen Sie in der Liste links im Hauptfenster rechts die Option Web und anschließend ASP.NET AJAX Server Control aus. Benennen Sie das Projekt MapControl und stellen Sie sicher, dass die Option zum Erstellen einer neuen Lösung ausgewählt ist (falls zutreffend). Klicken Sie auf OK, um das Projekt zu erstellen.

Wenn Sie im Projektmappen-Explorer nachsehen, werden Sie feststellen, dass Visual Studio bereits einige Dateien für uns generiert hat. Wir werden den generierten Code ein wenig untersuchen, aber bevor wir dies tun, benennen wir die Dateien und die in den Dateien enthaltenen Klassen um.

Benennen Sie ClientControl1.js in GoogleMap.js um
Benennen Sie ClientControl1.resx in GoogleMap.resx um
Benennen Sie ServerControl1.cs in GoogleMap.cs um

Drücken Sie nun Strg + H, um das Fenster zum schnellen Ersetzen aufzurufen. Wählen Sie die entsprechenden Optionen aus, um ServerControl1 durch GoogleMap zu ersetzen. Stellen Sie sicher, dass es im gesamten Projekt und nicht nur in der aktuellen Datei angezeigt wird, und klicken Sie dann auf Alle ersetzen. Gehen Sie jetzt genauso vor, um ClientControl1 durch GoogleMap zu ersetzen.

GoogleMap.js - Client-Seite

Lassen Sie uns GoogleMap.js Stück für Stück auseinander brechen.

<reference name="MicrosoftAjax.js"/>

In dieser Zeile wird die IntelliSense-Engine von Visual Studio lediglich angewiesen, die in MicrosoftAjax.js enthaltenen Typen und Methoden in die IntelliSense-Dropdown-Listen aufzunehmen.

Type.registerNamespace("MapControl");

MapControl.GoogleMap = function(element) {
    MapControl.GoogleMap.initializeBase(this, [element]);
}

In der ersten Zeile wird der Namespace MapControl beim AJAX-Framework registriert. Der Rest des Codes fungiert hier als Konstruktor für die Clientklasse unseres benutzerdefinierten Steuerelements. Hier werden wir alle privaten Immobilien auf der Client-Seite deklarieren.

MapControl.GoogleMap.prototype = {
    initialize: function() {
        MapControl.GoogleMap.callBaseMethod(this, 'initialize');
        
        // Add custom initialization here
    },
    dispose: function() {        
        //Add custom dispose actions here
        MapControl.GoogleMap.callBaseMethod(this, 'dispose');
    }
}

Hier wird die Client-Klasse unseres benutzerdefinierten Steuerelements anhand des Prototypmodells definiert. Hier werden alle Methoden für die Clientklasse deklariert. Wie Sie wahrscheinlich vermutet haben, werden die initialize- und dispose methoden beim Erstellen bzw. Zerstören einer Instanz dieser Klasse automatisch aufgerufen. In diesem Fall verwenden wir die initialize methode, um die Google Maps-API aufzurufen und die Karte einzurichten.

MapControl.GoogleMap.registerClass('MapControl.GoogleMap', Sys.UI.Control);

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Der erste Teil hier registriert die Klasse mit dem definierten Klassennamen und Namespace und weist auch eine Basisklasse (Sys.UI.Control) zu. Zuletzt wird Sys.Application.notifyScriptLoaded() aufgerufen, wodurch das Microsoft AJAX-Framework benachrichtigt wird, dass das Skript vollständig geladen wurde. Beachten Sie, dass dies in .NET Framework 4 und höher nicht mehr erforderlich ist.

GoogleMap.cs - Serverseitiger Code

In der Datei mit dem Namen GoogleMap.cs ist der gesamte serverseitige Code enthalten. Wenn Sie die Datei öffnen, werden Sie als Erstes feststellen, dass sie eine Klasse namens GoogleMap enthält, die von der ScriptControl-Klasse erbt. ScriptControl ist eine abstrakte Basisklasse, die von WebControl erbt und IScriptControl implementiert.

public class GoogleMap : ScriptControl

Obwohl es in Ordnung wäre, dies so zu belassen, können wir eine flexiblere Situation schaffen, indem wir IScriptControl direkt implementieren und stattdessen von WebControl erben. Auf diese Weise eröffnen wir die Möglichkeit, von einer komplexeren Basisklasse wie ListControl zu erben. Ich bin auch unter verschiedenen Umständen auf Probleme gestoßen, die von ScriptControl geerbt wurden. Lassen Sie es uns jetzt wie folgt ändern:

public class GoogleMap : WebControl, IScriptControl

Wenn Sie am Konstruktor vorbeikommen, sehen Sie die Methoden GetScriptDescriptors und GetScriptReferences.

protected override IEnumerable<ScriptDescriptor>
            GetScriptDescriptors()
{
    ScriptControlDescriptor descriptor = new ScriptControlDescriptor("MapControl.GoogleMap", this.ClientID);
    yield return descriptor;
}

// Generate the script reference
protected override IEnumerable<ScriptReference>
        GetScriptReferences()
{
    yield return new ScriptReference("MapControl.GoogleMap.js", this.GetType().Assembly.FullName);
}

Da wir IScriptControl direkt implementieren, müssen die Modifikatoren der Zugriffsebene von "geschützt" in "öffentlich" geändert werden, und die Modifikatoren zum Überschreiben sollten vollständig entfernt werden.

In der GetScriptDescriptors-Methode teilt das erstellte und zurückgegebene ScriptControlDescriptor-Objekt dem Framework mit, welche Clientklasse instanziiert werden soll, und übergibt auch die ID des HTML-Elements, das der aktuellen Instanz des Steuerelements zugeordnet ist. Wie Sie im nächsten Abschnitt sehen werden, ist dies auch der Mechanismus, über den Eigenschaftswerte vom serverseitigen Code an die Clientklasse übergeben werden.

Der Code in der GetScriptReferences-Methode fügt unserer Client-Codedatei einfach eine ScriptReference hinzu - sie wird bei Bedarf automatisch vom Framework geladen.

Eigenschaften definieren

Okay, jetzt, da wir einige Hintergrundinformationen haben, ist es Zeit, mit dem Aufbau des Kartensteuerelements zu beginnen. Zunächst fügen wir der serverseitigen Klasse (in GoogleMap.cs) einige Eigenschaften hinzu, wobei wir uns vorerst nur an die Grundlagen halten. Der Zoom und der Mittelpunkt der Karte sind die notwendigen Eigenschaften.

Zoom
CenterLatitude
CenterLongitude

private int _Zoom = 8;
public int Zoom
{
    get { return this._Zoom; }
    set { this._Zoom = value; }
}

public double CenterLatitude { get; set; }
public double CenterLongitude { get; set; }

Sie fragen sich möglicherweise, wie die in der serverseitigen Klasse definierten Werte dieser Eigenschaften in der Clientklasse enden werden. Hier kommt der ScriptControlDescriptor ins Spiel. Durch einfaches Aufrufen der AddProperty-Methode des ScriptControlDescriptor und Übergeben des clientseitigen Eigenschaftsnamens und des aktuellen Werts kümmert sich das Framework um alle Details.

public IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
    ScriptControlDescriptor descriptor = new ScriptControlDescriptor("MapControl.GoogleMap", this.ClientID);
    descriptor.AddProperty("zoom", this.Zoom);
    descriptor.AddProperty("centerLatitude", this.CenterLatitude);
    descriptor.AddProperty("centerLongitude", this.CenterLongitude);
    yield return descriptor;
}

Jetzt müssen wir die Eigenschaften in der Client-Klasse definieren. Öffnen Sie GoogleMap.js und ändern Sie den Konstruktor so, dass er wie folgt aussieht:

MapControl.GoogleMap = function(element) {
    MapControl.GoogleMap.initializeBase(this, [element]);

    this._zoom = null;
    this._centerLatitude = null;
    this._centerLongitude = null;
}

Um diese Eigenschaften für das ASP.NET AJAX-Framework zugänglich zu machen, müssen wir get- und set-Accessoren definieren. Diese Zugriffsmethoden müssen den Namenskonventionen des Frameworks entsprechen. Beispielsweise sollten die Zugriffsmethoden für die zoom-Eigenschaft get_zoom und set_zoom heißen. Fügen Sie der Prototypdeklaration für die Klasse den folgenden Code hinzu:

get_zoom: function() {
    return this._zoom;
},
set_zoom: function(value) {
    if (this._zoom !== value) {
        this._zoom = value;
        this.raisePropertyChanged("zoom");
    }
},
get_centerLatitude: function() {
    return this._centerLatitude;
},
set_centerLatitude: function(value) {
    if (this._centerLatitude !== value) {
        this._centerLatitude = value;
        this.raisePropertyChanged("centerLatitude");
    }
},
get_centerLongitude: function() {
    return this._centerLongitude;
},
set_centerLongitude: function(value) {
    if (this._centerLongitude !== value) {
        this._centerLongitude = value;
        this.raisePropertyChanged("centerLongitude");
    }
}

Die Methode raisePropertyChanged wird für eine Vorgängerklasse, Sys.Component, definiert und löst das propertyChanged-Ereignis für die angegebene Eigenschaft aus.

Karte erstellen

Wir werden den Code, der die Karte erstellt, in nur einer Minute schreiben, aber zuerst müssen wir eine Eigenschaft definieren, in der das Kartenobjekt gespeichert wird. Auf diese Weise können wir nach der Erstellung auf die Karte zugreifen, beispielsweise in einem Ereignishandler. Fügen Sie dem Konstruktor für die Clientklasse (GoogleMap.js) nach den anderen Eigenschaften die folgende Eigenschaftsdeklaration hinzu:

    this._mapObj = null;

Fügen wir nun dem Prototyp eine createMap-Funktion hinzu:

createMap: function() {
        var centerPoint = new google.maps.LatLng(this.get_centerLatitude(), this.get_centerLongitude());
        var options = {
            zoom: this.get_zoom(),
            center: centerPoint,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
      this._mapObj = new google.maps.Map(this._element, options);
}

Der Typ google.maps.LatLng wird in der Google Maps JavaScript-API definiert (auf die wir später verweisen werden) und stellt, wie Sie wahrscheinlich vermutet haben, einen Punkt auf der Karte dar, der durch Breiten- / Längengrad definiert ist. In den Kartenoptionen setzen wir den Zoom und den Mittelpunkt der Karte auf die vom Framework übergebenen Werte. Es wird ein Kartentyp einer Roadmap festgelegt, der jedoch leicht auf Satellit oder Gelände eingestellt werden kann.

In der letzten Zeile wird das Objekt google.maps.Map erstellt und ein Verweis darauf in der oben erstellten Eigenschaft gespeichert.

Sie werden feststellen, dass der Konstruktor zwei Parameter verwendet - insbesondere der erste ist ein Verweis auf das dem Steuerelement zugeordnete HTML-Element - der zweite übergibt nur die Kartenoptionen.

Jetzt müssen Sie auf der Clientseite nur noch unsere neue Funktion createMap über die Initialisierungsfunktion aufrufen, damit die Zuordnung beim Initialisieren des Steuerelements erstellt wird.

initialize: function() {
    MapControl.GoogleMap.callBaseMethod(this, 'initialize');

    this.createMap();
},

Feinschliff

Zurück im serverseitigen Code (GoogleMap.cs) müssen wir die TagKey-Eigenschaft in unserer GoogleMap-Klasse überschreiben und den Wert HtmlTextWriterTag.Div zurückgeben. Dadurch wird sichergestellt, dass das Steuerelement als HTML-Div-Element gerendert wird.

protected override HtmlTextWriterTag TagKey
{
    get
    {
        return HtmlTextWriterTag.Div;
    }
}

Fügen wir der Klasse nun ein privates Feld vom Typ ScriptManager hinzu - wir nennen es sm. Dadurch wird ein Verweis auf den ScriptManager der Seite gespeichert, den wir in Kürze verwenden werden.

    private ScriptManager sm;

Als Nächstes überschreiben wir die OnPreRender- und Render-Methoden der GoogleMap-Klasse.

protected override void OnPreRender(EventArgs e)
{
    if (!this.DesignMode)
    {
        // Test for ScriptManager and register if it exists
        sm = ScriptManager.GetCurrent(Page);

        if (sm == null)
            throw new HttpException("A ScriptManager control must exist on the current page.");

        sm.RegisterScriptControl(this);
    }

    base.OnPreRender(e);
}

Hier erhalten wir im Grunde nur den ScriptManager der aktuellen Seite (und stellen sicher, dass er vorhanden ist!) Und registrieren dann die aktuelle Instanz des Steuerelements. Dieser und der nächste Schritt sind unbedingt erforderlich - andernfalls funktioniert die Client-Seite des Steuerelements nicht.

protected override void Render(HtmlTextWriter writer)
{
    if (!this.DesignMode)
        sm.RegisterScriptDescriptors(this);

    base.Render(writer);
}

Dadurch werden die Skriptdeskriptoren des Steuerelements im ScriptManager der Seite registriert. Sm ist ein Verweis auf den ScriptManager, den wir in der OnPreRender-Methode abgerufen haben.

Zuletzt (vorerst!) Werden wir dieses Steuerelement mit Teilvertrauensszenarien kompatibel machen, wie es aufgrund der Beliebtheit von Shared Web Hosting durchaus üblich ist. Öffnen Sie im Projektmappen-Explorer den Ordner Eigenschaften und anschließend AssemblyInfo.cs. Fügen Sie die folgende Referenz oben in der Datei hinzu.

using System.Security;

Fügen Sie die folgende Zeile irgendwo in der Mitte oder am unteren Rand der Datei hinzu.

[assembly: AllowPartiallyTrustedCallers()]

Testen der Kartensteuerung

Jetzt sind wir bereit, die Kontrolle für eine Probefahrt zu übernehmen. Wir werden später zurückkommen und weitere Funktionen hinzufügen, aber jetzt richten wir eine kleine Website ein, um das Steuerelement zu testen. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Lösungsknoten und wählen Sie Hinzufügen -> Neue Website. Stellen Sie sicher, dass die ASP.NET-Website aus der Liste ausgewählt ist. Benennen Sie die Website MapControlTest und klicken Sie auf OK.

Fügen Sie in der neu erstellten Datei Default.aspx der Seite direkt innerhalb des Formularelements einen ScriptManager hinzu. Denken Sie im letzten Abschnitt daran, dass dies auf der Seite erforderlich ist, damit unser GoogleMap-Steuerelement funktioniert.

<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="ScriptManager1">
    </asp:ScriptManager>
    <div>
    </div>
    </form>
</body>

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den MapControlTest-Websiteknoten und wählen Sie im Popup-Menü die Option Referenz hinzufügen. Navigieren Sie zur Registerkarte Projekte, wählen Sie MapControl aus und klicken Sie auf OK. Jetzt müssen wir die Assembly und den Namespace in Default.aspx registrieren. Fügen Sie die folgende Zeile am oberen Rand der Datei direkt über der DOCTYPE-Deklaration hinzu.

<%@ Register Namespace="MapControl" TagPrefix="mc" Assembly="MapControl" %>

Zu diesem Zeitpunkt sollten Sie die Lösung erstellen (Build -> Build Solution oder die Taste F6), damit IntelliSense für das neue Steuerelement ordnungsgemäß funktioniert. Fügen Sie nun der Seite die folgende Steuerdeklaration hinzu.

<mc:GoogleMap runat="server" CenterLatitude="36.1658" CenterLongitude="-86.7844" Width="500" Height="500">
</mc:GoogleMap>

Zuletzt fügen Sie das Google Maps JavaScript API-Skript (im Kopf der Seite) hinzu.

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Klicken Sie nun mit der rechten Maustaste in den Editor (für Default.aspx) und wählen Sie im Popup-Menü die Option Im Browser anzeigen. Ihr Browser sollte die Seite mit der Karte in Nashville, TN, öffnen und laden. Sie können mit den Steuerelementeigenschaften herumspielen, um sicherzustellen, dass alles ordnungsgemäß funktioniert. Fügen Sie insbesondere die Zoom-Eigenschaft hinzu und beobachten Sie den Effekt auf der Karte.

Markierungen hinzufügen

Eine einfache Karte ist jedoch nicht so aufregend. In diesem Abschnitt werden einige Funktionen hinzugefügt, mit denen Markierungen auf der Karte angezeigt werden können.

Zuerst benötigen wir eine Klasse, die Informationen zu jedem Marker enthält. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den MapControl-Projektknoten und wählen Sie im Popup-Menü Hinzufügen -> Klasse. Benennen Sie die Klasse MapMarker und klicken Sie auf OK.

Das Attribut Serializable muss der Klasse hinzugefügt werden, damit es serialisiert und an den clientseitigen Code übergeben werden kann.

Fügen Sie der Klasse Eigenschaften hinzu, damit die Klassendeklaration so aussieht.

[Serializable]
public class MapMarker
{
    public double Latitude { get; set; }
    public double Longitude { get; set; }
    public string Title { get; set; }
    public virtual string InfoWindowHtml { get; set; }

    public MapMarker()
    {
    }
}

Die Eigenschaften Latitude und Longitude liegen auf der Hand - die Title-Eigenschaft bezieht sich auf den QuickInfo-Text, der angezeigt wird, wenn sich die Maus über der Markierung befindet, und die InfoWindowHtml-Eigenschaft enthält die HTML-Datei, die in einem Popup angezeigt wird, wenn auf die Markierung geklickt wird.

In der serverseitigen GoogleMap-Klasse (GoogleMap.cs) fügen wir eine Eigenschaft einer Liste von MapMarkers hinzu. Das PersistenceMode-Attribut gibt an, dass die Eigenschaft im ASP.NET-Serversteuerelement als verschachteltes Tag erhalten bleibt.

private List<MapMarker> markers = new List<MapMarker>();

[PersistenceMode(PersistenceMode.InnerProperty)]
public List<MapMarker> Markers
{
    get { return this.markers; }
}

Das ParseChildren-Attribut muss auch für die GoogleMap- Klasse gesetzt werden, damit dies funktioniert.

[ParseChildren(true)]
public class GoogleMap : WebControl, IScriptControl

Jetzt fügen wir dem ScriptControlDescriptor in der GetScriptDescriptors-Methode eine weitere Eigenschaft für die neue Eigenschaft hinzu.

public IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
    ScriptControlDescriptor descriptor = new ScriptControlDescriptor("MapControl.GoogleMap", this.ClientID);
    descriptor.AddProperty("zoom", this.Zoom);
    descriptor.AddProperty("centerLatitude", this.CenterLatitude);
    descriptor.AddProperty("centerLongitude", this.CenterLongitude);
    descriptor.AddProperty("markers", this.Markers);
    yield return descriptor;
}

Wechseln Sie zurück zum clientseitigen Code (GoogleMap.js) und fügen Sie dem Konstruktor eine neue Eigenschaftsdeklaration namens _markers hinzu. Wenn wir schon mal hier sind, fügen wir auch eine Eigenschaft namens _infoWindow hinzu, die einen Verweis auf ein Popup-Fenster speichert, das erscheint, wenn ein Marker angeklickt wird.

MapControl.GoogleMap = function(element) {
    MapControl.GoogleMap.initializeBase(this, [element]);

    this._zoom = null;
    this._centerLatitude = null;
    this._centerLongitude = null;
    this._markers = null;

    this._mapObj = null;
    this._infoWindow = null;
}

Jetzt müssen wir die get- und set-Accessoren für die Eigenschaft wie zuvor hinzufügen.

get_markers: function() {
    return this._markers;
},
set_markers: function(value) {
    if (this._markers !== value) {
        this._markers = value;
        this.raisePropertyChanged("markers");
    }
},

Jetzt müssen Sie nur noch den Code hinzufügen, der die Markierungen zur Funktion createMap anzeigt.

createMap: function() {
    var centerPoint = new google.maps.LatLng(this.get_centerLatitude(), this.get_centerLongitude());
    var options = {
        zoom: this.get_zoom(),
        center: centerPoint,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    this._mapObj = new google.maps.Map(this._element, options);

    var markers = this.get_markers();
    if (markers != null) {
        for (var i = 0; i < markers.length; i++) {
            var marker = new google.maps.Marker
            (
                {
                    position: new google.maps.LatLng(markers[i].Latitude, markers[i].Longitude),
                    map: this._mapObj,
                    title: markers[i].Title
                }
            );

            var that = this;
            (function(marker, infoHtml) {
                google.maps.event.addListener(marker, 'click', function() {

                    if (!that._infoWindow) {
                        that._infoWindow = new google.maps.InfoWindow();
                    }

                    that._infoWindow.setContent(infoHtml);

                    that._infoWindow.open(that._mapObj, marker);

                });
            })(marker, markers[i].InfoWindowHtml);
        }
    }
}

Das mag kompliziert aussehen, ist es aber wirklich nicht - ich werde es auseinander brechen und Stück für Stück durchgehen.

var markers = this.get_markers();
if (markers != null) {
   for (var i = 0; i < markers.length; i++) {

Hier erhalten wir nur das Array von Markern, stellen sicher, dass es sich nicht um eine Nullreferenz handelt, und durchlaufen das Array.

var marker = new google.maps.Marker
(
    {
        position: new google.maps.LatLng(markers[i].Latitude, markers[i].Longitude),
        map: this._mapObj,
        title: markers[i].Title
    }
);

Mit diesem Codeausschnitt wird der Karte tatsächlich die Markierung hinzugefügt. Dabei werden position und title der Markierung über markers[i] aus dem Array abgerufen und die map-Eigenschaft auf die zuvor erstellte Karte festgelegt.

var that = this;
(function(marker, infoHtml) {
    google.maps.event.addListener(marker, 'click', function() {

        if (!that._infoWindow) {
            that._infoWindow = new google.maps.InfoWindow();
        }

        that._infoWindow.setContent(infoHtml);

        that._infoWindow.open(that._mapObj, marker);

    });
})(marker, markers[i].InfoWindowHtml);

Die erste Zeile besteht darin, den aktuellen Kontext im Ereignishandler beizubehalten. this wird dort nicht mehr auf unser benutzerdefiniertes Steuerelement verwiesen. that verwenden wir diesen stattdessen. Da wir das Array durchlaufen und sich die Variablen marker und i ändern, müssen wir die Variablen marker und infoHtml an eine neue selbstausführende anonyme Funktion übergeben, damit beim Auslösen des Ereignishandlers (der später ausgeführt wird) die Variablen haben immer noch ihre korrekten Werte. Der Code im Ereignishandler ist ziemlich einfach - im Grunde genommen wird nur der Inhalt des Popup-Infofensters festgelegt und geöffnet.

Jetzt können wir der Karte Markierungen wie diese hinzufügen (möglicherweise müssen Sie die Lösung zuerst neu erstellen, damit IntelliSense funktioniert).

<mc:GoogleMap runat="server" CenterLatitude="36.1658" CenterLongitude="-86.7844" Width="500" Height="500">
    <Markers>
        <mc:MapMarker Latitude="36.1658" Longitude="-86.7844" Title="Nashville, TN" InfoWindowHtml="<strong>Nashville, TN</strong>" />
    </Markers>
</mc:GoogleMap>

Wenn Markierungen durch Benutzereingaben auf der Karte platziert würden, müssten Sicherheitsprobleme berücksichtigt werden. Insbesondere müssten Sie sicherstellen, dass die Benutzereingaben für die Title-Eigenschaft HTML-codiert sind und dass die Eingabe in die InfoWindowHtml-Eigenschaft keine gefährlichen Elemente enthält Code. Wie immer sollte die Sicherheit in einer Produktionsanwendung von größter Bedeutung sein.

Abschluss

In diesem Tutorial haben Sie hoffentlich nicht nur viel über das Erstellen eines benutzerdefinierten ASP.NET AJAX-Serversteuerelements mit clientseitigen Funktionen gelernt, sondern auch ein wenig über die Google Maps-API. Einige von Ihnen denken möglicherweise, dass diese Technologie veraltet ist, da sie für ASP.NET Web Forms gilt. Web Forms ist jedoch immer noch eine sehr praktikable Option für die Entwicklung neuer Webinhalte, insbesondere für einzelne Entwickler, die an kurzen Projekten arbeiten und die Dinge schnell erledigen müssen.

ASP.NET MVC ist wahrscheinlich besser in Bezug auf Flexibilität und Testbarkeit. Der Punkt ist, dass dieses Tutorial nicht die Verwendung einer Technologie gegenüber einer anderen befürwortet; Es wird lediglich eine Technik vermittelt, die beim Erstellen von ASP.NET Web Forms-Anwendungen sehr nützlich sein kann.