MVC4 JsTree 将选定节点传递给控制器答案

【问题标题】：MVC4 JsTree Passing Selected Node to ControllerMVC4 JsTree 将选定节点传递给控制器
【发布时间】：2013-09-25 23:48:31
【问题描述】：

我的视图中有以下 javascript 来构建 TreeView 并从服务器获取数据：

  $(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 }
    });
});

我的控制器有：

public ActionResult GetEquipTreeViewData(string nodeId)

    {
        do some stuff

        return Json (data);

    }

一切正常，只是我从来没有得到选定的节点。我总是在 nodeId 处得到 NULL。即使我改成：

"data": { nodeId : "TEST" }

我仍然得到 null 或一些 Javascript 错误。这让我抓狂。我也试过了：

"data" : JSON.stringfy(nodeId);

并继续发送 null。

它应该是一个普通的 AJAX 调用，但它不是。我只需要将选定的树节点传递给控制器以根据用户选择重新加载结果页面。

感谢您的帮助。

[编辑] 我测试变体的结果：

测试1：

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 }
    });
});

浏览器错误：无效的 Jason 基元：nodeId

[TEST2]

代码：

 $(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 }
        });
    });

在控制器调用函数，但收到 null。浏览器数据：

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

修复它具有“无属性”的请求有效负载。通常我们会有一个带有“参数”和“值”对的字典的表单数据......这是我正在尝试的第 n 个组合。很奇怪……

【问题讨论】：

标签： c# javascript asp.net-mvc-4 jstree

【解决方案1】：

在我的代码中我使用：

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

（注意';'）

除此之外，当 ajax 调用返回时，您应该返回一个 JSON 格式的响应：您是否尝试过使用 Chrome 开发人员工具对其进行检查？您收到回复了吗？

最后但同样重要的是，如果您得到正确的响应，默认情况下不会选择任何节点，因此查询get_selected 将返回undefined。

【讨论】：

请检查我上面的EDIT1和EDIT2。

【解决方案2】：

试试这个：

public JsonResult GetEquipTreeViewData(string nodeId)

    {
        do some stuff

        return Json (data, JsonRequestBehavior.DenyGet);

    }

【讨论】：

问题是没有将数据从控制器传递到视图。问题是将数据从视图传递到控制器。但这确实是一个错误。我还没有进入这一点，因为我仍在尝试从 View Ajax 调用中接收数据。
打开控制台（几乎所有浏览器都是f12），如果有任何错误，请检查网络选项卡。

【解决方案3】：

好的。这就是我解决它的方法（实际上我改变了将数据传递给视图的方式）：

    $(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 }
        });
    });

基本上我退出了 javascript 并寻求帮助者（他们是来这里的......为了提供帮助）...... Javascript 很好用而且功能强大，但仍然缺乏良好的 IDE 环境/调试工具来避免这些与逗号、半逗号和其他小东西相关的故障。记住我过去的纯 C++ 时代（我的意思是纯 cc 编译器，根本没有 IDE）。

希望这对某人有所帮助！

Rds！

【讨论】：