Quel est le meilleur moyen d'envoyer un tableau d'objets de JavaScript à un service Web?

Question

J'ai dans mon javascript ces 2 "classes" de fonctions :

// classe produit
function Product() {
 this.id;
 this.qty;
 this.size;
 this.option;
}

// classe chambre
function Room() {
 this.id;
 this.type;
 this.products = [];
}

J'ai ma logique js qui remplit les chambres et leurs produits.

Maintenant je veux envoyer un tableau de chambres à un service web pour faire quelques calculs et obtenir en retour le résultat.

Comment envoyer ces objets tableau au service et quel est le type de données que le service recevra pour boucler et traiter?

J'ai essayé d'écrire le code javascript comme suit:

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "_Services/MyWebService.asmx/CalculatePrices",
            data: "{'rooms':'" + roomsObjects + "'}",
            dataType: "json",
            success: function(result) {
                alert(result.d);
            }
        });

Et le service web comme ceci:

[WebMethod]
    public string CalculatePrices(object rooms)
    {
        return "blabla";
    }

Mais je trouve que les chambres dans le service web sont toujours égales à [object Object]

Answer 1

Pour ce cas, cela fonctionnerait :

//...
   data : '{"rooms":[' + roomsObjects.join() + ']}',
//...

Le code ci-dessus générera une chaîne JSON valide, mais je vous recommande d'obtenir une bibliothèque JSON et d'utiliser la fonction JSON.stringify :

      $.ajax({
              type: "POST",
              contentType: "application/json; charset=utf-8",
              url: "_Services/MyWebService.asmx/CalculatePrices",
              data: JSON.stringify({'rooms': roomsObjects}),
              dataType: "json",
              success: function(result) {
                 alert(result.d);
              }
      });

Answer 2

Si cela ne vous dérange pas d'inclure une petite bibliothèque JavaScript, je pense que l'utilisation de JSON.Stringify de json2.js est la meilleure façon de sérialiser des objets pour les utiliser avec les services ASP.NET AJAX.

Voici un extrait de cet article:

// Initialiser l'objet, avant d'y ajouter des données.
//  { } est une abréviation déclarative pour new Object().
var NewPerson = { };

NewPerson.Prénom = $("#Prénom").val();
NewPerson.Nom = $("#Nom").val();
NewPerson.Adresse = $("#Adresse").val();
NewPerson.Ville = $("#Ville").val();
NewPerson.État = $("#État").val();
NewPerson.CodePostal = $("#CodePostal").val();

// Créer un objet de transfert de données (DTO) avec la structure appropriée.
var DTO = { 'NewPerson' : NewPerson };

$.ajax({
  type: "POST",
  contentType: "application/json; charset=utf-8",
  url: "PersonService.asmx/AddPerson",
  data: JSON.stringify(DTO),
  dataType: "json"
});

Il n'y a pas de tableau dans cet exemple, mais JSON.Stringify sérialise correctement les tableaux JavaScript dans le bon format à envoyer aux services ASP.NET AJAX pour les paramètres de type tableau et liste.

Un avantage d'utiliser JSON.Stringify est que dans les navigateurs qui prennent en charge la sérialisation JSON native (FF 3,5, IE 8, versions nocturnes de Safari et Chrome), il profitera automatiquement des routines natives du navigateur au lieu d'utiliser JavaScript. Ainsi, il bénéficie automatiquement d'une accélération de vitesse dans ces navigateurs.

Answer 3

Changer :

data: "{'rooms':'" + roomsObjects + "'}",

à :

data: {'rooms':roomsObjects},