Appel d'un PageMethode avec JQuery

Version imprimable

Bonsoir tout le monde,
Voilà, je sèche complètement et j'ai l'impression que je tourne en rond, tout à coté de la solution mais sans y parvenir :
Voici mon code ASPX :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="js/BiddyScript.js" type="text/javascript"></script>
    <style type="text/css">
        .boxCanvas
        {
            border: 1px solid #476DD5;
            text-align: center; /*vertical-align: middle;*/
            padding-top: 4px;
        }
    </style>
 
    <div class="boxCanvas">
        <canvas id="myCanvas" width="600" height="480">
          <p>Votre navigateur ne supporte pas l'élément Canvas.</p>
        </canvas>
    </div>

le codebehind qui va avec :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
namespace BiddyHell
{
    public partial class BiddyCanvas : System.Web.UI.Page
    {
     public class BIDDY
    {
        public int ID { get; set; }
        public string Code { get; set; }
        public string Libelle { get; set; }
        public string Abrev { get; set; }
        public string Bulle { get; set; }
        public int fkID { get; set; }
    }
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
 
        [WebMethod]
        public static string GetEspaces()
        {
            List<BIDDY> oList = GetListEspaces();
            System.Web.Script.Serialization.JavaScriptSerializer oSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            string jsonEspaces = oSerializer.Serialize(oList);
 
            return jsonEspaces;
        }
 
        private static List<BIDDY> GetListEspaces()
        {
            List<BIDDY> lstEspace = new List<BIDDY>();
            lstEspace.Add(new BIDDY { ID = 9, Code = "AS-PANSEUSE", Libelle = "AS Panseuse", Abrev = "AS PANSEUS", Bulle = "AS Panseuse", fkID = 5 });
            lstEspace.Add(new BIDDY { ID = 13, Code = "IDE-SALLE-R", Libelle = "IDE SALLE DE REVEIL", Abrev = "AS SALLE R", Bulle = "IDE Salle de réveil", fkID = 5 });
            lstEspace.Add(new BIDDY { ID = 14, Code = "AS-ENDOSCOP", Libelle = "AS ENDOSCOPIE", Abrev = "AS ENDOSC", Bulle = "AS Endoscopie", fkID = 5 });
            lstEspace.Add(new BIDDY { ID = 17, Code = "IDE-AIDE-OP", Libelle = "IDE AIDE OPERATOIRE", Abrev = "IDE AIDE OP", Bulle = "IDE Aide Op", fkID = 5 });
            lstEspace.Add(new BIDDY { ID = 23, Code = "BRANCARDIER", Libelle = "BRANCARDIER", Abrev = "BRANCARDIER", Bulle = "Brancardier", fkID = 5 });
            lstEspace.Add(new BIDDY { ID = 24, Code = "AS-SAL-REV", Libelle = "AS SALLE DE REVEIL", Abrev = "AS SALLE R", Bulle = "AS Salle de réveil", fkID = 5 });
            lstEspace.Add(new BIDDY { ID = 26, Code = "ENCADREMENT", Libelle = "ENCADREMENT", Abrev = "ENCADREMENT", Bulle = "Personnel d'encadrement", fkID = 5 });
            lstEspace.Add(new BIDDY { ID = 28, Code = "IDE-ANESTH", Libelle = "IDE ANESTHESISTE", Abrev = "IDE ANESTH", Bulle = "IDE Anesthésiste", fkID = 5 });
 
            return lstEspace;
        }
    }
}

et le code javascript qui va avec

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
var canvas;
var context;
 
function drawText(text, x, y) {
    context.font = '10pt Helvetica';
    context.fillText(text, x, y);
}
 
//will be called back!!
function drawBiddies(biddies) {
    var y = 50;
    for (var i = 0; i < biddies.count; i++) {
        var biddy = biddies[i];
        drawText(20, y, biddy.ID + " " + biddy.Libelle);
        y += 20;
    }
}
 
function grabBiddies(options, callback) {
    callback(options);
}
 
function GetJsonEspaces() {
    $.ajax({
        type: "POST",
        url: "BiddyCanvas.aspx/GetEspaces",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            grabBiddies (response.d, drawBiddies);
        },
        error: function (data) {
            alert("Could not complete process !", "Data Server");
        }
    });
}
 
window.onload = function () {
    //grab the context!!
    canvas = $('#myCanvas')[0];
    context = canvas.getContext('2d');
 
    context.beginPath();                                      //This initiates the border
    context.rect(1, 1, canvas.width - 1, canvas.height - 1);
    context.fillStyle = "#fcfc00";
    context.fill();
    context.lineWidth = 1;                                     //This sets the width of the border
    context.strokeStyle = "#000000";      //This sets the color of the border
    context.stroke();
 
    //récupérer les données et dessiner!!
    GetJsonEspaces();
}

Je précise que suis sur VS2010 Ultimate SP1, Framework 4.0 !
Le problème que je rencontre est le suivant : Ma fonction GetJsonEspaces() ne renvoie aucune données... je dois passer à coté de quelque chose mais quoi ??
La plupart des exemples que j'ai vu sur le web se contentent d'un objet, mais j'ai pas trouvé d'exemple avec une collection s'appuyant sur une classe qu'on récupère dans la JavaScript.
Si quelqu'un pouvait m'aider à y voir clair, par avance je l'en remercie !
nachtigal!

Bonjour,
déjà quelque erreur dans ton Javascript:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function drawText(text, x, y) { context.font = '10pt Helvetica'; context.fillStyle = 'black'; context.fillText(text, x, y); } //will be called back!! function drawBiddies(json) { var y = 50; var biddies = jQuery.parseJSON(json); for (var i = 0; i < biddies.length; i++) { var biddy = biddies[i]; drawText(biddy.ID + " " + biddy.Libelle, 20, y); y += 20; } }
Ce n'est pas count mais length et j'ai utilisé la fonction parseJSON parce que ton objet était interprété en string et non en objet JS.

J'ai aussi rajouté un fillstyle black sinon le text n'était pas visible (il devait avoir la même couleur que le font de ton canvas).

09/09/2013, 12h03
vanquish
Personnellement, j'utilise ce système tout le temps et ne m'occupe absolument pas de la sérialisation ou de JSON.

Je m'arrange pour effectivement toujours faire des retours sur des objets pas trop compliqués (comme ton BIDDY, qui est lui très très simple) quitte a en créer un spécifique dédié à ce type de transfert de données.

Dans ce genre de cas la serialisation est transparente et ta WebMethod se résume à :
Code:

1 2 3 4 5 6 [WebMethod] public static List<BIDDY> GetEspaces() { List<BIDDY> oList = GetListEspaces(); return oList ; }
coté javascript, ton reponses.d est un pur tableau javascript, contenant l'exact équivalent javascript de tes objets C# BIDDY (avec la même casse).

C'est totalement transparent.

Je ne m'occupe de JSON ou de sérialisation, ni en C#, ni en javascript.

Mon seul soucis a été sur certains volumes où il a fallut que je set le paramètre <jsonSerialization maxJsonLength="500000"> dans le web.config
09/09/2013, 14h21
youtpout978

Personnellement j'utilise des objets sérialisé en Json avec des noms de propriété assez court, en 1 à 3 lettres parce que souvent c'est ce qui représente le plus gros volume de données et quand on transmet plusieurs centaine ou milliers de données avec une dizaine de propriété le gains en taille n'est pas négligeable.
Dans ce cas là ta solution est largement suffisante et diminue le nombre de ligne à taper.
17/09/2013, 08h54
nachtigal

Je vous remercie tous pour votre prompt réaction.
J'ai retenue la suggestion de youtpout978, il y avait en effet une erreur dans le code JavaScript ( fonction parseJSON ) et le bon code est celui donné par youtpout978.
vanquish, je vais expérimenter ta solution dès que je sors la tête de l'eau !!
Elle me paraît en effet plus simple pour récupérer les données.
Merci encore à tous les deux !!
nachtigal!!