jsTree not getting data from server - asp.net-mvc

Question

In my mvc application, I have used jsTree,
my view
#{
ViewBag.Title = "OnDemand";
}
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jstree.min.js"></script>
<h2>OnDemand - Treeview</h2>
<div id="demo1">
</div>
<script type="text/javascript">
jQuery(function($) {
$("#demo1").jstree({
"json_data": {
"ajax": {
"type": "POST",
"dataType": "json",
"async": true,
"contentType": "application/json;",
"opts": {
"method": "POST",
"url": "/Treeview/GetAllNodes11"
},
"url": "/Treeview/GetAllNodes11",
"data": function (node) {
if (node == -1) {
return '{ "operation" : "get_children", "id" : -1 }';
}
else {
//get the children for this node
return '{ "operation" : "get_children", "id" : ' + $(node).attr("id") + ' }';
}
},
"success": function (retval) {
return retval.d;
},
}
},
"plugins": ["themes", "json_data"]
});
});
</script>
my controller
[HttpPost]
public JsonResult GetAllNodes11(string id)
{
List G_JSTreeArray = new List();
G_JSTree _G_JSTree = new G_JSTree();
_G_JSTree.data = "x1";
_G_JSTree.state = "closed";
_G_JSTree.IdServerUse = 10;
_G_JSTree.children = null;
_G_JSTree.attr = new G_JsTreeAttribute { id = "10", selected = false };
G_JSTreeArray.Add(_G_JSTree);
G_JSTree _G_JSTree2 = new G_JSTree();
var children =
new G_JSTree[]
{
new G_JSTree { data = "x1-11", attr = new G_JsTreeAttribute { id = "201" } },
new G_JSTree { data = "x1-12", attr = new G_JsTreeAttribute { id = "202" } },
new G_JSTree { data = "x1-13", attr = new G_JsTreeAttribute { id = "203" } },
new G_JSTree { data = "x1-14", attr = new G_JsTreeAttribute { id = "204" } },
};
_G_JSTree2.data = "x2";
_G_JSTree2.IdServerUse = 20;
_G_JSTree2.state = "closed";
_G_JSTree2.children = children;
_G_JSTree2.attr = new G_JsTreeAttribute { id = "20", selected = true };
G_JSTreeArray.Add(_G_JSTree2);
G_JSTree _G_JSTree3 = new G_JSTree();
var children2 =
new G_JSTree[]
{
new G_JSTree { data = "x2-11", attr = new G_JsTreeAttribute { id = "301" } },
new G_JSTree { data = "x2-12", attr = new G_JsTreeAttribute { id = "302" }, children= new G_JSTree[]{new G_JSTree{data = "x2-21", attr = new G_JsTreeAttribute { id = "3011" }}} },
new G_JSTree { data = "x2-13", attr = new G_JsTreeAttribute { id = "303" } },
new G_JSTree { data = "x2-14", attr = new G_JsTreeAttribute { id = "304" } },
};
_G_JSTree3.data = "x3";
_G_JSTree3.state = "closed";
_G_JSTree3.IdServerUse = 30;
_G_JSTree3.children = children2;
_G_JSTree3.attr = new G_JsTreeAttribute { id = "30", selected = true };
G_JSTreeArray.Add(_G_JSTree3);
return new JsonResult { Data = G_JSTreeArray, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
but it does not hitting the controller
what is the issue with this code?

Answer 1

data cannot be a function so dynamic data assignment based on selected node is not evaluated but you use assign url with a function to change parameter to pass to controller. you must use GET method to retrieve data from controller -
Try this
"json_data": {
ajax: {
"url": function (node) {
var url;
if (node == -1) {
url = "/Treeview/GetAllNodes11/?operation=get_children";
} else {
var id = $(node).attr("id");
url = "/Treeview/GetAllNodes11/?operation=get_children&id=" + id;
}
return url;
},
"type": "GET",
"dataType": "json",
"contentType": "application/json charset=utf-8",
},
},