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

  • image_thumb.png
    NuGet Package Restore & Build Server wie z.B. AppVeyor

    NuGet ist ja mittlerweile weit verbreitet, aber eine Frage stellt sich natテシrlich immer noch: Checkt man die NuGet Packages ein oder nicht? In meinem kleinen Side-Projekt, welches auf GitHub liegt und ich テシber AppVeyor auch bauen lasse nutze ich das Package Restore Feature von NuGet, d.h. in meinem Repository befindet sich kein NuGet Package mehr, […]

  • image.png
    Microsoft Account Login via ASP.NET Identity

    Der Microsoft Account ist die zentrale Identifikationsstelle in der 窶廚onsumer-Microsoft-Welt窶, allerdings ist das Einbinden eben dieser in die eigene Applikation eher schwierig. Das 窶廰ive SDK窶 ist nun unter dem OneDrive Dev Center zu finden und ganz professionell wurden auch alle Links zum alten Live SDK damit unbrauchbar gemacht. Beim Microsoft Account ist es auch unmテカglich […]

  • image.png
    Zeitgesteuerte Azure WebJobs – so einfach kann Azure sein

    Das noch in Entwicklung befindliche Azure WebJob SDK bietet einige coole Features zum Verarbeiten und Bereitstellen von Daten. Bekanntes Beispiel ist das Sample welches auf eine Azure Queue lauscht und sobald ein Item da vorhanden ist anfテ、ngt dies zu verarbeiten. Szenario: Zeitgesteuerte Aktivitテ、ten 窶 ohne Queue und co. Mein Szenario war allerdings wesentlich trivialer: Ich […]

  • image.png
    Get Involved in OSS! Ja, aber wie geht das denn mit GitHub?

    Auch im .NET Lager gibt es Bewegung im OSS Bereich und es gibt verschiedene Arten wie man bei einem Open Source Projekt 窶廚ontributed窶. Was zテ、hlt alles zu 窶廚ontribution窶? Unter 窶廚ontribution窶 lテ、uft eigentlich alles 窶 ob es Fragen/Probleme zu dem Projekt via Issues ist oder Dokumentation nachreicht oder ob man darテシber bloggt oder das Projekt vorstellt. […]

  • HowTo: Web.config samt eigener ConfigSection zur Laufzeit ändern

    In dem HowTo geht es darum wie man die Web.config zur Laufzeit テ、ndert und was es dabei zu beachten gilt. Das ganze klappt auch mit komplexeren ConfigSections. Eigene ConfigSection? Vor einer ganzen Weile habe ich mal テシber das Erstellen einer eigenen ConfigSection geschrieben 窶 im Grunde nutzen wir jetzt fast dieselbe Config. Zur Laufzeit? Startet […]

Support us!