ピースペース

JsonResult 活用その2 JQuery EasyUI Tree

leave a comment »

checkboxTree

JQuery EasyUIを使うと、上記のようなCheckBox付のTreeも簡単に表示できる。

Viewに配置するTree要素

<ul id="typeTree" class="easyui-tree"
    url="Map/InstTypesTreeData" 
    checkbox="true"></ul>

本来のulタグにurl属性やcheckbox属性などないが、こう指定しておくだけで、
表示時に指定したurlからノードデータを自動的に読み込んでツリーを展開してくれる。
で、指定urlはjsonでノードデータを提供する必要がある。

ノードデータを提供するコントローラ

public ActionResult InstTypesTreeData()
{
      List<TreeNode> nodes = new List<TreeNode>();

      TreeNode node1 = new TreeNode();
      nodes.Add(node1);

      node1.id = 1;
      node1.text = "市役所";
      node1.children = new List<TreeNode>();

      TreeNode node2 = new TreeNode();
      node1.children.Add(node2);
      node2.id = 2;
      node2.text = "市役所";

      TreeNode node3 = new TreeNode();
      nodes.Add(node3);
      node3.id = 3;
      node3.text = "学校";
      node3.children = new List<TreeNode>();

      TreeNode node4 = new TreeNode();
      node3.children.Add(node4);
      node4.id = 4;
      node4.text = "大学";

      TreeNode node5 = new TreeNode();
      node3.children.Add(node5);
      node5.id = 5;
      node5.text = "高校";
            
      return Json(nodes);
}

public class TreeNode
{
    public int id { get; set; }
    public string text { get; set; }
    public string state { get; set; }
    public string @checked { get; set; }
    public ICollection<TreeNode> children { get; set; }
}

サーバー側は上記のようなノードクラスを定義して、ツリーインスタンスを作成し、
これまたJsonメソッドに食べさせるだけで良い。

これまで、例えばComboBoxのリストデータはViewBagやViewModelに詰め込んでViewに渡すもの。
と思い込んでいたが、この方法だとViewにもActionメソッドにも余計なコードが混じらないですっきりする。
Push→Pullに発想の転換。みたいな。
Retrun JsonResultなActionでViewをすっきりさせよう!みたいな。

JsonResultなActionは、言い換えれば、for JavaScriptなWebサービスだ。
そこまではわかったが、使いこなすには、まだまだ修行が必要 →JavaScript;;

Written by nasu38yen

2012年9月6日 @ 4:25 PM

カテゴリー: .NET

Tagged with

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。