[MVC3.2/JQuery] $.ajax() ou $.post() avec objets imbriqués

Version imprimable

28/05/2012, 12h21
CUCARACHA

[MVC3.2/JQuery] $.ajax() ou $.post() avec objets imbriqués

Salut,

J'ai un petit souci d'élégance avec les posts ajax vers un controlleur lorsqu'il s'agit de poster un objet javascipt contenant un ou plusieurs sous-objets.

Pour le moment, je sérialise l'objet à poster avec un JSON.stringify(myObject) en javascript et je récupère la chaine à l'aide d'un mySerializedObject Request.Form[0] que je désérialise dans mes models ad'hoc.

J'ai bien essayé de mettre directement l'objet dans les paramètres de la méthode, d'utiliser le content type application/json ou le content type par défaut, je récupère null.

Je pense qu'il doit exister une solution plus classe puisque lorsqu'on utilise le @Html.AjaxBeginForm et qu'on poste un formulaire, il n'est pas nécessaire de désérialiser la chaîne, l'objet est automatiquement mappé au modèle.

Pourriez-vous m'aider sur ce point ?

D'avance merci

Laurent

Hello, chez moi ca marche comme ça (jquery 1.7.1, ASP.NET MVC 3):

AjaxController.cs:

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
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;
 
namespace QMVC.Controllers
{
  public class User
  {
    public int Id { get; set; }
    public string Name { get; set; }
    public Adress Adress { get; set; }
  }
 
  public class Adress
  {
    public string Street { get; set; }
    public string City { get; set; }
  }
 
  public class AjaxController : Controller
  {
    //
    // GET: /Ajax/
 
    public ActionResult Index()
    {
      return View();
    }
 
    public ActionResult UserPost(User user)
    {
 
      System.Diagnostics.Debug.WriteLine(new JavaScriptSerializer().Serialize(user));
      return Json(new { status = "success", data = user });
    }
  }
}

Index.html (depuis AjaxController Index action):

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
 
@{
  ViewBag.Title = "Index";
}
<h2>
  Index</h2>
<script type="text/javascript">
  (function () {
    var user = {
      id: 999,
      name: 'test',
      adress: {
        street: 'far far',
        city: 'away'
      }
    };
 
    $.ajax({
      type: 'POST',
      url: '/ajax/userpost/',
      data: JSON.stringify(user),
      dataType: 'json',
      contentType: 'application/json; charset=utf-8',
      success: function (data) {
        console.log(data);
      }
    });
 
  })();
</script>

Je récupère en output VS:

Code:

1
2
 
{"Id":999,"Name":"test","Adress":{"Street":"far far","City":"away"}}

Et en console.log:

Code:

1
2
3
4
5
6
7
Object


data: Object
Adress: Object
City: "away"
Street: "far far"
__proto__: Object
Id: 999
Name: "test"
__proto__: Object
status: "success"
__proto__: Object

ps: il y a 2 "d" à Address, mais tu ne m'en voudras pas..

Salut,

Merci pour ta participation :)

Voici le code de mon objet :

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
 
function TransfertOptionData() {
	this.applicationPoolName = null;
	this.userName = null;
	this.eMail = null;
	this.password = null;
	this.domainName = null;
}
 
function TransfertData() {
	this.operation = null;
	this.id = null;
	this.parentId = null;
	this.position = null;
	this.title = null;
	this.typeNodeName = null;
	this.typeNodeId = null;
	this.targetTypeNodeName = null;
	this.targetTypeNodeId = null;
	this.optionalData = new TransfertOptionData();
	this.copy = null;
}
 
var transfertData = new TransfertData();

Après je l'initialise comme suit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
...
	transfertData.operation = "create_node";
	transfertData.parentId = data.rslt.parent.attr("id");
	transfertData.position = data.rslt.position;
	transfertData.title = data.rslt.name;
	transfertData.typeNodeName = data.rslt.obj.attr("rel");
	transfertData.typeNodeId = data.rslt.obj.attr("typeNodeId");
	transfertData.targetTypeNodeName = transfertData.typeNodeName;
	transfertData.targetTypeNodeId = transfertData.typeNodeId;
	transfertData.optionalData = new TransfertOptionData();
	transfertData.copy = false;
 
	var ajaxData = JSON.stringify(transfertData);

Puis je l'utilise comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
	var ajaxData = JSON.stringify(transfertData);
	$.ajax(
	{
		type: "POST",
		url: "/Home/Arbre_CreationBranche",
		data: ajaxData,
		//contentType: "application/json",
		async: false,
		success: function (r) {
			$(creationBranche_data.rslt.obj).attr("id", r.id);
		},
		error: function (xhr, ajaxOptions, thrownError) {
			alert("Une erreur s'est produite, opération annulée");
			$.jstree.rollback(creationBranche_data.rlbk);
		}
	});

A la déclaration de l'objet pret, je ne vois pas de grande différence mais moi je capte null dans mon objet alors que le request contient bien les données...

Si tu vois d'où vient le problème...

D'avance merci pour ton aide,

++

Laurent

Code:

1 2 3 4 5 6 7 $.ajax({ type: 'POST', url: '/ajax/userpost/', data: JSON.stringify(user), dataType: 'json', contentType: 'application/json; charset=utf-8',
S'il me manque l'une ou l'autre des deux lignes pour spécifier qu'il s'agit d'un objet JSON, l'objet ne contient que des null pour moi aussi.

31/05/2012, 11h32
CUCARACHA

Ahhh possible, je vais essayer car j'avais mis "application/json" comme indiqué là : http://stackoverflow.com/questions/7...uery-ajax-call

Je vous donne un retour, dès que possible...

++

Laurent