MVC4 JsTree Passing Selected Node to Controller

Question

I have the following javascript in my view to build a TreeView and get data from server:

  $(function () {

    $("#EquipmentTree").jstree({

        "json_data": {
            "ajax": {
                "url": "/Helper/GetEquipTreeViewData",
                "type": "POST",
                "data": function () {$("#EquipmentTree").jstree('get_selected').attr('id');},
                "dataType": "json",
                "contentType": "application/json charset=utf-8"
            }
        },

        "themes": {
            "theme": "default",
            "dots": true,
            "icons": true,
            "url": "Scripts/jstree-v.pre1.0/themes/default/style.css"
        },

        "plugins": ["themes", "json_data"],

        "core": { "animation": 100 }
    });
});

My controller has:

public ActionResult GetEquipTreeViewData(string nodeId)

    {
        do some stuff

        return Json (data);

    }

Everthing works fine except that I never get the selected node. I always get NULL at nodeId. Even if I change to:

"data": { nodeId : "TEST" }

I still get null or some Javascript error. This is turning me nuts. I tried also:

"data" : JSON.stringfy(nodeId);

And continue sending null.

It is supposed to be a normal AJAX call, but it isn´t. I just need to pass the selected treenode to controller to reload the result page based on user selection.

Thanks for help.

[EDIT] My results on testing variants:

TEST1:

var selected_node = $("#EquipmentTree").jstree('get_selected').attr('id');
    $("#EquipmentTree").jstree({

        "json_data": {
            "ajax": {
                "url": "/Helper/GetEquipTreeViewData",
                "type": "POST",
                "data": { nodeId : selected_node },
                "dataType": "json",
                "contentType": "application/json; charset=utf-8"
            }
        },

        "themes": {
            "theme": "default",
            "dots": true,
            "icons": true,
            "url": "Scripts/jstree-v.pre1.0/themes/default/style.css"
        },

        "plugins": ["themes", "json_data"],

        "core": { "animation": 100 }
    });
});

Error at browser: Invalid Jason Primitive: nodeId

[TEST2]

Code:

 $(function () {

        var selected_node = $("#EquipmentTree").jstree('get_selected').attr('id');
        $("#EquipmentTree").jstree({

            "json_data": {
                "ajax": {
                    "url": "/Helper/GetEquipTreeViewData",
                    "type": "POST",
//                    "data": { nodeId : selected_node },
                    "data": JSON.stringify ("nodeId : " + selected_node),
                    "dataType": "json",
                    "contentType": "application/json; charset=utf-8"
                }
            },

            "themes": {
                "theme": "default",
                "dots": true,
                "icons": true,
                "url": "Scripts/jstree-v.pre1.0/themes/default/style.css"
            },

            "plugins": ["themes", "json_data"],

            "core": { "animation": 100 }
        });
    });

Called the function at the controller, but received null. Browser data:

Request URL:http://localhost:7767/Helper/GetEquipTreeViewData
Request Method:POST
Status Code:200 OK
Request Headersview parsed
POST /Helper/GetEquipTreeViewData HTTP/1.1
Host: localhost:7767
Connection: keep-alive
Content-Length: 24
Accept: application/json, text/javascript, */*; q=0.01
Origin: http://localhost:7767
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.76 Safari/537.36
Content-Type: application/json; charset=UTF-8
Referer: http://localhost:7767/MasterDataAdminEquipment
Accept-Encoding: gzip,deflate,sdch
Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4
Cookie: ASP.NET_SessionId=yuf1omlottf0xb4aklvfr4wg

Request Payload view source
nodeId : EquipmentTree
No Properties

Repair that it has a Request Payload with "No Properties". Normally we would have a Form Data with a dictionary of "Parameter" and "Value" pairs.... This is the n´th combination I´m trying. Very strange...

Answer 1

OK. This is how I solved it (actually I changed to way to pass data to view):

    $(function () {

        var selected_node = $("#EquipmentTree").jstree('get_selected').attr('id');
        var link = '@Url.Action("GetEquipTreeViewData", "Helper", new { nodeId = "-1" })';
        link = link.replace("-1", selected_node);

        $("#EquipmentTree").jstree({

            "json_data": {
                "ajax": {
                    "url": link,
                    "type": "POST",
                    "dataType": "json",
                    "contentType": "application/json; charset=utf-8"
                }
            },

            "themes": {
                "theme": "default",
                "dots": true,
                "icons": true,
                "url": "Scripts/jstree-v.pre1.0/themes/default/style.css"
            },

            "plugins": ["themes", "json_data"],

            "core": { "animation": 100 }
        });
    });

Basically I quit javascript and went for the helpers (that´s they are here for.. To help)... Javascript is nice and powerfull, but still lack a good IDE environent/debugging tools to avoid these type of glitches related to commas, semicommas and other small things. Remember me the old plain C++ times (I mean pure cc compiler, no IDE at all).

Hope this helps someone!

Rds!

Answer 2

In my code I use:

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

(Note the ';')

Apart from this, when the ajax call returns, you should get back a JSON formatted response: have you tried to inspect it using Chrome Developer tools? Do you receive the response?

Last but not least, also if you get a correct response, no node will be selected by default, so querying get_selected will return undefined.

Answer 3

Try this instead :

public JsonResult GetEquipTreeViewData(string nodeId)

    {
        do some stuff

        return Json (data, JsonRequestBehavior.DenyGet);

    }