【ASP.NET MVC】【VB.NET】ASP.NET MVC で、 knockout.js を使う ～入門編～

ASP.NET MVC

前提

 * 以下のJavascriptが必要。
  + knockout.-x.x.x.js
  => なかったら、以下の環境設定を行う

 ※ knockout.jsについて、以下の関連記事を参照のこと。
http://blogs.yahoo.co.jp/dk521123/35664953.html

準備：環境設定

http://blogs.yahoo.co.jp/dk521123/35596847.html
で行ったNuGetでインストールする

[1] Visual Studio で [ツール]-[NuGetパッケージ マネージャー]-[パッケージ マネージャー コンソール]を選択
[2] 以下のコマンドを入力する

Install-Package knockoutjs
https://www.nuget.org/packages/knockoutjs/

サンプル

http://blog.shibayan.jp/entry/20111208/1323354859
を参考にサンプル(VB.NET)を作成してみた

ビュー

* Index.vbhtml 
@Code
    ViewData("Title") = "Index"
End Code

<h2>Index</h2>

<ul data-bind="foreach: items">
    <li>名前: <span data-bind="text: name"></span>, 年齢: <span data-bind="text: age"></span></li>
</ul>

<script src="@Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-3.4.0.js")" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $.ajax({
            type: 'GET',
            url: '@Url.Action("GetJson")', // アクセス先のURL
        })
        .done(function (returnData) {
            var viewModel = {
                items: ko.observableArray(returnData)
            };
            ko.applyBindings(viewModel);
        });
    });
</script>

コントローラ

* SampleKnockoutController.vb 
Imports System.Web.Mvc

Namespace Controllers
    Public Class SampleKnockoutController
        Inherits Controller

        Function Index() As ActionResult
            Return View()
        End Function

        Function GetJson() As ActionResult
            Dim jsonData = New List(Of Object) From
                {
                    New With {.name = "Mike", .age = 28},
                    New With {.name = "Tom", .age = 36},
                    New With {.name = "Smith", .age = 17}
                }
            Return Json(jsonData, JsonRequestBehavior.AllowGet)
        End Function
    End Class
End Namespace

出力結果

•名前: Mike, 年齢: 28
•名前: Tom, 年齢: 36
•名前: Smith, 年齢: 17

* 以下の記事に続く
http://blogs.yahoo.co.jp/dk521123/35669223.html

参考文献

http://blog.shibayan.jp/entry/20111208/1323354859
http://blog.shibayan.jp/entry/20140625/1403699408
Hello World Demo
http://knockoutmvc.com/HelloWorld
http://knockoutmvc.com/Home/Introduction

関連記事

ASP.NET MVC で、 knockout.js を使う ～基本編～ [1]

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

ASP.NET MVC で、 knockout.js を使う ～基本編～ [2]

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

knockout.js ～入門編～

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