ASP.NET MVCとknockout.jsの連携：データをJSONで渡す

2012/04/15

ソース

コントローラー：Controllers/HomeController.cs

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6.  
  7. namespace TestProject.Controllers
  8. {
  9.   public class HomeController : Controller
  10.   {
  11.  
  12.     public ActionResult Index()
  13.     {
  14.       return View();
  15.     }
  16.  
  17.     public ActionResult IndexJsonData()
  18.     {
  19.  
  20.       List<Dictionary<string, string>> list = new List<Dictionary<string, string>>()
  21.       {
  22.         new Dictionary<string, string>() { {"id", "1"}, {"item", "ねぎ間"}, {"price", "168"} },
  23.         new Dictionary<string, string>() { {"id", "2"}, {"item", "ハツ"}, {"price", "136"} },
  24.         new Dictionary<string, string>() { {"id", "3"}, {"item", "レバー"}, {"price", "136"} },
  25.         new Dictionary<string, string>() { {"id", "4"}, {"item", "ぼんちり"}, {"price", "136"} },
  26.         new Dictionary<string, string>() { {"id", "5"}, {"item", "はらみ"}, {"price", "136"} },
  27.         new Dictionary<string, string>() { {"id", "6"}, {"item", "うずら玉子"}, {"price", "136"} },
  28.         new Dictionary<string, string>() { {"id", "7"}, {"item", "なんこつ"}, {"price", "136"} },
  29.         new Dictionary<string, string>() { {"id", "8"}, {"item", "手羽先"}, {"price", "168"} },
  30.         new Dictionary<string, string>() { {"id", "9"}, {"item", "せせり"}, {"price", "136"} },
  31.         new Dictionary<string, string>() { {"id", "10"}, {"item", "白レバー"}, {"price", "168"} },
  32.         new Dictionary<string, string>() { {"id", "11"}, {"item", "丸ごとシマウマ"}, {"price", "290"} },
  33.       };
  34.  
  35.       return Json(list, JsonRequestBehavior.AllowGet);
  36.     }
  37.   }
  38. }

ビュー：Views/Home/Index.cshtml

  1. @{
  2.   ViewBag.Title = "とりあえず直書きしたデータをJSONにして受け取り出力：焼き鳥メニュー";
  3. }
  4.  
  5. <script type="text/javascript">
  6.   $(document).ready(function () {
  7.     $.getJSON("@Url.Action("IndexJsonData")", function (data) {
  8.       var viewModel = {
  9.         items: ko.observableArray(data)
  10.       };
  11.  
  12.       ko.applyBindings(viewModel);
  13.     });
  14.   });
  15. </script>
  16.  
  17. <h2>@ViewBag.Title</h2>
  18.  
  19. <table>
  20. <thead>
  21. <tr>
  22. <th>id</th>
  23. <th>item</th>
  24. <th>price</th>
  25. </thead>
  26. <tbody data−bind="foreach: items">
  27. <tr>
  28. <td data−bind="text: id"></td>
  29. <td data−bind="text: item"></td>
  30. <td data−bind="text: price+' 円'"></td>
  31. </tr>
  32. </tbody>
  33. </table>

めも

コントローラー側

  1. JSON用？に関数？メソッド？作成（IndexJsonData()）
  2. 本来なら使うデータはmodelsに記載するけど、テスト用としてココに記載（listという名前にしておく）
  3. データ（list）をJSONにして返すために「Json(list, JsonRequestBehavior.AllowGet)」を記載

ビュー側

  1. ビューのscriptタグ内で「$.getJSON()」を使う。
  2. コントローラーの「IndexJsonData()」を読込むために「$.getJSON()」で「@Url.Action("IndexJsonData")」を記載
  3. 「ko.applyBindings」で「viewModel」を実行
  4. 「items」に取得したJSONをいれる
  5. HTMLタグ側で「items」を「foreach」する
  6. priceには「円」という文字を追加しておく。

knockout.jsのチュートリアルをやっていたから、この記述は理解しづらい。チュートリアルでの記述に合わせたのは「ASP.NET MVCとknockout.jsの連携：データをJSONで渡す2」に記載。

新着（ニュース関連以外）

2018-07-26
冬真っただ中の年賀状の「新春」
年賀状で「新春」とか書くけど・・・何故なんだろうと8月を目前にした今、疑問に思った。
2018-05-16
PHP 画像の回転とヘッダ情報の関連：Orientationとimagerotate()とimagejpeg()
PHPで画像のヘッダ情報（？）の「Orientation」を元に画像回転させたい。
2018-03-05
WinPCにAndroid Studioをインストールする
Android Studioをインストール。エミュレータを軽くするトコまで終わらせたかったけど、挫折した。
2018-02-23
ServiceWorkerについてのメモ
プッシュ通知について調べてた時にでてきたServiceWorker。そのServiceWorkerについてのメモ。
2017-12-13
jqueryでdomを配列で受け取るためのメモ
jqueryで取得したDOM要素をオブジェクトじゃなくて、配列で受け取りたい

ニュース関連の新着

各種記事（昨日：2021/10/26）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/25）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/22）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/21）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/20）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/19）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/18）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/16）盛り合わせ：SEOとか。

Copyright© 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.