Willkommen bei ASP.NET Zone. Anmelden | Registrieren | Hilfe

Übergabe komplexer Objekte per Json Serialisierung von jQuery zu ASP.NET Webservice

Die Übergabe komplexer Objekte an einen Webservice per Json Serialisierung ist grundsätzlich relativ einfach, hin und wieder jedoch etwas tricky.

Warum jQuery und warum Json?
Ich bin ein großer Fan von jQuery. Der Webservice Aufruf erfordert keine Einbindung eines ScriptManagers und ist in weniger als 10 Zeilen Code geschrieben.
Die Datenmenge durch Json Serialisierung ist sehr gering. Bspw. könnte ein Grid mit 1000 Datensätzen etwa 200KB an Daten enthalten.
Json Serialisierte Webservice Methoden erfordern zwingend:
  • Einen HTTP Post request
  • Den Header: "Content-Type: application/json; charset=utf-8"
dies hat allerdings den Sicherheits- Vorteil, dass die Methode nicht über <script src="http://www.domain.de/Webservice.asmx/Methode"> ansprechbar ist, da die Browser das einfügen von eigenen Headern bei einem script Include nicht erlauben. Mehr zum Thema in einem ausführlichen Beitrag von Scott Guthrie.

Los gehts!
Was wird benötigt?
Damit der Webservice per jQuery ansprechbar ist, reicht es, folgendes Attribut hinzuzufügen:

<System.Web.Script.Services.ScriptService()>

Die Einbindung des Webservices über Scriptmanager wird nicht benötigt.

Zum Empfang von Daten liefert eine Webservice Methode bspw. eine List( Of <T> ) zurück.
<WebMethod()>
Public Function GetCustomers() As List( Of Customers )
    Return Customers
End Function
Diese Methode wird per jQuery angesprochen
$.ajax({
    type        : "POST",
    url         : "Webservices.asmx/GetCustomers",
    data        : "",
    contentType : "application/json; charset=utf-8",
    dataType    : "json",
    success     : function( Result ) {
        // Result.d enthält die Customers liste
        $.each( Result.d, function( Key, Value ) {
            alert( Value.Name );
            // ...
        }
    }
}
Zum senden der Daten
<WebMethod()> _
Public Function SetCustomer( ByVal Customer As Customer ) As Boolean
    Dim CustomerName As String = Customer.Name
    ' ....
    Return True
End Function
In Javascript kann man mit Json2 Objekte einfach über JSON.Stringify( <Objekt> ) serialisieren.
Customer = function() {
   this.Name;
}
var CurrentCustomer = new Customer();
    CurrentCustomer.Name = "TestName";

$.ajax({
    type        : "POST",
    url         : "Webservices.asmx/SetCustomer",
    data        : '{"Customer":' + JSON.stringify( CurrentCustomer ) + '}',
    contentType : "application/json; charset=utf-8",
    dataType    : "json",
    success     : function( Result ) {
        // Result.d enthält eine boolschen Wert
        if( Result.d ) {
            alert( "Daten erfolgreich gespeichert." );
        }
    }
}


Anbei gibts noch ein ausführlicheres Beispiel dazu.

Veröffentlicht Montag, 31. August 2009 23:00 von Roberto
Attachment(s): DemojQueryWebservice.zip

Kommentare

# jQuery Plugin selbstgemacht - Dynamisches laden von ASP.NET Controls

Wer kennt sie nicht... die zauberhaften ajax Kekse. Doch was steckt dahinter? In diesem Beitrag werde

Mittwoch, 2. September 2009 23:19 by Roberto's Blog

# re: Übergabe komplexer Objekte per Json Serialisierung von jQuery zu ASP.NET Webservice

Interessante Darstellung, aber mit Blick auf AJAX.PRO viel Arbeit zu Fuß...

Samstag, 12. September 2009 20:34 by Rene Drescher-Hackel

# re: Übergabe komplexer Objekte per Json Serialisierung von jQuery zu ASP.NET Webservice

Hallo Rene,

Ich muss gestehen, dass ich kein extremer Fan von AJAX.Pro bin :)

Diese Variante ist meiner Meinung nach "einfacher". Wer jQuery schonmal verwendet hat und weiß was ein Webservice ist, hat nicht wirklich Probleme damit! Hingegen die Einlernung in AJAX.PRO ist nicht gerade in 10 Minuten gemacht :)

Montag, 14. September 2009 15:55 by Roberto

# ASP.NET Update Panel, Callback und jQuery Webservice - Drei Ajax Techniken im Überblick

Drei Ajax Techniken im Überblick - Das ASP.NET Updatepanel, das Callback und der clientseitige Webservice Aufruf über jQuery. Dieser Artikel zeigt anhand von Beispielen die Vor und Nachteile der einzelnen Techniken.

Dienstag, 3. November 2009 10:05 by Roberto's Blog

# jQuery Plugin selbstgemacht - Dynamisches laden von ASP.NET Controls

Wer kennt sie nicht... die zauberhaften ajax Kekse. Doch was steckt dahinter? In diesem Beitrag werde

Dienstag, 3. November 2009 22:13 by Roberto's Blog
Anonyme Kommentare sind nicht zugelassen