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」に記載。

新着(ニュース関連以外)

2017-08-03
formのinputでmaxlengthを使うとFirefoxでバグってた。他のブラウザでも気づかずにバグってたかもしれない。
2017-07-19
折れ線グラフをもう少しゆるやかに・・・というか何というか・・・調べていくと「移動平均」っていう言葉にたどり着いた
2017-07-10
FuelPHPの1.8をダウンロードして使っていたらセッションが使えないということに気付いた。
2017-06-27
MACにWin10をインストールしてみた:再挑戦。
2017-06-25
「簡単」っていうヤツらが多いけど・・・難しいぞ。