title: Loading JS tree from JSON in ASP.Net 3.5 & MVC 2.0
body: <p>HI All,</p>
  
  <p>i am trying to write a small example to create a Tree using Jstree &amp; Query (new version commits) in ASP.Net 3.5 &amp; MVC 2.0. I have to do it in these technologies.</p>
  
  <p>When i try loading the data in JSON format the tree does not load. It just shows a java script dialog (error/unknown) and displays "Loading ...". Thats it.</p>
  
  <p>Can you please help me out looking at the complete solution attached?</p>
  
  <p>If you have any working solution in MVC &amp; JSON to load a tree using json,jquery,jstree with add/delete/rename/create functionality for reference, please share the same.</p>
  
  <p>Code:
  My Index.aspx View:</p>
  
  <pre><code>&lt;%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %&gt;
  
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"&gt;
      Home Page
  &lt;/asp:Content&gt;
  
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"&gt;
      &lt;h2&gt;&lt;%= Html.Encode(ViewData["Message"]) %&gt;&lt;/h2&gt;
      &lt;p&gt;
          To learn more about ASP.NET MVC visit &lt;a href="http://asp.net/mvc" title="ASP.NET MVC Website"&gt;http://asp.net/mvc&lt;/a&gt;.
      &lt;/p&gt;
      &lt;script src="../../Scripts/jquery-1.6.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="../../Scripts/jquery.jstree.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"&gt;&lt;/script&gt;
       &lt;script type="text/javascript" language="javascript"&gt;
      var GetStudentsURL = '&lt;%= Url.Action("GetTreeData", "Home")%&gt;';
  //alert(GetStudentsURL);
  
  function OnGetNodes(n) {
  
      //basically, these are the parameters to be passed to the server code [they MUST match exaclty, casing and all]
      var obj = {
          id: n.attr ? n.attr("id") : "0"
      }
      return Sys.Serialization.JavaScriptSerializer.serialize(obj);
  }
  
  function OnNodesRetrievedSuccess(data, textstatus, xhr) {
  
      //the ".d" is a security feature, annoying, but necessary
      return Sys.Serialization.JavaScriptSerializer.deserialize(data.d);
  }
  
  function OnNodesRetrievedError(xhr, textstatus, errorThrown) {
      alert(errorThrown);
  
      //document.location = "/MyErrorPage.aspx?errMsg="+errorThrown;
  }
  $(function () {
      $("#treeview").jstree({
          plugins: ["themes", "json_data", "checkbox", "crrm"],
          json_data: {
              ajax: {
                  url: GetStudentsURL,
                  async: true,
                  contentType: "application/json; charset=utf-8",
                  dataType: "text json",
                  //dataType: "text json",
                  type: "POST",
                  data: function (n) {
                  //alert(n);
                      return OnGetNodes(n);
                  },
                  success: function (data, textstatus, xhr) {
                      //alert(data);
                      //alert(textstatus);
                      //alert(xhr);
                      return OnNodesRetrievedSuccess(data, textstatus, xhr)
                  },
                  error: function (xhr, textstatus, errorThrown) {
                      //alert(errorThrown);
                      //alert(textstatus);
                      //alert(xhr);
                      OnNodesRetrievedError(xhr, textstatus, errorThrown)
                  }
              }
          }
      })
  });
       &lt;/script&gt;
              &lt;div id="treeview"&gt;
              &lt;/div&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>My HomeController"</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  using  System.Web.Script.Serialization;
  using System.Web.Script.Services;
  using jsTreeDemo.Models;
  
  namespace MyJSTreeDemo.Controllers
  {
      [HandleError]
      public class HomeController : Controller
      {
          public ActionResult Index()
          {
              ViewData["Message"] = "TreeView Demo";
  
              return View();
          }
  
          public ActionResult About()
          {
              return View();
          }
  
          [AcceptVerbs(HttpVerbs.Post)]
          public string GetTreeData(string id)
          {
              List&lt;AjaxTreeNodeJsonObject&gt; results = new List&lt;AjaxTreeNodeJsonObject&gt;();
  
              //NODE ID: TREEID_LEVEL_PARENTID_ID
  
              //this should be the first call from the tree to initialize
  
              if (string.IsNullOrEmpty(id) | id == "0")
              {
                  results.Add(new AjaxTreeNodeJsonObject("TREE1_0_0_1", "U.S.A.", "#", true));
                  results.Add(new AjaxTreeNodeJsonObject("TREE1_0_0_2", "Canada", "#", true));
  
  
              }
              else
              {
                  //Get Child Nodes
  
                  //these are subsequent calls to populate the tree nodes
                  string[] nodeInfo = id.Split('_');
                  string nodeTree = nodeInfo[0];
                  int nodeLevel = Convert.ToInt32(nodeInfo[1]);
                  int nodeParentId = Convert.ToInt32(nodeInfo[2]);
                  int nodeId = Convert.ToInt32(nodeInfo[3]);
  
                  //this would be better as a database lookup or some hierarchical tree structure
  
                  switch (nodeTree)
                  {
                      //WHICH TREE?
  
                      case "TREE1":
  
                          switch (nodeLevel)
                          {
                              //WHICH LEVEL?
  
                              case 0:
                                  //country
  
                                  switch (nodeParentId)
                                  {
                                      //WHICH PARENT?
  
                                      case 0:
                                          //no parent
  
                                          switch (nodeId)
                                          {
                                              //WHICH NODE?
  
                                              case 1:
                                                  //USA
  
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_1", "Alabama", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_2", "Alaska", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_3", "Arizona", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_4", "Arkansas", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_5", "California", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_6", "Colorado", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_7", "Connecticut", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_8", "Delaware", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_9", "Florida", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_10", "Georgia", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_11", "Hawaii", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_12", "Idaho", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_13", "Illinois", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_14", "Indiana", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_15", "Iowa", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_16", "Kansas", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_17", "Kentucky", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_18", "Louisiana", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_19", "Maine", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_20", "Maryland", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_21", "Massachusetts", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_22", "Michigan", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_23", "Minnesota", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_24", "Mississippi", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_25", "Missouri", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_26", "Montana", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_27", "Nebraska", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_28", "Nevada", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_29", "New Hampshire", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_30", "New Jersey", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_31", "New Mexico", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_32", "New York", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_33", "North Carolina", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_34", "North Dakota", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_35", "Ohio", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_36", "Oklahoma", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_37", "Oregon", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_38", "Pennsylvania", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_39", "Rhode Island", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_40", "South Carolina", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_41", "South Dakota", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_42", "Tennessee", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_43", "Texas", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_44", "Utah", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_45", "Vermont", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_46", "Virginia", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_47", "Washington", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_48", "West Virginia", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_49", "Wisconsin", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1_50", "Wyoming", "#"));
  
                                                  break;
                                              case 2:
                                                  //CANDA
  
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_1", "Ontario", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_2", "Quebec", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_3", "Nova Scotia", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_4", "New Brunswick", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_5", "Manitoba", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_6", "British Columbia", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_7", "Prince Edward Island", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_8", "Saskatchewan", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_9", "Alberta", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_10", "Newfoundland and Labrador", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_11", "Northwest Territories", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_12", "Yukon", "#"));
                                                  results.Add(new AjaxTreeNodeJsonObject("TREE1_1_13", "Nunavut", "#"));
  
                                                  break;
                                          }
  
                                          break;
                                  }
  
                                  break;
                          }
  
                          break;
                  }
  
              }
  
              JavaScriptSerializer ser = new JavaScriptSerializer();
  
              return ser.Serialize(results);
          }
  
      }
  
  
      internal class AjaxTreeNodeJsonObject
      {
  
          private AjaxTreeNodeJsonObjectAttribute _attr = new AjaxTreeNodeJsonObjectAttribute();
          private string _state = string.Empty;
          private string _icon = string.Empty;
          private string _metadata = string.Empty;
          private AjaxTreeNodeJsonObjectDataLinkAttribute _data = new AjaxTreeNodeJsonObjectDataLinkAttribute();
  
          private AjaxTreeNodeJsonObject[] _children;
  
          public AjaxTreeNodeJsonObjectAttribute attr
          {
              get { return _attr; }
          }
  
          public AjaxTreeNodeJsonObjectDataLinkAttribute data
          {
              get { return _data; }
          }
  
          public string state
          {
              get { return _state; }
              set { _state = value; }
          }
  
          public string icon
          {
              get { return _icon; }
              set { _icon = value; }
          }
  
          public string metadata
          {
              get { return _metadata; }
              set { _metadata = value; }
          }
  
          public AjaxTreeNodeJsonObject[] children
          {
              get { return _children; }
              set { _children = value; }
          }
  
          public AjaxTreeNodeJsonObject()
          {
          }
  
          public AjaxTreeNodeJsonObject(string id, string title, string href)
              : this(id, title, href, false)
          {
          }
  
  
          public AjaxTreeNodeJsonObject(string id, string title, string href, bool hasChildren)
          {
              //li values
              this.attr.id = id;
              this.attr.title = title;
              //a values
              this.data.attr.href = href;
              this.data.attr.id = "a" + this.attr.id;
              this.data.title = this.attr.title;
  
              if (hasChildren)
              {
                  this.state = "closed";
              }
  
          }
  
  
          public AjaxTreeNodeJsonObject(string id, string title, string href, AjaxTreeNodeJsonObject[] children)
          {
              //li values
              this.attr.id = id;
              this.attr.title = title;
              //a values
              this.data.attr.href = href;
              this.data.attr.id = "a" + this.attr.id;
              this.data.title = this.attr.title;
  
              if (children != null &amp;&amp; children.Length &gt; 0)
              {
                  this.state = "closed";
                  this.children = children;
              }
  
          }
  
      }
  
      internal class AjaxTreeNodeJsonObjectAttribute
      {
          private string _id = string.Empty;
  
          private string _title = string.Empty;
          /// &lt;summary&gt;
          /// Gets or sets the Id value
          /// &lt;/summary&gt;
          public string id
          {
              get { return this._id; }
              set { this._id = value; }
          }
  
          /// &lt;summary&gt;
          /// Gets or sets the Title value
          /// &lt;/summary&gt;
          public string title
          {
              get { return this._title; }
              set { this._title = value; }
          }
  
      }
  
      internal class AjaxTreeNodeJsonObjectDataLinkAttribute
      {
  
          private string _title = string.Empty;
  
          private AjaxTreeNodeJsonObjectLinkAttribute _attr = new AjaxTreeNodeJsonObjectLinkAttribute();
          /// &lt;summary&gt;
          /// Gets or sets the Title value
          /// &lt;/summary&gt;
          public string title
          {
              get { return this._title; }
              set { this._title = value; }
          }
  
          public AjaxTreeNodeJsonObjectLinkAttribute attr
          {
              get { return _attr; }
              set { _attr = value; }
          }
  
      }
  
      internal class AjaxTreeNodeJsonObjectLinkAttribute
      {
          private string _id = string.Empty;
          private string _href = string.Empty;
  
          private string _target = string.Empty;
          /// &lt;summary&gt;
          /// Gets or sets the Id value
          /// &lt;/summary&gt;
          public string id
          {
              get { return this._id; }
              set { this._id = value; }
          }
  
          /// &lt;summary&gt;
          /// Gets or sets the Href value
          /// &lt;/summary&gt;
          public string href
          {
              get { return this._href; }
              set { this._href = value; }
          }
  
          /// &lt;summary&gt;
          /// Gets or sets the Target value
          /// &lt;/summary&gt;
          public string target
          {
              get { return this._target; }
              set { this._target = value; }
          }
  
      }
  
      }
  </code></pre>
  
  <p>Nag</p>