ASP.NET Core MVC中jstree事件传值至控制器实现产品查询

1. 绑定jstree点击事件并发起请求 #

在视图页面（如Index.cshtml）中，初始化jstree后添加节点选中事件监听，获取节点ID后通过AJAX请求传递到控制器：

<script>
$(function () {
    // 初始化jstree
    $('#tree-container').jstree({
        'core': {
            'data': {
                'url': '@Url.Action("GetTreeData", "Home")',
                'dataType': 'json'
            }
        }
    }).on('changed.jstree', function (e, data) {
        // 获取选中节点的ID
        var nodeId = data.selected[0];
        if (nodeId) {
            // 异步请求控制器获取详情
            $.ajax({
                url: '@Url.Action("GetProductDetails", "Home")',
                type: 'GET',
                data: { nodeId: nodeId },
                success: function (html) {
                    // 将详情渲染到页面指定区域
                    $('#product-details').html(html);
                },
                error: function () {
                    $('#product-details').html('加载产品详情失败');
                }
            });
        }
    });
});
</script>

页面中预留详情展示区域：

<div id="product-details" class="mt-4"></div>

2. 控制器编写对应方法 #

在目标控制器（如HomeController）中，实现树形数据接口和详情查询接口：

// 返回树形结构数据
public IActionResult GetTreeData()
{
    // 替换为你的树形数据查询逻辑，比如从数据库读取分类/产品结构
    var treeNodes = new List<object>
    {
        new { id = "cat1", text = "电子产品", children = new[] { new { id = "prod1", text = "智能手机" } } },
        new { id = "cat2", text = "家用电器", children = new[] { new { id = "prod2", text = "冰箱" } } }
    };
    return Json(treeNodes);
}

// 接收节点ID，查询并返回产品详情视图片段
public IActionResult GetProductDetails(string nodeId)
{
    // 执行SQL查询或EF操作，根据nodeId获取产品数据
    var product = _dbContext.Products.FirstOrDefault(p => p.Id == nodeId);
    
    // 返回部分视图，用于渲染详情
    return PartialView("_ProductDetails", product);
}

3. 创建详情部分视图 #

新建_ProductDetails.cshtml部分视图，负责展示产品详情内容：

@model YourProject.Models.Product

@if (Model != null)
{
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">@Model.ProductName</h5>
            <p class="card-text">价格：¥@Model.Price</p>
            <p class="card-text">库存：@Model.Stock</p>
            <p class="card-text">描述：@Model.Description</p>
        </div>
    </div>
}
else
{
    <p>未找到对应产品信息</p>
}

关键注意点 #

• changed.jstree事件会在节点选中状态变化时触发，data.selected是选中节点ID的数组，单选中取第一个元素即可
• 用@Url.Action生成路由地址，避免硬编码URL导致的路由错误
• 通过AJAX异步请求实现无刷新更新页面，提升用户体验
• 部分视图复用详情渲染逻辑，让代码结构更清晰

内容的提问来源于stack exchange，提问作者Ben Weston