Passage des objets en paramètres lors des appels AJAX

Introduction

L’un des avantages majeurs de l’exploitation de la technologie AJAX avec ASP.NET est la possibilité de sérialiser les objets .NET en passant du serveur au client et de les désérialiser dans l’autre sens en passant du client au serveur. Cela doit se passer en toute transparence mais il faut juste faire attention à la formulation des objets côté JavaScript.

Pré-requis

On suppose que nos lecteurs ont un minimum de connaissances avec la plateforme .NET et avec les pages ASP.NET en technologie AJAX. En outre, on se base dans ce qui suit sur le Framework.NET 3.5 avec l’IDE Microsoft Visual Studio 2008.

Construction de la solution

Construisons une solution web ASP.NET avec une page aspx, un service web et une structure d’objets comme suit :

Nous allons donc faire en sorte qu’on appelle le service web par notre page aspx en communiquant dans le sens serveur client une structure d’objets construite au niveau du serveur et dans l’autre sens, faire passer une structure JSon du client au serveur.

Retourner une structure du serveur

Dans notre page aspx, définissons un bouton html appelant une fonction JavaScript lors de son clique :

<input type="button" value="Retourner une structure du serveur" onclick="javascript: appelRetournerUneStructure();" />

La fonction appelée fait de sa part un appel AJAX vers notre service web en lui passant deux paramètres comme suit :
function appelRetournerUneStructure() {
    var dateDAppel = new Date();
    compteurDAppel++;
    ApplicationWebAjax.ServiceWebAjax.RetournerUneStructure(dateDAppel, compteurDAppel, RetournerUneStructure_SucceededCallback, FailedCallback);
}

Côté serveur, notre service va construire une structure d’objets pour la faire retourner comme valeur de retour de sa fonction « RetournerUneStucture » au client :

[WebMethod]
public MonEspace.MonObjet RetournerUneStructure(DateTime dateDAppel, int compteurDAppel)
{
    MonEspace.MonObjet monObjet = new MonEspace.MonObjet();
    monObjet.MonParamString = "Date d'appel : " + dateDAppel.ToString() + " - Compteur d'appel : " + compteurDAppel.ToString();
    monObjet.MonParamInt = compteurDAppel;
    monObjet.MonParamDecimal = compteurDAppel / 2;
    monObjet.MonParamDateTime = dateDAppel;
    monObjet.MesSousObjets.Add(new MonEspace.MonSousObjet("Param 1"));
    monObjet.MesSousObjets.Add(new MonEspace.MonSousObjet("Param 2"));
    return monObjet;
}

La structure retournée au client peut être exploitée avec du code JavaScript en toute transparence :

function RetournerUneStructure_SucceededCallback(resultat) {
    document.getElementById('testDiv').innerHTML +=
        '<b>Objet reçu du serveur :</b><br />' +
        '<b>    MonParamString = ' + resultat.MonParamString + '</b><br />' +
        '<b>    MonParamInt = ' + resultat.MonParamInt + '</b><br />' +
        '<b>    MonParamDecimal = ' + resultat.MonParamDecimal + '</b><br />' +
        '<b>    MonParamDateTime = ' + resultat.MonParamDateTime + '</b><br />' +
        '<b>    MesSousObjets[0].MonParamString = ' + resultat.MesSousObjets[0].MonParamString + '</b><br />' +
        '<b>    MesSousObjets[1].MonParamString = ' + resultat.MesSousObjets[1].MonParamString + '</b><br />';
}

Vu qu’il s’agit d’une structure JSon, le traitement côté client est assez simplifié puisqu’on retrouve facilement nos attributs avec leurs noms définis côté serveur.

Recevoir une structure au serveur

Définissons un autre bouton html :

<input type="button" value="Recevoir une structure au serveur" onclick="javascript: appelRecevoirUneStructure();" />

Ce bouton appelle la méthode qui se charge en un premier temps de la construction d’une structure JSon conforme à la structure objet définie au serveur, et en deuxième temps de l’appel de la méthode du service web en lui faisant communiquer la structure préconstruite :

function appelRecevoirUneStructure() {
    var monObjet = {
        "MonParamString": "A traiter dans le serveur",
        "MonParamInt": 3,
        "MonParamDecimal": 1,
        "MonParamDateTime": new Date(2008, 10, 10, 10, 30, 59, 88),
        "MesSousObjets": [{ "MonParamString": "Param 1" }, { "MonParamString": "Param 2"}]
        };
    ApplicationWebAjax.ServiceWebAjax.RecevoirUneStructure(monObjet, RecevoirUneStructure_SucceededCallback, FailedCallback);
}

Notons ici en particulier qu’il faut utiliser des valeurs correctement typées. Ceci est en particulier le cas des dates qu’il faut définir en respectant le type date JavaScript. C’est la raison pour laquelle nous avons utilisé dans notre exemple l’objet « Date » JavaScript et non pas une chaine de caractères représentant une date formatée.
L’utilisation des variables correctement typées nous offre un avantage énorme dans le sens où on reste indépendant de la culture choisie dans le client et l’autre choisie dans le serveur.
Finalement, passons à notre fonction serveur qui doit recevoir notre structure mais cette fois ci comme étant un vrai objet .NET correctement désérialisé si on suppose bien sur qu’on a fourni un JSon conforme :

[WebMethod]
public string RecevoirUneStructure(MonEspace.MonObjet monObjet)
{
    monObjet.MonParamString = "Date d'appel : " + DateTime.Now.ToString();
    return "<b> MonParamString = " + monObjet.MonParamString + "</b><br />" +
        "<b>    MonParamInt = " + monObjet.MonParamInt + "</b><br />" +
        "<b>    MonParamDecimal = " + monObjet.MonParamDecimal + "</b><br />" +
        "<b>    MonParamDateTime = " + monObjet.MonParamDateTime + "</b><br />" +
        "<b>    MesSousObjets[0].MonParamString = " + monObjet.MesSousObjets[0].MonParamString + "</b><br />" +
        "<b>    MesSousObjets[1].MonParamString = " + monObjet.MesSousObjets[1].MonParamString + "</b><br />";
}

Conclusion

En regardant l’exemple présenté ici, on va se dire qu’il n’y an rien de plus facile en faisant passer un objet .NET dans un sens ou l’autre du serveur au client, mais en réalité ceci pourrait cacher des difficultés à surmonter en fonction de la complexité des objets traités. On vous conseille d’avoir sous la main un outil permettant d’observer le trafic web et affichant la structure des objets envoyés du serveur au client afin de s’inspirer par la suite en construisant ces objets côté client. Ce document intitulé « Passage des objets en paramètres lors des appels AJAX » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.