Ajax post al controller MVC ASP.net – le proprietà dell’object sono nulle

Ho un post ajax in costruzione in questo modo:

var myData = [ { id: "a", name: "Name 1" }, { id: "b", name: "Name 2" } ]; $.ajax({ type: 'POST', url: '/myurl/myAction', data: { items: myData }, dataType: 'json', error: function (err) { alert("error - " + err); } }); 

E un controller MVC:

 [HttpPost] public JsonResult MyAction(MyClass[] items) { } 

MyClass è solo una semplice rappresentazione dei dati:

 public class MyClass { public string Name {get; set; } public string Id {get; set; } } 

Quando javascript effettua la richiesta di posta, l’azione del controllore riceve effettivamente 2 voci, tuttavia le proprietà (id, nome) in questi elementi sono nulle.

Controllando la richiesta in violinista, il corpo si presenta così:

 Name | Value items[0][Name] | Name 1 items[0][Id] | a items[1][Name] | Name 2 items[1][Id] | b 

Ho perso qualcosa?

Ho perso qualcosa?

Sì, dai un’occhiata al seguente articolo per capire il corretto formato del filo che il raccoglitore modello predefinito si aspetta per le raccolte vincolanti. In altre parole, affinché funzioni, anziché:

 items[0][Name] | Name 1 items[0][Id] | a items[1][Name] | Name 2 items[1][Id] | b 

il tuo carico utile dovrebbe essere simile a questo:

 items[0].Name | Name 1 items[0].Id | a items[1].Name | Name 2 items[1].Id | b 

Sfortunatamente con jQuery può essere piuttosto frustrante ottenere questo payload. Per questo motivo ti consiglio di utilizzare un payload JSON se vuoi inviare oggetti / array complessi al tuo server con AJAX:

 $.ajax({ type: 'POST', url: '/myurl/myAction', data: JSON.stringify({ items: myData }), contentType: 'application/json', error: function (err) { alert("error - " + err); } }); 

Cose da notare:

  • data: JSON.stringify({ items: myData }) anziché data: { items: myData }
  • Aggiunto contentType: 'application/json'
  • dataType: 'json'

Ora il tuo carico utile è simile a questo:

 {"items":[{"id":"a","name":"Name 1"},{"id":"b","name":"Name 2"}]} 

puoi usare questo codice per risolvere il problema:

 $.ajax({ url: '/myurl/myAction', data: { '': items }, method: "POST", dataType: 'json', success: function (xhr, status, response) { }, error: function (xhr, status, response) { } }); [HttpPost] public JsonResult MyAction(IEnumerable items) { }