Loading JS tree from JSON in ASP.Net 3.5 & MVC 2.0

Question

HI All,

i am trying to write a small example to create a Tree using Jstree & Query (new version commits) in ASP.Net 3.5 & MVC 2.0. I have to do it in these technologies.

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.

Can you please help me out looking at the complete solution attached?

If you have any working solution in MVC & JSON to load a tree using json,jquery,jstree with add/delete/rename/create functionality for reference, please share the same.

Code: My Index.aspx View:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%= Html.Encode(ViewData["Message"]) %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
    </p>
    <script src="../../Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.jstree.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
     <script type="text/javascript" language="javascript">
    var GetStudentsURL = '<%= Url.Action("GetTreeData", "Home")%>';
//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)
                }
            }
        }
    })
});
     </script>
            <div id="treeview">
            </div>
</asp:Content>

My HomeController"

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<AjaxTreeNodeJsonObject> results = new List<AjaxTreeNodeJsonObject>();

            //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 && children.Length > 0)
            {
                this.state = "closed";
                this.children = children;
            }

        }

    }

    internal class AjaxTreeNodeJsonObjectAttribute
    {
        private string _id = string.Empty;

        private string _title = string.Empty;
        /// <summary>
        /// Gets or sets the Id value
        /// </summary>
        public string id
        {
            get { return this._id; }
            set { this._id = value; }
        }

        /// <summary>
        /// Gets or sets the Title value
        /// </summary>
        public string title
        {
            get { return this._title; }
            set { this._title = value; }
        }

    }

    internal class AjaxTreeNodeJsonObjectDataLinkAttribute
    {

        private string _title = string.Empty;

        private AjaxTreeNodeJsonObjectLinkAttribute _attr = new AjaxTreeNodeJsonObjectLinkAttribute();
        /// <summary>
        /// Gets or sets the Title value
        /// </summary>
        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;
        /// <summary>
        /// Gets or sets the Id value
        /// </summary>
        public string id
        {
            get { return this._id; }
            set { this._id = value; }
        }

        /// <summary>
        /// Gets or sets the Href value
        /// </summary>
        public string href
        {
            get { return this._href; }
            set { this._href = value; }
        }

        /// <summary>
        /// Gets or sets the Target value
        /// </summary>
        public string target
        {
            get { return this._target; }
            set { this._target = value; }
        }

    }

    }

Nag

Levon · Accepted Answer · 2012-08-13 20:44:08Z

1

remove this line

 contentType: "application/json; charset=utf-8",

answered Aug 13, 2012 at 20:44

Levon

1599 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Loading JS tree from JSON in ASP.Net 3.5 & MVC 2.0

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related