Roberto’s Blog

Ü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?

• eine aktuelle jQuery Library
  
• Einen Json Serializer wie bspw. Json2

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.