jqTreeをASP MVCとJSONファイルで使用する

Question

私は、自分のASP MVCアプリケーションにjqTreeを追加しました。私は、私の見解でツリービューを表示する必要があります。

@{ 
    ViewBag.Title = "Tree"; 
} 

<h2>@ViewBag.Title</h2> 

<div id="tree1" data-url="/Home/Nodes"></div> 

@section scripts { 
    <script language="javascript" type="text/javascript"> 
     $(function() { 
      $('#tree1').tree(); 
     }); 
    </script> 
} 

私のデータがJSONファイル（〜/ App_Dataに/ Roles.json）である：私はJSONファイルをロードするにはどうすればよい

{ 
    "id": 1, 
    "label": "Role1", 
    "children": [ 
     { 
      "id": 2, 
      "label": "Role2", 
      "children": [ 
       { 
        "id": 3, 
        "label": "Role3", 
        "children": [ 
        ] 
       }, 
       { 
        "id": 4, 
        "label": "Role4", 
        "children": [ 
        ] 
       } 
      ] 
     } 
    ] 
} 

ビュー内の対応するツリービューを表示するコントローラアクションメソッド？

public ActionResult Nodes() 
{ 
    var roles = // load json file 

    return Json(roles, JsonRequestBehavior.AllowGet); 
} 

Answer 1

あなたはJSONファイル（〜/ App_Dataに/ Roles.json）からJSONを渡すと、次のようにツリーを作成することができます

<div id="tree1"></div> 

@section scripts { 
    <script language="javascript" type="text/javascript"> 
     $.ajax({ 
      type: 'POST', // we are sending data so this is POST 
      traditional: true, 
      url: '/Home/Nodes', // controller/action name 
      success: function (d) { 
       $('#tree1').tree({ 
        data: [jQuery.parseJSON(d)] 
       }); 
      } 
     }); 
    </script> 
} 

：

はあなたのビューに以下のコードを追加します。

としてあなたHomeControllerでNodes()関数を作成します：

public ActionResult Nodes() 
    { 
     string roles = string.Empty; 
     using (StreamReader r = new StreamReader(Server.MapPath("~/App_Data/Roles.json"))) 
     { 
      roles = r.ReadToEnd(); 
     }     
     return Json(roles, JsonRequestBehavior.AllowGet); 
    } 

そして、あなたのwあなたの木を見ることができない。問題が発生した場合はお知らせください。