jquery - 在 jsTree 中选择项目时访问 ASP.NET MVC 服务器端数据

Question

我正在使用jsTree在我的 ASP.NET MVC 应用程序中显示分层数据的树结构。到目前为止，我能够访问数据(通过返回 JSON 数据的 Controller 方法)并显示树。我还可以选择树中的节点并且工作正常。下面是执行此操作的 jsTree 代码:

$('#tree').
    bind('select_node.jstree', function(event, data) {
        alert("Node is selected.");
    }).
    jstree({
        "core": {},
        "json_data": {
            "ajax": {
                type: 'POST',
                url: '/Scenario/TreeData',
                data: "id=" +  <%= Model.Scenario.ScenarioID %>,
                success: function(data, textStatus, xhr) {
                    if(data.failed) {
                        window.location.href = data.redirectToUrl;
                    }
                }
            }
        },
        "themes": {
            "theme": "default",
            "dots": true,
            "icons": true
        },
        "ui": {
            "select_limit": 1
        },
        "plugins": ["themes", "ui", "json_data"]
    });

这是我的 TreeData 操作:

[HttpPost]
public ActionResult TreeData(int id)
{
    var tree = new JsTreeModel();

    Scenario scenario = repository.GetScenario(id);
    if (scenario != null)
    {
        tree.data = new JsTreeData();

        // [snip] Do the work to build the tree. [/snip]

        return Json(tree);
    }

    var jsonData = new
    {
        failed = true,
        redirectToUrl = Url.Action("NotFound")
    };
    return Json(jsonData);
}

我陷入困境的是，一旦我单击一个节点，我不确定如何从我的应用程序(通过 Controller )检索该特定节点的数据，显示它(大概在部分 View 中 - 所有我此时创建的 - 强类型部分 View )，然后提供将该部分 View 提交回服务器以更新数据的选项。

我不太确定从哪里开始。我的一个想法是扩展我的 TreeModel 类(C# 模型，可以更轻松地为树构建 JSON 数据)以在“数据”值中获取更多参数，这可以让我知道我正在尝试检索哪个模型。然而，这似乎并不那么优雅。

我是否遗漏了一些明显的东西？有人还有其他建议吗？谢谢!

Answer 1

我最终弄清楚了这一点，并希望分享以防其他人想做同样的事情。

我首先将 select_node.jstree 事件绑定(bind)到我的树，然后构建树(当然，所有这些都是在客户端完成的)。

$('#tree').
bind('select_node.jstree', function(event, data) {
    var id = 1; // TODO - Get the ID from the current model.
    var url = data.rslt.obj.children("a:eq(0)").attr("href");
    $.ajax({
        type: 'POST',
        url: '/Scenario/' + url,
        data: 'id=' + id,
        success: function(data) {
            $('#ajaxcontent').html(data);
        }
    });
}).jstree({
    "core": {},
    "json_data": {
        "ajax": {
            type: 'POST',
            url: '/Scenario/TreeData',
            data: "id=" + <%= Model.Scenario.ScenarioID % > ,
            success: function(data, textStatus, xhr) {
                if (data.failed) {
                    window.location.href = data.redirectToUrl;
                }
            }
        }
    },
    "ui": {
        "select_limit": 1
    },
    "plugins": ["themes", "ui", "json_data"]
});

请注意，我正在从节点获取 URL 值。我必须更改 JsTreeModel，以便可以更改节点上的 href 值。 (JSON 数据表示形式是 - data.attr.href)我在构建场景时设置了此值。每个节点都有自己的 URL。 (我传入 ID 参数，这样我就可以检索正确的场景服务器端。根据您的需要，这可能是必要的，也可能不是必要的。)

然后，我为 Controller 中的每个 URL 创建一个操作。我对数据执行需要执行的操作，然后将其返回到页面(通过前面显示的 AJAX 调用)。现在我知道我在做什么，这实际上是一个相当简单的解决方案。但是，由于缺乏文档，第一次弄清楚有点棘手。

希望这可以帮助别人!