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.png
    Source Code veröffentlichen – aber bitte mit Lizenz

    Seit es den Blog gibt wird auch meist der gesamte Demo Source Code mit verテカffentlicht. Das Ganze hatte ich am Anfang noch als .zip verteilt, spテ、ter lag es mal auf Google Code und nun liegen alle Samples und sonstige Sachen auf GitHub. Beim letzten User Group Treffen in Zテシrich mit dem Titel 窶廾pen Source: Get […]

  • Fix: Cannot convert from ‘CConnectProxy::_ComMapClass *’ to ‘AddInDesignerObjects::IDTExtensibility2 *’

    Mal einen etwas esoterischer Blogpost, welcher auftaucht wenn man zu viel mit Office Addins rumspielt. Der Fehler passiert beim Bauen von C++ Projekten, welchen diesen Typ benテカtigen. Lテカsung (auf 64bit Systemen): C:\Program Files (x86)\Common Files\DESIGNER>regsvr32 MSADDNDR.DLL And Rebuild. Meine lieben Kollegen hatte mir dies schon mehrfach gesagt, allerdings hatte ich es immer wieder vergessen Das […]

  • Gegen das Gesetz verstoßen: X Jahre Haft. Gegen die Terms of Use verstoßen: Bann auf Lebenszeit. Danke Google & co.

    Bei fast allen Diensten die man im Internet nutzen kann muss man den 窶弋erms of use窶 zustimmen. Vテカllig logisch dass da natテシrlich drin steht was erlaubt und was nicht. Wenn man gegen diese Regelungen verstテカテ殳 hat das Unternehmen natテシrlich das Recht etwas dagegen zu unternehmen. In der heutigen Welt beherrschen einige wenige Unternehmen die digitale […]

  • image.png
    RSS Feed samt Kommentaranzahl und andere nicht Standard Elemente mit dem SyndicationFeed auslesen

    Jetzt mal ein Blogpost ohne ein fancy NuGet Package: Seit .NET 3.5 gibt es die SyndicationFeed Klasse. Eine schon etwas テ、ltere API, reicht aber aus um Atom bzw. RSS Feeds zu lesen. In diversen RSS Feeds gibt es aber Erweiterungen, welche man natテシrlich auch auslesen mテカchte. So gibt WordPress z.B. auch die Anzahl der geposteten […]

  • image.png
    ASP.NET Bundling & Fontawesome

    Vor einer halben Ewigkeit hatte ich mal geschrieben wie man Fontawesome in ASP.NET nutzen kann. Aufgrund des Alters des Post und einem Kommentar ob man denn Fontawesome auch in das ASP.NET Bundling Framework integrieren kann mテカchte ich nur ein kurzes Update schreiben. TL;DR: NuGet Package 窶廡ontawesome窶 runterladen und Pfad in der Bundleconfig angeben. Kurze Schritte […]

Support us!