如何在ASP.NET MVC的jsTree中实现文件点击打开功能？

看起来你遇到的是jsTree拦截了默认<a>标签点击行为的问题——毕竟jsTree本身是用来处理树形结构交互的，默认不会自动触发链接跳转，而外部的<li>因为没被jsTree初始化，所以浏览器会执行默认的跳转逻辑。下面给你一步步的解决方案：

1. 完善模型定义 #

首先确保JsTreeAttribute类包含跳转需要的属性，补充完整代码如下：

public class JsTreeAttribute 
{
    public string href { get; set; } // 存储文件的访问URL
    public string target { get; set; } = "_blank"; // 默认新标签页打开
}

然后在生成文件节点时，给a_attr赋值正确的访问路径，比如从ASP.NET MVC的Action生成URL：

// 示例：生成文件节点
var fileNode = new JsTreeModel
{
    id = $"file-{Guid.NewGuid()}", // 生成唯一节点ID
    text = Path.GetFileName(fileFullPath),
    icon = "glyphicon glyphicon-file", // 可选：设置文件图标区分文件夹
    type = "file", // 标记为文件类型，方便后续判断
    a_attr = new JsTreeAttribute
    {
        // 替换成你的文件下载/访问Action
        href = Url.Action("GetFile", "FileManager", new { filePath = fileFullPath }),
        target = "_blank"
    },
    state = new JsTreeState { opened = false },
    children = new List<JsTreeModel>()
};

2. 前端绑定点击事件处理跳转 #

jsTree默认会阻止节点的默认点击行为，我们需要监听select_node.jstree事件，手动处理文件节点的跳转逻辑：

// 初始化jsTree
$('#your-tree-container').jstree({
    'core': {
        'data': @Html.Raw(Json.Serialize(YourTreeModel)), // 传入你的树形模型数据
        'check_callback': true
    },
    'types': {
        'default': {
            'icon': 'glyphicon glyphicon-folder-close'
        },
        'file': {
            'icon': 'glyphicon glyphicon-file'
        }
    },
    'plugins': ['types'] // 启用types插件区分文件夹和文件
}).on('select_node.jstree', function (e, data) {
    const node = data.node;
    // 判断当前选中的是文件节点，并且存在有效链接
    if (node.type === 'file' && node.a_attr?.href) {
        // 打开链接，优先使用节点设置的target，默认新标签页
        window.open(node.a_attr.href, node.a_attr.target || '_blank');
    }
});

3. 验证渲染结果 #

可以右键检查页面元素，确认文件节点渲染后的<a>标签是否包含正确的href和target属性，比如：

<a class="jstree-anchor" href="/FileManager/GetFile?filePath=..." target="_blank">
    <i class="jstree-icon jstree-themeicon"></i>
    example.txt
</a>

如果链接路径正确、事件绑定无误，点击文件节点就应该能在新标签页正常打开了。另外还要注意检查ASP.NET MVC的Action是否有权限访问，比如是否需要登录验证，或者路径参数是否能正确解析。

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