†でおきしブログ†

ウナギ食べたいヽ(•̀ω•́ )ゝ✧

【ASP.NET】VB MVCでJQuery Ajaxリクエストをdeserialize

JQueryの$.ajaxを使ってjsonデータをpostし、コントローラー側でpostデータをdeserializeするサンプルメモ。
※.NetFrameworkは4.5、MVCは4

☆View側

    //Ajax Response処理
    function AjaxResponse(result) {
        if (result == null) {
            alert("null");
        } else {
            alert("result:" + result);
        }
    }

    var testData = { "id": "hoge", "pass": "fuga" };

    //Ajax Request処理
    function AjaxRequest()
    {
        $.ajax({
            url: "/home/AjaxTest",
            type: "POST",
            dataType: 'text',
            timeout: 5000,
            data: JSON.stringify(testData),
            contentType: "application/json; charset=utf-8",
            success: AjaxResponse
        });
    }

☆controller側

Imports System.Web.Script.Serialization
Imports System.IO

'省略
        'deserializeするデータ構造
        Public Class jsonData
            Public Property id As String
            Public Property pass As String
        End Class

        'Responseを受け付けるメソッド
        Function AjaxTest() As ActionResult
            If Request.IsAjaxRequest Then
                'deserialize処理===========================================↓
                Dim serializer As New JavaScriptSerializer()
                Dim str = New StreamReader(Request.InputStream).ReadToEnd()
                Dim deserializeResult = serializer.Deserialize(Of jsonData)(str)
                'deserialize処理===========================================↑

                If (deserializeResult.id = "hoge") And (deserializeResult.pass = "fuga") Then
                    Return Content("OK")
                Else
                    Return Content("NG")
                End If
            End If
            Return New EmptyResult()
        End Function

☆蛇足

C#だとdeserialize処理なんか書かなくてもコントローラーのメソッドの引数にデータ構造を設定していれば、そこに入るらしいんだけれど、VBだとそういうサンプルが見当たらなかった。
Jsonデータを返却するサンプルは結構あるんだけどね。

ちなみにJsonデータを返却する場合には上記サンプルに対して下記修正を入れれば良い。

  1. Controller側
    • メソッドの方をActionResultからJsonResultに変更
    • Return Json(JavaScript Object Notation)で返却
      • JavaScript Object Notationについては、上記サンプルのjsonDataのようなクラスデータが該当する。詳細はmsdnとか参照すると良いかも。
  2. View側
    • $.ajaxのリクエストパラメータdataTypeを'json'にする
    • AjaxResponse関数側で受け取ったjsonデータをお好きなように



無料ではじめるWindows Azure×WordPress超入門

無料ではじめるWindows Azure×WordPress超入門