代码之家 › 专栏 › 技术社区 › Jamie Treworgy

.net中的jquery+jstree-webservice响应格式?

jstree json jquery asp.net c#

Jamie Treworgy · 技术社区 · 15 年前

我第一次用c#.net玩jstree(1.0rc2)+jquery(1.4.2),虽然我已经让它工作了,但是有两件事我不明白我用来填充树的webservice是如何向树提供数据的(使用ajax和json#数据插件)。我希望有更多使用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);
                    }
                }
            }

   [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时,它没有工作,这正是我所期望的。在这种情况下,解析json响应时,web服务或jQuery不会报告错误,但是树将呈现为空。

问题2: 一般来说,web服务还是web处理程序?

3 回复 | 直到 15 年前

Jamie Treworgy 15 年前

鉴于这个问题有近600个观点,没有答案,我想我会自己回答(因为我早就想明白了)。

使用 ScriptMethod 确实不是与jQuery ajax通信的正确方式。虽然这是可以做到的,但你会注意到我上面所做的是返回一个 string 使用我自己编码为JSON的数据 JavascriptSerializer.

但是,使用 脚本方法 自动合并序列化/反序列化,旨在与Microsoft的AJAX框架通信。由于在没有对象包装器的情况下序列化纯字符串通常会导致相同的字符串(无论我是返回XML还是JSON格式),因此基本上是可行的,但实际上在内部发生的是序列化两次 .

public List<jsTreeNode> GetChildren(string id)

也就是说,返回类型应该是实际的数据类型,而不是序列化数据的字符串。

但是,这仍然不完全正确,因为Microsoft的方法将返回值包装在一个对象中 d . 我仍然可以在Javascript中提取它来获取内部数据。但是,如果jsTree之类的东西需要预定义格式的数据,这可能是不可行的。

最好的解决办法是这使您可以完全控制输入和输出的格式和处理。为自己建立一个好的框架可能需要做一点工作,但是无法跳过不需要的WebService处理的一部分,这让它非常值得。

David Grover 14 年前

抱歉,我不同意你的回答3.5框架对Json序列化和Web服务有很好的支持(对于2.0,你可以使用Newtonsoft.Json)。请参见我的JsTree ASP.NET Web控件演示 http://code.zyky.com/jsTreeView/Default.aspx http://asp-net-elephant.blogspot.com/2012/01/how-to-use-jstree-in-aspnet-web-forms.html 举个例子。希望这有帮助。

Community Mohan Dere 9 年前

关于问题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>