一个使用jstree（jQuery插件）的ASP.NET Core MVC Web应用，但我不知道如何使用jstree的事件

前端开发 2026-07-10

我正在尝试在我的ASP.NET Core MVC Web应用中使用jstree。我在使用一个节点类显示数据方面没有问题：

public class JsTreeModel
{
    public string text { get; set; }
    public string id { get; set; }

    public int level { get; set; }

    public List<JsTreeModel> children { get; set; }

    public JsTreeModel()
    {
        text = string.Empty;
        id = string.Empty;
        level = 0;
        children = new List<JsTreeModel>();
    }
}

以及一个从控制器的 Index() 方法调用的递归函数，用于使用EF Core从我的SQL数据库获取数据：

public IActionResult Index()
{
    ProductTreeViewModel model = new ProductTreeViewModel();
    JsTreeModel treeModel = new JsTreeModel();

    GetProductFolders(ref treeModel);
    model.ProductTreeModel = treeModel;

    return View(model);
}

public void GetProductFolders(ref JsTreeModel treeModel)
{
    List<ProductFolder> rootList = new List<ProductFolder>();
    rootList = _context.ProductFolders.Where(x => x.ParentFolderId == 0).ToList();

    //treeModel.id = rootList[0].ProductFolderId.ToString();
    treeModel.id = "#";
    //treeModel.text = rootList[0].ProductFolderName;
    treeModel.level = rootList[0].ProductFolderLevel;

    List<ProductFolder> folderList = new List<ProductFolder>();
    folderList = _context.ProductFolders.Where(x => x.ParentFolderId == rootList[0].ProductFolderId).ToList();

    PopulateTree(rootList[0], treeModel, folderList);
}

private void PopulateTree(ProductFolder productFolder, JsTreeModel treeModel, List<ProductFolder> productFolders)
{
    treeModel.children = new List<JsTreeModel>();

    for (int i = 0; i < productFolders.Count; i++)
    {
        if (productFolders[i] != null)
        {
            if (productFolders[i].ParentFolderId == productFolder.ProductFolderId)
            {
                JsTreeModel childNode = new JsTreeModel();
                childNode.id = productFolders[i].ProductFolderId.ToString();
                childNode.text = productFolders[i].ProductFolderName;
                childNode.level = productFolders[i].ProductFolderLevel;

                treeModel.children.Add(childNode);

                List<ProductFolder> folderList = new List<ProductFolder>();
                folderList = _context.ProductFolders.Where(x => x.ParentFolderId == productFolders[i].ProductFolderId).ToList();

                PopulateTree(productFolders[i], childNode, folderList);
            }
        }
    }
}

这是视图的完整代码：

@model MyIMS_EFCore.Models.ProductTreeViewModel
@{
    ViewData["Title"] = "Products";
}

<h2>Products</h2>

<div style="height: 363px">
    <div class="panel panel-default" style="width: 300px;height: 320px;float:left">
        <div class="panel-body">
            <div id="divProductTree">
                <div id="jsProductTree"></div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script type="text/javascript">
        var jsProductTreeData = JSON.parse('@Html.Raw(Json.Serialize(Model.ProductTreeModel))')

        $(document).ready(function () {
            $('#jsProductTree').jstree({
            'core': {
                'themes': {
                    'icons': false
                },
                'data': jsProductTreeData
            },
            'plugins': ["defaults","changed","json_data","ui"],
            })
            $('#jsProductTree').on('changed.jstree',function(e, data) {
                console.log(data.node.id);
                alert(data.node.text);
                // alert(data.node.id);
            });
        });
    </script>
}

在 changed.jstree 事件中的 alert(data.node.id); 和 alert(data.node.text); 行每次单击不同的节点时都会显示正确的节点ID和文本，但我不明白如何把这些数据发送回控制器中的一个函数。我的目标是把节点ID作为参数放入SQL查询中，以在树状视图所在的同一页上填充产品详情表。

jstree的事件文档对我完全没有帮助，我在此站点和其他地方尝试的所有示例都缺少完整代码——要么只是说“哦，只需使用这个Ajax调用”，要么说“你需要在插件中包含“ui””。我找不到一个示例能展示显示jstree的代码、用jstree显示数据的代码，以及解释如何使用jstree事件来实现比警报和控制台日志更有用功能的代码。

我对整个网页开发领域还算新手，因此希望有某位在外面的朋友能对我心存怜悯，给我看看我在过去50个我试着复制的例子中错过的那个简单点。

解决方案

[...] 我不明白如何把这些数据发送回控制器中的一个函数。我的目标是把节点ID作为参数放入SQL查询中，以在树状视图同一页上填充产品详情的表。

你有两种选择：[XMLHttpRequest] 或使用 [fetch() API]。我觉得fetch API更直观，也无疑更现代。

$('#jsProductTree').on('changed.jstree', async function(e, data) {
    let url = `@Url.Action("Node", "ProductTree")/${encodeURIComponent(data.node.id)}`;
    let response = await fetch(url);

    if (response.ok) {
        // parses the JSON response from the server
        let newTreeData = response.json();

        // redraw the jstree
    }
    else {
        console.error('Failed to load jstree');
    }
});

你在MVC应用中的控制器：

[ApiController]
public class ProductTreeController : Controller
{
    [HttpGet]
    [Route("ProductTree/Node/{id}")]
    public IActionResult Node(string id)
    {
        var treeEntity = // get from database by id
        var treeResponse = // map treeEntity to a specific response object to avoid recursively converting entities to JSON

        return Json(treeResponse );
    }
}

还有一些细节缺失，因此有几条我没法给出具体代码的地方：