$.ajax で ASP.NET MVC のアクションメソッドに配列を渡せない!?

ASP.NET による Web アプリ開発の話題。

ブラウザ上の JavaScript からサーバー側コードを呼び出す、いわゆる AJAX について、JavaScript 側は jQuery を使い、サーバー側は ASP.NET MVC のコントローラ/アクションメソッドとして実装する形態を最近よく使うようになってきた。

すなわち、JavaScript 側では、

$.ajax({
　type: "POST",
　url: "/My/Action",
　data: {foo:"bar"},
　success: function(){ ... },
　...
});

などと実装し、これを受けるサーバー側では、

public class MyController : Controller {
　[HttpPost]
　public ActionResult Action(string foo){
　　...
　　return Json(new {Hoge = "Huga" });
　}
}

などと実装するわけだ。

$.ajax に渡した JavaScript オブジェクトの data プロパティの内容を、jQuery が適切に "application/x-www-form-urlencoded" 形式に変換して POST してくれる。

これを受ける ASP.NET MVC のモデルバインダーが、適切にアクションメソッドの引数にバインド、渡してくれる寸法だ。

CoC、「規約は設定に勝る」の原則に基づき、命名規約によってすべてがきれいに紐づけられる。

ASP.NET MVC の登場で、ASP.NET Web サービス ( .asmx ) やページメソッドを書いて、そのプロクシを参照して... というまどろっこしさが無くなり、シンプルにさくさく書けるようになったと思う。

さて、配列を渡そうと思ったら...

さてところで、この AJAX 実装を使って、今度は、JavaScript 側からサーバー側へ文字列の配列を渡す必要がでてきた。

サーバー側実装はこんな感じ。

public class MyController : Controller {
　[HttpPost]
　public ActionResult Action(string[] foo){
　　...
　　return Json(new {Hoge = "Huga" });
　}
}

では、と、JavaScript 側も気楽に、次のように書いた。


$.ajax({
　type: "POST",
　url: "/My/Action",
　data: {foo: ["bar1", "bar2"]},
　success: function(){ ... },
　...
});

これで、サーバー側アクションメソッドの引数、string[] foo には、"bar1" と "bar2" という2つの文字列が渡されるはず、と考えた。

ところが、サーバー側アクションメソッドの引数、string[] foo には null が渡される結果となった。

モデルバインダーが期待した動きをしていないのだ。

一体どうなっているのか?

そこでデバッガ上でアクションメソッド内にブレークポイントを設定して一時停止させ、イミディエイトウィンドウなどを使って、Request.Forms の内容を見てみた。

すると、たしかに "bar1"、"bar2" がフォーム変数には渡されてはいるのだが、しかし、そのキー名がいずれも "foo[]" なのだ。

配列の添え字がないのだ。

すなわち、こんな感じ。

foo[]=bar1&foo[]=bar2

しかしながら、モデルバインダーが期待するのは、次の形式なのだ。

foo[0]=bar1&foo[1]=bar2

うーん、困った。

対処方法

そこで今回自分が取った方法は、「愚直に自前で実装」。

すなわち、jQuery に form 形式化するのを任せるのをやめ、自分で form 形式化した文字列を生成して、それを渡そう、というものだ。

恐ろしく愚直に、渡したい元の文字列の配列を for でループしながらエンコードしつつキー名と結合して別の配列に溜めていく。

var data = [];
for (var i = 0; i< foos.length; i++) {
　data.push("foo[" + i + "]=" + encodeURIComponent(foos[i]));
}

最後に、区切り文字 "&" で結合してサーバー側に引き渡す。
このとき、jQuery に変換処理を任せないよう、processData プロパティに false を指定することを忘れずに。

$.ajax({
　type: "POST",
　url: "/My/Action",
　processData: false,
　data: data.join("&"),
　success: function(){ ... },
　...
});

こうしてようやく、無事、サーバー側アクションメソッドの引数 string[] foo に、"bar1" と "bar2" を引き渡すことができた。

だけどこれでいいの?

はてさて、これが最適解なのだろうか?
甚だ疑問である。

なお、もし仮に、本当にある程度のスクラッチな実装が避けられないとしても、たとえば先に書いたループなどは、linq.js の採用でもっとスマートに書けるはずだ。

また、IE6 など古い世代のブラウザを気にせず、モダンブラウザだけを相手にすることで良ければ、ネイティブ JSON 機能を使って JSON 化して渡すことも出来るだろう。
どうしてもレガシーブラウザを相手にする場合は、jQuery-json プラグインを追加して JSON 化するのもありかもしれない。

はたまた、JavaScript 側での解決に執着するばかりでなく、上記のような "foo[]=bar1" といった添え字の無い書式でも出現順で配列にバインドするような、モデルバインダーをサーバー側で実装する方法すら考えられる。

とはいえ、もっとシンプルなやり方、便利な機能がある気がしてならない。
もう少し調べてみようと思う。

2011/08/14追記
ちゃんとシンプルな解を、コメントにてご教示頂きました。
続くこちらの投稿を参照下さい。