34

次のように作成された ajax 投稿があります。

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);
    }
});

そしてMVCコントローラー：

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

}

MyClassは、データの単純な表現です。

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

JavaScript がポスト リクエストを行うと、コントローラー アクションは実際に 2 つのアイテムを受け取りますが、これらのアイテムのプロパティ (id、name) は null です。

フィドラーでリクエストを確認すると、本文は次のようになります。

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

私は何かを逃しましたか？

4

2 に答える 2

65

私は何かを逃しましたか？

はい、次の記事を参照して、既定のモデル バインダーがコレクションのバインドに必要な正しいワイヤ形式を理解してください。つまり、これが機能するためには、次の代わりに:

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

ペイロードは次のようになります。

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

残念ながら、jQuery では、このペイロードを達成するのは非常にイライラすることがあります。このため、AJAX を使用して複雑なオブジェクト/配列をサーバーに送信する場合は、JSON ペイロードを使用することをお勧めします。

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

注意事項:

  • data: JSON.stringify({ items: myData })それ以外のdata: { items: myData }
  • 追加したcontentType: 'application/json'
  • 取り除かれたdataType: 'json'

ペイロードは次のようになります。

{"items":[{"id":"a","name":"Name 1"},{"id":"b","name":"Name 2"}]}
于 2013-05-14T15:46:46.947 に答える