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

 

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”

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 oder [Namespace].[Klasse].MethodenName.

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 ;)