【ASP.NET MVC】 .NETオブジェクト から JavaScriptオブジェクト(JSON)に変換するには...

ASP.NET MVC

はじめに

.NETオブジェクト から JavaScriptオブジェクト(JSON)に変換方法を2つ記載する。

【1】コントローラ側で、.NETオブジェクトからJSONに変換
【2】ビュー側で、.NETオブジェクトからJSONに変換

【1】コントローラ側で、.NETオブジェクトからJSONに変換

 * 「JavaScriptSerializer」を使用する
 * 以下の関連記事でも使用している。
http://blogs.yahoo.co.jp/dk521123/35646695.html

モデル

* JsonDemoModel.vb 
Namespace Models
    Public Class JsonDemoModel
        Public Property JsonData As String
    End Class
End Namespace

コントローラ

* JsonDemoController.vb 
Imports System.Web.Mvc
Imports System.Web.Script.Serialization
Imports WebAppli.Models

Namespace Controllers
    Public Class JsonDemoController
        Inherits Controller

        Function Index() As ActionResult
            Dim model = New JsonDemoModel()

            Dim codes = New List(Of String)
            codes.Add("0")
            codes.Add("2")

            ' ★ここに注目★
            Dim serializer = New JavaScriptSerializer()
            model.JsonData = serializer.Serialize(codes)

            Return View(model)
        End Function
    End Class
End Namespace

ビュー

* Index.vbhtml
=> 「Japan」「UK」が選択される 
@ModelType WebAppli.Models.JsonDemoModel

@Code
    ViewData("Title") = "Index"
End Code

<h2>Index</h2>

@Using (Html.BeginForm("SendResult", "JsonDemo", FormMethod.Post))
    @<select multiple="multiple" name="@Html.NameFor(Function(model) model.JsonData)"
             id="sampleSelectMultiple"
             data-bind="options: items, optionsText: 'Text', optionsValue: 'Value'"
             size="7" width="200">
         <option value="0">Japan</option>
         <option value="1">USA</option>
         <option value="2">UK</option>
         <option value="3">Australia</option>
         <option value="4">China</option>
    </select>
    @<input type="submit" value="Send" />
End Using

<script src="">http://code.jquery.com/jquery.js">
<script type="text/javascript">
    var selectValues = @Html.Raw(Model.JsonData);
    $('#sampleSelectMultiple').val(selectValues);
</script>

【2】ビュー側で、.NETオブジェクトからJSONに変換

 * 「@Html.Raw(Json.Encode(【.NETオブジェクト】))」を使用する

モデル

* JsonDemoModel.vb 
Namespace Models
    Public Class JsonDemoModel

        Public Property Codes As List(Of String)

        Public Sub New()
            Me.Codes = New List(Of String)
        End Sub
    End Class

End Namespace

コントローラ

* JsonDemoController.vb 
Imports System.Web.Mvc
Imports WebAppli.Models

Namespace Controllers
    Public Class JsonDemoController
        Inherits Controller

        Function Index() As ActionResult
            Dim model = New JsonDemoModel()
            model.Codes.Add("1")
            model.Codes.Add("3")
            Return View(model)
        End Function
    End Class
End Namespace

ビュー

* Index.vbhtml
=> 「USA」「Australia」が選択される 
@ModelType WebAppli.Models.JsonDemoModel

@Code
    ViewData("Title") = "Index"
End Code

<h2>Index</h2>

@Using (Html.BeginForm("SendResult", "JsonDemo", FormMethod.Post))
    @<select multiple="multiple" name="@Html.NameFor(Function(model) model.Codes)"
             id="sampleSelectMultiple"
             size="7" width="200">
         <option value="0">Japan</option>
         <option value="1">USA</option>
         <option value="2">UK</option>
         <option value="3">Australia</option>
         <option value="4">China</option>
    </select>
    @<input type="submit" value="Send" />
End Using

<script src="">http://code.jquery.com/jquery.js">
<script type="text/javascript">
    @* ★ここに注目★ *@
    var selectValues = @Html.Raw(Json.Encode(Model.Codes));
    $('#sampleSelectMultiple').val(selectValues);
</script>

関連記事

ASP.NET MVC　で、 C3.jsと連携してグラフを描画するには... [2]

http://blogs.yahoo.co.jp/dk521123/35646695.html