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

Question

我正在使用 jsTree 在 ASP.NET MVC 应用程序中显示分层数据的树结构。到目前为止，我能够访问数据（通过返回 JSON 数据的控制器方法）并显示树。我还可以选择树中的节点并且工作正常。这是执行此操作的 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);
}

我遇到的问题是，一旦单击某个节点，我不确定如何从我的应用程序中检索该特定节点的数据（通过控制器） ，显示它（大概在部分视图中 - 所有这些都是我此时创建的 - 强类型部分视图），然后提供将该部分视图提交回服务器以更新数据的选项。

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

我错过了一些明显的东西吗？有人还有其他建议吗？谢谢你！

Answer 1

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

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

$('#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 参数，这样我就可以检索正确的场景服务器端。根据您的需要，这可能是必要的，也可能不是。）

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

希望这可以帮助别人！