読者です 読者をやめる 読者になる 読者になる

割と普通なブログ

Microsoft Azure や ASP.NET、Java EE 系の話題を記載します

ASP.NET MVC3のJsonValueProviderFactoryを利用して非同期通信を行う

jQuery ASP.NET MVC JavaScript

最新の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 MVCASP.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を利用できる。

  1. JsonValueProviderFactoryを登録する
  2. JSon形式のリクエストを送受信するControllerを作成する
  3. 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()」を利用して非同期処理を実現していることが理解できるだろう。