HowTo: Microsoft ASP.NET AJAX (Clientseitiger Aufruf von Webmethoden)

Diese mal geht es um das eigentlich tollste Feature von Microsofts ASP.NET AJAX Framework. Wie wiederholt erwähnt ist das UpdatePanel nicht wirklich ideal, da es erstmal alle Daten zum Server hinschickt und hinterher die Antwort zwar etwas weniger ist, aber trotzdem bei weitem nicht optimal ist.

Daher gibt es so genannte “Scriptmethoden” – es ist eigentlich das, was viele Anfänger in der Webprogrammierung machen wollen: Aus Javascript eine C#/.NET Methode aufrufen.

Wie man das ASP.NET AJAX Framework installiert, ist hier beschrieben.

Schritt 1: ASP.NET AJAX enabled Web Site erstellen

image 

Durch das Template bekommt man am Ende den App_Data Ordner sowie die Default.aspx und die bereits angepasste Web.Config. In der Web.Config sind allerhand Assemblys etc. registriert. Wer interessiert ist, kann sich diese gerne anschauen, allerdings sind da keine weiteren Änderungen notwendig.

Der wichtigeste Teil steht jetztin der Default.aspx: Der Scriptmanager. Dieser ScriptManager übernimmt später die “hässliche” Drecksarbeit – aber dazu erst später.

Schritt 2: Ein Webservice erstellen und “pimpen”

image

Jetzt erstellen wir einen neuen Webservice – der z.B. Datenbanken abfragen kann oder andere Berechnungen durchführen könnte. Bei unserem Beispiel gibt der Webservice nur ein kleinen dummen Text zurück.

Unserer Webservice – die HelloWorld.asmx – verweisst auf die Codebehinde-Datei HelloWorld.cs und dort drin steht unser eigentlicher Code.
Momentan ists es noch genau so, wie bei einem normalen XML Webdienst, nun kommt allerdings das i-Tüpfelchen drauf: Das ScriptService Attribut.
Dieses versteckt sich im System.Web.Script.Services Namespace und muss daher vorher eingebunden werden.

using System;using System.Web;        

using System.Collections;        

using System.Web.Services;        

using System.Web.Services.Protocols;        

using System.Web.Script.Services;/// <summary>        

/// Zusammenfassungsbeschreibung für HelloWorld        

/// </summary>        

[ScriptService]        

[WebService(Namespace = "http://tempuri.org/")]        

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]        

public class HelloWorld : System.Web.Services.WebService {        

public HelloWorld () {        

//Auskommentierung der folgenden Zeile bei Verwendung von Designkomponenten aufheben         

        //InitializeComponent();         

    }        

[WebMethod]        

    public string HelloWorldTest(string name) {        

        return "Hello World" + name;        

    }        

}        

Ganz oben ist der ScriptService eingebunden – ansonsten bleibt alles gleich.

Schritt 3: Dem ScriptManager sagen, dass es den Service gibt

Damit unser ScriptManager auf der Default.aspx auch weiß, dass es den Service gibt und beim Aufruf einen Javascript-Wrapper drum rum setzt, muss er erst bekannt gemacht werden. Der ScriptManager kann auch auf einer Masterpage eingesetzt werden – allerdings ist pro Seite nur einer erlaubt. Mehr wäre auch unsinnig. Hier der benötigte Code:

        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>        

                <asp:ServiceReference Path="HelloWorld.asmx" />        

            </Services>        

        </asp:ScriptManager>        

 

Schritt 4: Das Javascript bauen und die Methode ausprobieren

Jetzt werden wir mal testen, ob das auch wirklich so funktioniert:

    <script language="javascript" type="text/javascript">
    function ladefunktion() 
     {        

    HelloWorld.HelloWorldTest("Reman", onComplete);        

    }        

function onComplete(result)        

    {        

    alert(result);        

    }        

</script>

Die “ladefunktion()” schreiben wir einfach in das body Element als onload oder sonstwo hin und schon sehen wir, ob das klappt: Bei mir klappts. Der Javascript Aufruf der Webmethode ist entweder [Klasse].[MethodenName]([Parameter], [Javascript-Callbacks]) oder [Namespace].[Klasse].[MethodenName]([Parameter], [Javascript-Callbacks]).

Schritt 5: Verstehen was passiert

Der ScriptManager macht wie gesagt die Drecksarbeit davon, er bastelt im Hintergrund einen Javascript Wrapper um die Webmethode. Man kann das auch mit einer Methode machen, welche man im Codebehinde hat, allerdings ist das heute nicht das Thema.
Der Spannende Teil ist der Aufruf der Methode: Er ist identisch mit dem Aufruf als würde ich ihn im Codebehinde ansprechen – mit einem Unterschied – ich übergebe hier 2 Parameter. Einmal meinen direkten Parameter und einmal eine Callback Javascript Methode. Man kann bis zu 3 Callback Methoden angeben. Wenn man nur ein Parameter zusätzlich angibt, ist das die Methode wenn die Anfrage komplett abgearbeitet wurde. Die 2 anderen Parameter die möglich sind, sind für Fehlerfälle gedacht. Leider kann ich momentan nicht sagen, in welcher Reihenfolge die man angeben muss.

Das was als “result” bei der onComplete zurück kommt ist ein JSON – jedenfalls wenn man nichts anderes sagt. Man kann bei dem Service noch ein weiteres Attribute angeben: Das ResponseFormate – wo man zwischen JSON und XML wählen kann:

    [WebMethod] 
    [ScriptMethod(ResponseFormat.Xml)]        

    public string HelloWorldTest(string name) {        

        return "Hello World" + name;        

    }
 

Man kann noch ein paar mehr Parameter angeben, aber so genau wollen wirs ja nicht machen. JSON ist ein sehr schickes, schmales Format, was auch sehr leicht verständlich ist. Auf die Objekte in dem JSON greift man dann so zu “Objekt.Objekt.Objekt…” - ähnlich wie im Codebehinde.

Schritt 6: AJAX Ladebalken einbauen

Einen tollen Ladebalken kann man auch leicht implementieren – ohne irgendwelche komplexen Dinge aus dem Toolkit. Einfach bei der “ladeFunktion” das AJAX-Loader Gif auf “display: block” setzen und bei onComplete wieder auf “display: none”.

Jetzt hat man ne coole Web 2.0 Seite mit dem ASP.NET AJAX Framework gemacht ;)

Fazit:

Also mit diesen tollen Feature kann man sehr schnell seine ganzen Webservices sehr leicht per Javascript erreichen. Natürlich geht das auch ohne das AJAX Framework, aber dadurch geht es doch sehr schnell. Man kann somit jetzt eine ASP.NET Seite bauen, welche im Prinzip nur aus Javascript und Webservices besteht – schöne neue Welt ;)

Letzte Posts

  • Carriage Return / Neue Zeile in Textareas

    Eine kleine Aufgabe: Jede neue Textzeile (Carriage Return/Wenn man Enter drückt ) in einer Textarea soll ein Element in einer Auflistung sein – wie mach ich das jetzt am einfachsten? Eigentlich ein grundlegendes Element im Web und der Nutzer macht bewusst Absätze – daher wäre es nur gerecht, wenn man das auch entsprechend würdigt. Kleine ...

  • image.png
    Doom, Quake, Wolfenstein & co. Source Code auf GitHub

    id Software, die Macher von Doom, Quake, Wolfenstein & co., stellen regelmäßig ihre älteren Spieltitle als Open Source zur Verfügung. Das Ganze runterzuladen fand ich bisher immer recht mühselig, allerdings gibt es seit kurzer Zeit die Sourcen auch auf GitHub. Darunter Spiele wie Doom 3, Quake 3, Wolfenstein für iOS. Wer also schon immer mal ...

  • image.png
    Twitter Bootstrap 2.0 released & “Release Präsentation”

    Wie bereits vom Twitter Bootstrap Team angekündigt wurde offiziel die Version 2.0 des UI Toolskits “Twitter Bootstrap” veröffentlich. Zudem wurden die Slides, welche bei der Release Party gezeigt wurden auch veröffentlicht: Downloads finden sich auf der Twitter Bootstrap Seite auf GitHub.

  • image.png
    Javascript zu Dart Translator

    Dart, Google Javascript Alternative, wurde vor ein paar Monaten vorgestellt und die Webentwickler Szene ist noch etwas gespalten, ob Dart nun überflüssig ist oder einfach nur cool und längst überfällig ist. Um die Sprache näher zu erläutern hat Google die grundlegenden Javascript Basics nach Dart übersetzt. Das Ergebnis ist der “Translator”. Der Name mag momentan ...

  • Twitter Bootstrap 2.0–“Beta”

    Twitter Bootstrap, ein UI-Toolkit für Web-Applikationen von Twitter, erscheint (wie bereits berichtet) demnächst in der Version 2.0. Der offizielle Release ist am 31. Januar, allerdings beginnt jetzt laut Mark Otto (einer der Hauptentwickler von Twitter Bootstrap) die intensive Test-Phase. Das heisst, das es nun offiziel auch die 2.0 Dokumentation online gibt. Im Vergleich zur aktuellen ...