JSTree call from view to controller in MVC4

Question

I am trying to create a dynamic JSTree in my MVC4 project. However I am a complete beginner when it comes to Json. I am attempting to make an ajax json call from my _layout.cshtml, here is the code:

    <script type="text/javascript">
$(document).ready(function () {
$("#demo1").jstree({
        "json_data": {
            "ajax": {
                "type": "POST",
                "dataType": "json",
                "contentType": "application/json;",
                "url": "Home/GetAllNodes",
                "data": function (node) {
                    return '{ "operation" : "get_children", "id" : 1 }';
                },
                "success": function (retval) {
                    return retval.d;
                }
            }
        },
        "plugins": ["themes", "json_data"]
    });
});
</script>

I have taken this code from this site and have followed the steps closely, however, the project used in this example is a web form project, an I am unsure of the translation between these two projects when using json.

here is my method from HomeController - GetAllNodes:

[WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List<JSTreeTestMod> GetAllNodes(string id)
        {
            List<JSTreeTestMod> JSTreeArray = new List<JSTreeTestMod>();

            JSTreeTestMod treeItem = new JSTreeTestMod();
            treeItem.data = "x1";
            treeItem.state = "closed";
            treeItem.IdServerUse = 10;
            treeItem.children = null;
            treeItem.attr = new JSTreeAttribute { id = "10", selected = false };
            JSTreeArray.Add(treeItem);

            JSTreeTestMod treeItem2 = new JSTreeTestMod();
            var children =
                new JSTreeTestMod[]
        {
            new JSTreeTestMod { data = "x1-11", attr = new JSTreeAttribute { id = "201" } },
            new JSTreeTestMod { data = "x1-12", attr = new JSTreeAttribute { id = "202" } },
            new JSTreeTestMod { data = "x1-13", attr = new JSTreeAttribute { id = "203" } },
            new JSTreeTestMod { data = "x1-14", attr = new JSTreeAttribute { id = "204" } },
        };
            treeItem2.data = "x2";
            treeItem2.IdServerUse = 20;
            treeItem2.state = "closed";
            treeItem2.children = children;
            treeItem2.attr = new JSTreeAttribute { id = "20", selected = true };
            JSTreeArray.Add(treeItem2);

            JSTreeTestMod treeItem3 = new JSTreeTestMod();
            var children2 =
                new JSTreeTestMod[]
        {
            new JSTreeTestMod { data = "x2-11", attr = new JSTreeAttribute { id = "301" } },
            new JSTreeTestMod { data = "x2-12", attr = new JSTreeAttribute { id = "302" }, children= new JSTreeTestMod[]{new JSTreeTestMod{data = "x2-21", attr = new JSTreeAttribute { id = "3011" }}} },
            new JSTreeTestMod { data = "x2-13", attr = new JSTreeAttribute { id = "303" } },
            new JSTreeTestMod { data = "x2-14", attr = new JSTreeAttribute { id = "304" } },
        };
            treeItem3.data = "x3";
            treeItem3.state = "closed";
            treeItem3.IdServerUse = 30;
            treeItem3.children = children2;
            treeItem3.attr = new JSTreeAttribute { id = "30", selected = true };
            JSTreeArray.Add(treeItem3);
            return JSTreeArray;
        }

Does anyone have experience using jstree in MVC4?

Answer 1

Maybe alittle late but i have create an MVC HTML Helper that will help you to set up a tree using latest JStree plugin, you can find it here.

https://jstreemvcwrapper.codeplex.com/

the usage is simpler:

@(Html.JSTreeView(Model.TreeNodes)
.ContrainerID("TreeContainer")
.Children(n => n.Childern)
.ItemID(n=>n.NodeID.ToString())
.ItemType(n=>n.NodeType.ToString())
.IsSelected(n=> n.NodeID == 1)
.OnNodeSelect("onTreeFolderSelected")
.Plugins("wholerow", "types")
.CoreConfig(new
{
      expand_selected_onload = true,
      multiple = false
})
.TypesConfig(new
{
      Root = new { icon = "../Content/jsTree/Root.png" },
      Folder = new { icon = "../Content/jsTree/Folder.png" },
      File = new { icon = "../Content/jsTree/File.png" },
      @default = new { icon = "../Content/jsTree/Folder.png" }
})
.ItemTemplate(@<text> <a href="#" >@item.NodeName</a> </text>))

you do not have to create a specific model for the JSTree. and IEnumrable will work as a source .. just specific the childern property using:

.Children(n => n.Childern)

method and the rest will be done..

it is still in early beta .. but will help you to jump start that project of yours..