ASP.NET MVCとknockout.jsの連携:引数を渡してJSONを取得

2012/04/16
「http://xxxx.xx/Home/Js009/」をブラウザに入力したら「$.getJSON()」が実行。
その際に「Js009」を引数としたい。

ソース

コントローラー: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 JqueryController : Controller
  10.   {
  11.     public ActionResult Index()
  12.     {
  13.       return View();
  14.     }
  15.  
  16.     public ActionResult Js009()
  17.     {
  18.       return View();
  19.     }
  20.  
  21.     public ActionResult TestDataOfJsonWithArgument(string arg)
  22.     {
  23.       List<Dictionary<string, string>> list = new List<Dictionary<string, string>>()
  24.       {
  25.         new Dictionary<string, string>() { {"id", "1"}, {"item", "ねぎ間"}, {"price", "168"} },
  26.         new Dictionary<string, string>() { {"id", "2"}, {"item", "ハツ"}, {"price", "136"} },
  27.         new Dictionary<string, string>() { {"id", "3"}, {"item", "レバー"}, {"price", "136"} },
  28.         new Dictionary<string, string>() { {"id", "4"}, {"item", "ぼんちり"}, {"price", "136"} },
  29.         new Dictionary<string, string>() { {"id", "5"}, {"item", "はらみ"}, {"price", "136"} },
  30.         new Dictionary<string, string>() { {"id", "6"}, {"item", "うずら玉子"}, {"price", "136"} },
  31.         new Dictionary<string, string>() { {"id", "7"}, {"item", "なんこつ"}, {"price", "136"} },
  32.         new Dictionary<string, string>() { {"id", "8"}, {"item", "手羽先"}, {"price", "168"} },
  33.         new Dictionary<string, string>() { {"id", "9"}, {"item", "せせり"}, {"price", "136"} },
  34.         new Dictionary<string, string>() { {"id", "10"}, {"item", "白レバー"}, {"price", "168"} },
  35.         new Dictionary<string, string>() { {"id", "11"}, {"item", "丸ごとシマウマ"}, {"price", "290"} },
  36.       };
  37.  
  38.       return Json(list, JsonRequestBehavior.AllowGet);
  39.     }
  40.   }
  41. }

※引数として「arg」を受け取っているけど処理は何もしていない。

ビュー:Views/Home/Js009.cshtml

  1. @{
  2.   ViewBag.Title = "「action」を引数にしてJSON取得";
  3.   string JsonArg = this.ViewContext.Controller.ControllerContext.RouteData.Values["action"] as string;
  4. }
  5.  
  6. <script type="text/javascript">
  7.   $(document).ready(function () {
  8.     // ko.applyBindingsで実行される中身?
  9.     function viewModel() {
  10.       var self = this;
  11.  
  12.       // ko.observable()で初期化?
  13.       self.items = ko.observable();
  14.  
  15.       // $.getJSONでデータの読込み
  16.       $.getJSON('@Url.Action("TestDataOfJsonWithArgument")', { arg: "@JsonArg" }, self.items);
  17.     }
  18.  
  19.     // ドキュメントが読み込まれたらko.applyBindings()を実行
  20.     ko.applyBindings(new viewModel());
  21.   });
  22. </script>
  23.  
  24. <h2>@ViewBag.Title</h2>
  25.  
  26. <table>
  27. <thead>
  28. <tr>
  29. <th>id</th>
  30. <th>item</th>
  31. <th>price</th>
  32. </thead>
  33. <tbody data−bind="foreach: items">
  34. <tr>
  35. <td data−bind="text: id"></td>
  36. <td data−bind="text: item"></td>
  37. <td data−bind="text: price+' 円'"></td>
  38. </tr>
  39. </tbody>
  40. </table>

めも

コントローラー側の「TestDataOfJsonWithArgument(string arg)」(21行目)の「arg」と、ビュー側の「{ arg: "@JsonArg" }」(16行目)の「arg」は合わせる必要あり。
ビュー側の「string JsonArg = this.ViewContext.Controller.ControllerContext.RouteData.Values["action"] as string;」(3行目)で設定した「JsonArg」をscriptタグ内で使うので「@JsonArg」とする。文字列だから「"」でくくる必要もある。

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

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