带有MVC的jsTree JSON [英] jsTree JSON with MVC

问题描述

我做了很多研究，找不到答案.我想将JSTREE与MVC3.0集成.这是我的Javascript设置:

I have done a lot of research and cannot find an answer. I want to integrate JSTREE with MVC3.0. Here is my Javascript setup:

setupTree: function (treeDivId) {
    $('#' + treeDivId).jstree({
        "json_data": {
            "ajax": {
                url: CustomTree.SectorLoadUrl,
                type: "POST",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                data: function (n) {
                    return { id: n.attr ? n.attr("id") : "0" };
                },
                success: function (data, textstatus, xhr) {
                    alert(data);
                },
                error: function (xhr, textstatus, errorThrown) {
                    alert(textstatus);
                }
            }
        },
        "themes": {
            "theme": "default",
            "dots": true,
            "icons": false
        },
        "plugins": ["themes", "json_data"]

    });
}

我也可以正确获取数据，如在上传的图片中可以看到的:

I also get the data correctly as can be seen in the uploaded image:

但是，以下几行代码:

 data: function (n) {
                    return { id: n.attr ? n.attr("id") : "0" };
                },

对于n总是返回-1.

然后在textstatus的OnError处理程序上收到解析器错误.

And I get a parser error on the OnError handler in my textstatus.

推荐答案

我将回答这个问题，希望对别人有所帮助.

I am going to answer this question in the hopes that it helps someone.

我总共花了5个小时试图了解正在发生的事情，最后添加了一个hack.

I spent a total of 5hrs trying to understand what was going on and finally added a hack.

使用Firebug，我注意到在URL上附加了一个回调.返回数据时，未执行回调.我没有指定任何回调，因此这是要研究的第一项.

Using Firebug, I noticed that a callback was being appended to the URL. When the data was returned, the callback was not getting executed. I didn't specify any callbacks, so that was the first item to look into.

根据文档，事实证明从jquery1.5开始，如果认为数据类型为jsonp，它将自动附加回调.但是，我明确提到"json"作为我的数据类型，所以我不明白为什么它要附加该回调.

Per documentation, turns out that jquery1.5 onwards it will automatically append a callback if it thinks the data type is jsonp. However, I explicitly mentioned 'json' as my data type so I don't understand why it appended that callback.

这是jquery文档说的: "jsonp":使用JSONP加载JSON块.将添加额外的?callback =?" URL的末尾以指定回调.

Here's what the jquery documentation says: "jsonp": Loads in a JSON block using JSONP. Will add an extra "?callback=?" to the end of your URL to specify the callback.

所以这让我想知道发生了什么事.事实证明，从jquery 1.5开始，您现在可以在AJAX调用中指定多种数据类型，并且jquery会自动尝试进行转换.

So this made me wonder what was going on. Also turns out, as of jquery 1.5, you can now specify multiple data types in the AJAX call and jquery will automatically try to convert.

在jquery文档中深层隐藏着这样的含义:从jQuery 1.5开始，jQuery可以将dataType从Content-Type标头中接收的数据类型转换为所需的内容."

Buried deep within the jquery documentation is this: "As of jQuery 1.5, jQuery can convert a dataType from what it received in the Content-Type header to what you require."

所以我只是认为最好以文本形式返回数据类型，然后使用jquery将其转换为json.当我将dataType更改为"text json"而不是"json"时，一切都神奇地开始工作了.

So I just thought it would be better to return the data type as text, then use jquery to convert it to json. The moment I changed my dataType to "text json" instead of just "json", everything magically started working.

我的猜测是，新的jquery可以自动推断数据类型.我的工作期限很紧，所以我无法再研究此问题，但是如果有人找到答案，请发布.

My guess is, there's something up with auto-inference on data types with the new jquery. I am on a strict deadline so I cannot research this issue anymore, but if someone finds answers, please do post.

这是我修改后的Javascript:

Here is my modified Javascript:

 setupTree: function (treeDivId) {
    $('#' + treeDivId).jstree({
        "json_data": {
            "ajax": {
                "url" : CustomTree.SectorLoadUrl,
                "type" : "POST",
                "dataType" : "text json",
                "contentType" : "application/json charset=utf-8",
            }
    },
    "themes": {
        "theme": "default",
        "dots": true,
        "icons": false
    },
    "plugins": ["themes", "json_data"]

});

这篇关于带有MVC的jsTree JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！