web-dev-qa-db-ja.com

ASP.net MVCコントローラーへのAjax投稿-オブジェクトプロパティがnull

私はこのように構築されている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

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

c#javascriptajaxasp.net-mvc
34
Alex

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

はい、 次の記事 を参照して、デフォルトのモデルバインダーがコレクションのバインドに期待する正しいワイヤー形式を理解してください。言い換えれば、これが機能するためには、次の代わりに：

_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: { items: myData }_の代わりにdata: JSON.stringify({ items: myData })
  • _contentType: 'application/json'_を追加しました
  • _dataType: 'json'_を取り除きました

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

_{"items":[{"id":"a","name":"Name 1"},{"id":"b","name":"Name 2"}]}
_
64
Darin Dimitrov