4

我第一次使用 c#.net 玩 jstree (1.0rc2)+jquery (1.4.2)，虽然我已经让它工作了，但有几件事我不明白如何提供数据给我用来填充树的 web 服务的树（使用 ajax 和 json_data 插件）。我希望有更多使用 jstree 经验的人可以提供一些见解。

jstree 配置如下所示：

 "json_data": {
                "ajax": {
                    "url": "GetTree.asmx/GetChildren",
                    "type": "POST",
                    "contentType": "application/json; charset=utf-8",
                    "dataType": "json",
                    "data": function(n) {
                        var result = "{'id':'" + (n.attr ? n.attr("id").replace("node_", "") : "0") + "'}";
                        return (result);
                    }
                }
            }

GetTree.asmx GetChildren 方法：

   [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Xml )]
    public string GetChildren(string id)
    {
        List<jsTreeNode> jsTree = new List<jsTreeNode>();
        //... (build the tree as needed)

        JavaScriptSerializer serializer = new JavaScriptSerializer();
        return(serializer.Serialize(jsTree)); 
    }

问题1：所以一切都很好，那么问题是什么？问题是“ResponseFormat = ResponseFormat.Xml”。我挣扎了一段时间才能让它工作，因为当它设置为 ResponseFormat.Json 时它不起作用，这正是我所期望的。在这种情况下，Web 服务或 jQuery 在解析 json 响应时不会报告任何错误，但树会呈现为空。

在查看 Web 服务的 HTML 输出时，我看不出两种方式呈现的内容之间没有区别。我希望有人可以解释为什么这有效（违反直觉）以及为什么它不适用于 ResponseFormat.Json，如果这表明我可能做错了其他事情。

问题 2：一般是 Web 服务还是 Web 处理程序？

无论如何，使用通用 Web 处理程序 (ashx) 会是一种更有效的方法吗？标准 Web 服务与通用 Web 处理程序所需的开销是否存在显着差异？由于我的目标基本上是准确控制输出的内容（并且在 Web 服务中使用 json 数据格式似乎并没有按照我想要的方式工作）我不确定有什么好处（如果有的话）在这里使用 Web 服务，而不是完全剥离它。另一方面，这现在有效，所以也许我应该独自离开。

4

3 回答 3

4

看到这个问题有近 600 次浏览并且没有答案，我想我会自己回答（因为我早就想通了）。

使用 aScriptMethod确实不是与 jQuery ajax 进行通信的正确方式。虽然可以做到，但您会注意到我在上面所做的是将string我自己编码为 JSON 的数据返回JavascriptSerializer.

但是，使用ScriptMethod 旨在与 Microsoft 的 AJAX 框架进行通信的自动合并序列化/反序列化。由于序列化没有对象包装器的纯字符串通常会产生相同的字符串（无论我返回 XML 还是 JSON 格式），它基本上可以工作，但内部真正发生的是它被序列化了两次。

所以我至少应该做的是：

public List<jsTreeNode> GetChildren(string id)

即返回类型应该是实际的数据类型，而不是一串序列化的数据。

但是，这仍然不完全正确，因为 Microsoft 的方法将返回值包装在 objectd中。我仍然可以在 Javascript 中提取它以获取内部数据。但是，如果像 jsTree 这样的东西需要预定义格式的数据，这可能不可行。

最好的解决方案是不要使用 WebServices，而是使用通用处理程序 (ashx)。这使您可以完全控制输入和输出的格式和处理。为自己设置一个不错的框架可能需要做一些事情，但是无法跳过您不需要的部分 WebService 处理的挫败感使它非常值得。

于 2011-04-12T13:12:35.803 回答
1

抱歉，我不同意您的回答，3.5 框架对 Json 序列化和 Web 服务有很好的支持（对于 2.0，您可以使用 Newtonsoft.Json）。请在http://code.zyky.com/jsTreeView/Default.aspx和http://asp-net-elephant.blogspot.com/2012/01/how-to-use上查看我的 JsTree ASP.NET Web 控件演示-jstree-in-aspnet-web-forms.html是两者的示例。希望这可以帮助。

于 2012-03-08T19:53:15.177 回答
0

关于问题 1（我无法与 Q2 交谈），我已经获得了一个 Web 服务来将 JSON 反馈给 jsTree 插件。虽然我认识到 WCF 和 REST 是更流行的方法，而且从长远来看无疑会更好，但我们仍然使用 asmx Web 服务，它们确实完成了工作。但这并不容易：我花了一段时间试图获得在 JS 中工作的确切语法，以便 jsTree 可以从 ASP.NET Web 服务中获取其数据对象。正如 OP 在他的解决方案中所暗示的那样，问题不在于我的 JS 和插件的接线，而在于我的 Web 服务返回的不稳定的 JSON 数据。它看起来像 JSON，但它是简化 JSON 对象的字符串表示。

为了修复它，我必须反序列化和序列化我的 json 字符串（我从https://stackoverflow.com/a/20080495/1129926得到了一个线索），结果对象被 jsTree 愉快地使用了。这是我的网络服务：

Imports System.Web.Script.Serialization

Public Function GetJsonData() As String
    Dim jss As JavaScriptSerializer = New JavaScriptSerializer
    ' IMPORTANT: do not use single quotes ' in JSON string, use ""
    Dim jsonData As String = "" & _
    "{ ""text"": ""CONTACTS"", ""children"": [ { ""text"": ""CUSTOMER"", ""column"": ""CLASS"", ""children"": [ { ""text"": ""Excelo Communications"", ""column"": ""COMPANY"", ""children"": [{ ""text"": ""Fred Shorts"", ""column"": ""CONTACT"" }] } ] }, { ""text"": ""USER"", ""column"": ""CLASS"" } ] }"
    Dim o As Object = Nothing
    Try
        ' deserialize the JSON into an Object,
        ' shout out to: https://stackoverflow.com/a/20080495/1129926
        o = jss.Deserialize(Of Object)(jsonData)
        o = jss.Serialize(o)
        Context.Response.Clear()
        Context.Response.ContentType = "application/json; charset=utf-8"
    Catch ex As Exception
        // log something
    End Try

    Return o

End Function

在客户端上，我在脚本块中初始化了 jsTree，如下所示：

$(document).ready(function () {
    var sURL = "../dataIO.asmx/GetJsonData";
    var dataIn = "";
    $.ajax({
        async: true,
        type: "POST",
        url: sURL,
        dataType: "json",
        data: dataIn,
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            console.log("data obj:" + data);
            createJSTrees(data);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest.statusText + "(status=" + XMLHttpRequest.status + "): " + XMLHttpRequest.responseText);
        }
    });
});
function createJSTrees(jsonData) {
    $("#jstree_dataNav").jstree({
        "core": {
            "data": jsonData
        }
    });
    $("#jstree_dataNav").on("changed.jstree", function (e, data) {
        console.log(data.selected);
    });
}

<div id="jstree_dataNav"></div>

jsTree 有一些替代语法，而您在 core.data 部分中调用 Web 服务，但我无法让它工作。相反，我通过 ajax 调用我的 Web 服务，然后将 JSON 数据对象传递给初始化 jsTree 插件的函数，而 jsTree 只是使用了在 data: 中传入的对象。

于 2016-03-03T02:11:21.187 回答