如何在Asp.Net Core MVC中实现文件夹树形TreeView结构

1. 后端核心实现 #

首先完成树形结构数据的生成逻辑，不管你用前端渲染还是服务端渲染都需要这一步：

• 第一步定义树形节点模型

public class FolderTreeNode
{
    // 节点唯一标识
    public int Id { get; set; }
    // 文件夹/文件名称
    public string Name { get; set; }
    // 完整路径
    public string FullPath { get; set; }
    // 父节点ID，根节点为null
    public int? ParentId { get; set; }
    // 子节点集合
    public List<FolderTreeNode> Children { get; set; } = new List<FolderTreeNode>();
    // 可选：标记是文件夹还是文件
    public bool IsFolder { get; set; }
}

• 第二步编写递归生成目录树的业务逻辑

public class FolderTreeService
{
    private int _idCounter = 1;

    public List<FolderTreeNode> GetFolderTree(string rootPath, int? parentId = null)
    {
        var result = new List<FolderTreeNode>();
        try
        {
            // 获取当前目录下的所有子目录
            var directories = Directory.GetDirectories(rootPath);
            foreach (var dir in directories)
            {
                var node = new FolderTreeNode
                {
                    Id = _idCounter++,
                    Name = Path.GetFileName(dir),
                    FullPath = dir,
                    ParentId = parentId,
                    IsFolder = true
                };
                // 递归获取子目录
                node.Children = GetFolderTree(dir, node.Id);
                // 如果需要同时加载文件，可在这里加文件的读取逻辑
                var files = Directory.GetFiles(dir);
                foreach (var file in files)
                {
                    node.Children.Add(new FolderTreeNode
                    {
                        Id = _idCounter++,
                        Name = Path.GetFileName(file),
                        FullPath = file,
                        ParentId = node.Id,
                        IsFolder = false
                    });
                }
                result.Add(node);
            }
        }
        catch (UnauthorizedAccessException)
        {
            // 处理无权限访问的目录，按需忽略或者打日志
        }
        return result;
    }
}

• 第三步注册服务并提供接口/传递数据
  • 如果是前后端分离项目，在Controller中写接口返回Json格式的树形数据即可
  • 如果是MVC/Razor Pages项目，直接将生成的树形数据传递给视图即可

2. 前端渲染方案 #

方案A：服务端渲染（适合MVC/Razor Pages场景） #

在Razor视图中递归渲染树形结构，示例代码：

@{
    void RenderTree(List<FolderTreeNode> nodes)
    {
        <ul>
            @foreach (var node in nodes)
            {
                <li>
                    <span class="node-toggle @(node.Children.Any() ? "" : "hidden")">▶</span>
                    <span class="node-name">@node.Name</span>
                    @if (node.Children.Any())
                    {
                        RenderTree(node.Children);
                    }
                </li>
            }
        </ul>
    }
}

<div class="tree-view">
    @RenderTree(Model.FolderTree)
</div>

<style>
    .tree-view ul { padding-left: 20px; list-style: none; }
    .node-toggle { cursor: pointer; display: inline-block; width: 16px; }
    .node-toggle.collapsed { transform: rotate(90deg); }
    .hidden { visibility: hidden; }
</style>

<script>
// 实现折叠展开逻辑
document.querySelectorAll('.node-toggle').forEach(toggle => {
    toggle.addEventListener('click', e => {
        const li = e.target.parentElement;
        const childUl = li.querySelector('ul');
        childUl.classList.toggle('hidden');
        e.target.classList.toggle('collapsed');
    });
});
</script>

方案B：前后端分离场景（以Vue+Element UI为例） #

直接使用成熟的Tree组件，不需要自己写折叠展开逻辑，开发效率更高：

<template>
  <el-tree
    :data="treeData"
    :props="treeProps"
    @node-click="handleNodeClick"
    show-icon
  >
  </el-tree>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const treeData = ref([])
const treeProps = {
  children: 'Children',
  label: 'Name',
  isLeaf: (data) => !data.IsFolder
}

onMounted(() => {
  // 请求后端接口获取树形数据
  axios.get('/api/folder-tree').then(res => {
    treeData.value = res.data
  })
})

const handleNodeClick = (data) => {
  console.log('点击的节点信息：', data)
}
</script>

3. 常用优化点 #

• 懒加载：如果目录层级很深、文件数量多，不要一次性加载全部节点，点击父节点的时候再异步请求当前节点的子节点，大幅降低首次加载压力
• 图标适配：给文件夹、不同后缀的文件配置对应的图标，提升视觉辨识度
• 权限控制：根据用户权限过滤可访问的目录，避免泄露敏感文件路径
• 操作交互：可扩展右键菜单，实现新建文件夹、重命名、删除、下载等常用文件操作

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