comment binder un json envoyer par la méthode Post (jquery)

Version imprimable

bonsoir,

aujourd'hui j'essaie de faire passer un objet typé par la méthode Post de jquery.

mon model :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace myPortfolio.Areas.admin.Models { public class SkillModel { public Guid Id { get; set; } public string Name { get; set; } } }
mon code jquery :
Code:

1 2 3 4 5 6 7 8 9 10 11 var data = { pictures: [ { Id: '67f64a95-45cc-40bb-ac81-6247e4105953', Url: '1.png', Main: false }, { Id: '4841f169-1b5b-47cc-9f79-e31b71d67d12', Url: '2.png', Main: false }, { Id: 'af3d3aea-5f6c-4c4d-93b5-bed09cbfb4fc', Url: '3.png', Main: false } ] }; json = JSON.stringify(data); $.post("/admin/ManageProject/SaveArticle/", json);
mon code asp.net :
Code:

1 2 3 4 5 6 7 [ValidateInput(false)] [AcceptVerbs(HttpVerbs.Post)] [HttpPost] public void SaveArticle(IList<PhotoModel> pictures) { ... }
grace a un point d'arret, je vois que mon paramètre "pictures" n'est pas détecté comme étant une liste, il ne contient aucune ligne, il est totallement null. c'est la première fois que je fais ça, j'ai lu pas mal de chose sur le net, et je pensais que ça allait se faire tout seul. apparemment il y a un binder par défaut O_o.

Où ai-je commis une erreur ?

merci :)

03/01/2012, 21h36
mikoukoumi

Bonjour,

Serait-il possible d'avoir le message d'erreur???
03/01/2012, 22h48
thor76160

pas de message d'erreur, mon paramètre est juste nul :/
04/01/2012, 10h25
thor76160

bonjour,

Je viens d'essayer quelque chose. j'ai retiré le json.stringify(), en résultat, ma fonction c# détecte "pictures" comme étant une collection, mais elle est vide :/

je ne trouve toujours rien de concluant sur le net.

Youhouu, j'ai en parti réussi !

voici mon code jquery :
Code:

1 2 3 4 5 6 7 8 9 10 $.ajax({ url: "/admin/ManageProject/SaveArticle/", type: 'POST', traditional: true, data: { Id: '67f64a95-45cc-40bb-ac81-6247e4105953', Url: '1.png', Main: false } });
là ça fonctionne, par contre je n'arrive pas à envoyer une collection !!
je vais aussi devoir envoyer plusieurs objets :
- deux collections de type différent.
- un objet.

04/01/2012, 11h04
Nathanael Marchand

Et avec un IEnumerable<T> ?

jquery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
var data = [
                        { Id: '67f64a95-45cc-40bb-ac81-6247e4105953', Url: '1.png', Main: false },
                        { Id: '4841f169-1b5b-47cc-9f79-e31b71d67d12', Url: '2.png', Main: false },
                        { Id: 'af3d3aea-5f6c-4c4d-93b5-bed09cbfb4fc', Url: '3.png', Main: false }
                    ];
 
           $.ajax({
                url: "/admin/ManageProject/SaveArticle/",
                type: 'POST',
                traditional: true,
                data: JSON.stringify(data)
            });

c# :

Code:

public void SaveArticle(IEnumerable<PhotoModel> pictures)

toujours null :/
mais merci ;)

04/01/2012, 11h33
thor76160

j'ai trouvé un indice sur cette page http://dotnetslackers.com/articles/a...l-Binding.aspx.
Figure 9: Receiving form data as a list of Employee objects

je vais essayer ça.

edit
j'avance pas, ya moyen de lancer une bouée de sauvetage ?
vous avez surement un bout de code qui traine quelque part et qui pourrait me sortir de là non ? ^^

ahhh :lol:
je viens de faire un grand pas !

voici mon code jquery (ça fonctionne) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var pictures = [
                                {"name":"pictures.Index","value":"0"},
                                {"name":"pictures[0].Id","value":"67f64a95-45cc-40bb-ac81-6247e4105953"},
                                {"name":"pictures[0].Url","value":"1.png"},
                                {"name":"pictures[0].Main","value":"0"},
 
                                {"name":"pictures.Index","value":"1"},
                                {"name":"pictures[1].Id","value":"af3d3aea-5f6c-4c4d-93b5-bed09cbfb4fc"},
                                {"name":"pictures[1].Url","value":"2.png"},
                                {"name":"pictures[1].Main","value":"0"}
                            ];
 
            $.ajax({
                url: "/admin/ManageProject/SaveArticle/",
                type: 'POST',
                traditional: true,
                data: pictures
            });

maintenant je passe à l'étape suivante, soit je veux faire passer plusieurs paramètres, soit je vais faire passer un objet contenant des collections.
Les deux ne fonctionnent pas, mais je vais m’attarder sur la 2ème solution:
(ne fonctionne pas ) :

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
var pictures = [
                                {"name":"Pictures.Index","value":"0"},
                                {"name":"Pictures[0].Id","value":"67f64a95-45cc-40bb-ac81-6247e4105953"},
                                {"name":"Pictures[0].Url","value":"1.png"},
                                {"name":"Pictures[0].Main","value":"0"},
 
                                {"name":"Pictures.Index","value":"1"},
                                {"name":"Pictures[1].Id","value":"af3d3aea-5f6c-4c4d-93b5-bed09cbfb4fc"},
                                {"name":"Pictures[1].Url","value":"2.png"},
                                {"name":"Pictures[1].Main","value":"0"}
                            ];
 
            var articleProject = {
                                    Id: $("#articleId").val(),
                                    Title: $("#articleTitle").val(),
                                    Text: $('#articleProjectEditor').val(),
                                    Begin: $('#articleBegin').val(),
                                    End: $('#articleEnd').val(),
                                    Url: $('#articleUrl').val(),
                                    Pictures: pictures
                                };
 
            $.ajax({
                url: "/admin/ManageProject/SaveArticle/",
                type: 'POST',
                traditional: true,
                data: articleProject
            });

c# :

Code:

1
2
3
4
[ValidateInput(false)]
        [AcceptVerbs(HttpVerbs.Post)]
        [HttpPost]
        public void SaveArticle(ArticleProjectModel articleProject)

mon objet articleProject est bien renseigné ! il est sensé contenir une collection "pictures", mais ici elle ne fonctionne pas :/
pourtant je l'ai inséré de la même façon qu'au dessus, et là ça fonctionnait ...

YES !!!

bon, voici un petit exemple pour ceux qui sont dans le même cas que moi !

voici 2 classes :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace myPortfolio.Areas.admin.Models
{
    public class ArticleProjectModel
    {
        public Guid Id { get; set; }
        public string Title { get; set; }
        public string Text { get; set; }
        public string Begin { get; set; }
        public string End { get; set; }
        public string Url { get; set; }
        public List<PhotoModel> Pictures { get; set; }
    }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace myPortfolio.Areas.admin.Models
{
    public class PhotoModel
    {
        public string Id { get; set; }
        public string Url { get; set; }
        public string Main { get; set; }
    }
}

maintenant, soit on fait passer 2 paramètres dans la fonctions, soit on fait passer un paramètre ArticleProjectModel contenant une collection de PhotoModel.

1 paramètre :

jquery :

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
var data = [
                            /* articleProject */
                            { "name":"articleProject.Id", "value":$("#articleId").val() },
                            { "name":"articleProject.Title", "value":$("#articleTitle").val() },
                            { "name":"articleProject.Text", "value":$("#articleProjectEditor").val() },
                            { "name":"articleProject.Begin", "value":$("#articleBegin").val() },
                            { "name":"articleProject.End", "value":$("#articleEnd").val() },
                            { "name":"articleProject.Url", "value":$("#articleUrl").val() },
 
                            /* Pictures */
                            { "name":"articleProject.Pictures.Index", "value":"0" },
                            { "name":"articleProject.Pictures[0].Id", "value":"67f64a95-45cc-40bb-ac81-6247e4105953" },
                            { "name":"articleProject.Pictures[0].Url", "value":"1.png" },
                            { "name":"articleProject.Pictures[0].Main", "value":"0" },
                            { "name":"articleProject.Pictures.Index", "value":"1" },
                            { "name":"articleProject.Pictures[1].Id", "value":"af3d3aea-5f6c-4c4d-93b5-bed09cbfb4fc" },
                            { "name":"articleProject.Pictures[1].Url", "value":"2.png" },
                            { "name":"articleProject.Pictures[1].Main", "value":"0" }
                        ];
 
            $.ajax({
                url: "/admin/ManageProject/SaveArticle/",
                type: 'POST',
                traditional: true,
                data: data
            });

c# :

Code:

1
2
3
4
[ValidateInput(false)]
        [AcceptVerbs(HttpVerbs.Post)]
        [HttpPost]
        public void SaveArticle(ArticleProjectModel articleProject)

2 paramètres :

jquery :

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
var data = [
                            /* articleProject */
                            { "name":"articleProject.Id", "value":$("#articleId").val() },
                            { "name":"articleProject.Title", "value":$("#articleTitle").val() },
                            { "name":"articleProject.Text", "value":$("#articleProjectEditor").val() },
                            { "name":"articleProject.Begin", "value":$("#articleBegin").val() },
                            { "name":"articleProject.End", "value":$("#articleEnd").val() },
                            { "name":"articleProject.Url", "value":$("#articleUrl").val() },
 
                            /* Pictures */
                            { "name":"pictures.Index", "value":"0" },
                            { "name":"pictures[0].Id", "value":"67f64a95-45cc-40bb-ac81-6247e4105953" },
                            { "name":"pictures[0].Url", "value":"1.png" },
                            { "name":"pictures[0].Main", "value":"0" },
                            { "name":"pictures.Index", "value":"1" },
                            { "name":"pictures[1].Id", "value":"af3d3aea-5f6c-4c4d-93b5-bed09cbfb4fc" },
                            { "name":"pictures[1].Url", "value":"2.png" },
                            { "name":"pictures[1].Main", "value":"0" }
                        ];
 
            $.ajax({
                url: "/admin/ManageProject/SaveArticle/",
                type: 'POST',
                traditional: true,
                data: data
            });

c# :

Code:

1
2
3
4
[ValidateInput(false)]
        [AcceptVerbs(HttpVerbs.Post)]
        [HttpPost]
        public void SaveArticle(ArticleProjectModel articleProject, List<PhotoModel> pictures)

sujet résolu :mrgreen: