最新のASP.NET MVC3では、JsonValueProviderFactoryの利用方法が変わっている。詳細は id:waritohutsu:20110103:1294059646 を参照してほしい
以前( id:waritohutsu:20100831:1283275189 )にWindows AzureでASP.NET MVC3 Previewを利用する方法を紹介させて頂いたが、皆様も素敵でステートレスな当コンポーネントを利用しているだろうか。今回は、ASP.NET MVC3から追加された JsonValueProviderFactory について紹介する。
ValueProviderFactoryとは?
ASP.NET MVCに詳しくない人も多いと思うので、念のため軽くValueProviderFactoryについて復習しよう。
皆様にとっても既知の事実だと思うが、ASP.NET MVCはASP.NET WebFormのViewStateを利用したデータバインディングと根本的に異なる方式を採用している。ViewStateが存在しないASP.NET MVCでは、ValueProviderFactoryを利用した方式(以下のイメージ図を参照)で画面(*.aspx)とController(*.cs、*.vb)の接続を実現している。
上記の図から、ASP.NET MVCでは「リクエストデータの形式に合せたValueProviderFactoryを用意し、HTTPリクエストのデータから.NETのデータへ変換している」ことを理解して頂ければ幸いだ。
また、今回紹介するValueProviderFactoryはJSon形式のデータを取り扱うValueProvideFactoryだが、当然他のValueProviderFactoryも存在する。ASP.NET MVCはソースが公開されているため、興味のある方はソースを参照してみるとよいだろう。
- 今回紹介
- JsonValueProviderFactory
- よくお世話になる
- QueryStringValueProviderFactory
- RouteDataValueProviderFactory
- FormValueProviderFactory
- 内部的にお世話になっている?
- CookieValueProviderFactory
- HttpFileCollectionValueProviderFactory
- ServerVariablesValueProviderFactory
- SessionValueProviderFactory
- TempDataValueProviderFactory
JsonValueProviderFactoryを利用する手順
ValueProviderFactoryの復習も完了したので、実際にJsonValueProviderFactoryを利用する方法を紹介したいと思う。ASP.NET MVC3 Previewでは、大雑把には以下の手順を踏むことでJsonValueProviderFactoryを利用できる。
- JsonValueProviderFactoryを登録する
- JSon形式のリクエストを送受信するControllerを作成する
- JSon形式のリクエストを送受信する画面を作成する
簡単なサンプル「JSonProviderFactoryMvcApp.zip」付きで紹介するので、ぜひ自分でも試していただきたい。
JsonValueProviderFactoryを登録する
ASP.NET MVC3 Previewでは、デフォルトのValueProviderFactoryとしてJsonValueProviderFactoryが登録されていない。そのため、Global.asaxを作成して、当該ファイル内でJsonValueProviderFactoryをValueProviderFactories.Factoriesに登録する必要がある。
- Global.asax
protected void Application_Start() { AreaRegistration.RegisterAllAreas(); // JsonValueProviderFactoryをデフォルトのValueProviderFactoriesに対して追加 ValueProviderFactories.Factories.Add(new JsonValueProviderFactory()); RegisterGlobalFilters(GlobalFilters.Filters); RegisterRoutes(RouteTable.Routes); }
JSon形式のリクエストを送受信するControllerを作成する
次に、JSon形式のリクエストを受け取るControllerを作成する必要がある。以下のソースを参照して頂きたい。
- HomeController.cs
// [AcceptVerbs(HttpVerbs.Post)] [HttpPost] public virtual JsonResult JsonMethod(Person person /* 画面から送信されたJSon形式リクエストデータ */) { Trace.TraceInformation("★サーバから受信{0}", person.ToString()); // 画面へ戻すJSon形式レスポンスデータ return Json(new Person() { ID=0, Name="Normalian at Server" }); }
JsonValueProviderFactoryを利用し、JSon形式のリクエストデータが.NETのインスタンス(Personクラス)に変換される。このため、開発者はJSon形式のリクエストデータに対するパースや変換を意識せずにプログラミングすることができる。
JSon形式のリクエストを送受信する画面を作成する
次に画面(*.aspx)を作成する。この際注意して頂きたいのが、『jQuery は JSon形式のシリアライズ処理を行えないため、json2.jsを利用する必要がある』ということだ。詳細は以下のソースを参照してほしい。
- Index.aspx
<script src="../../Scripts/json2.js" type="text/javascript"></script> <script type="text/javascript"> function SendJsonRequest() { //サーバサイドに送信するJSon形式のリクエストデータ var data = { "ID": 20, "Name": "Normalian at Client" }; //JSon形式のリクエストデータにシリアライズする //JSon形式のシリアライズはjQueryでは用意されていないため、json2.jsを利用する var jsonString = JSON.stringify(data); $.ajax({ type: "POST", dataType: "json", contentType: 'application/json', url: 'Home/JsonMethod', data: jsonString, success: function (serverResponse) { //サーバサイドから受け取ったJSon形式レスポンスデータを表示する $('#message').html(JSON.stringify(serverResponse)); }, error: function () { alert('エラー終了です'); } }); } </script> <h2> JsonValueProviderFactoryの学習用</h2> <p> <input onclick="javascript:SendJsonRequest()" value="JSonリクエスト" type="button" /> </p> <div id="message" style="border-style: dotted; font-size: x-large; color: #FF0000;"> 結果表示領域 </div>
JSon形式のデータに対して、「JSON.stringify()」を利用したシリアライズ処理を行っている。また、jQueryの「$.ajax()」を利用して非同期処理を実現していることが理解できるだろう。