ASP.NET TreeView 控件實現文件系統瀏覽器功能

功能效果

使用 TreeView 控件以樹狀結構展示服務器磁盤目錄結構，支持按需加載（延遲加載）子目錄與文件，體驗類似 Windows 資源管理器。

前端控件聲明

頁面加載初始化根節點（磁盤列表）

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        foreach (DriveInfo drive in DriveInfo.GetDrives())
        {
            TreeNode node = new TreeNode();
            node.Value = drive.Name; // 如 "C:\"
            node.PopulateOnDemand = true; // 關鍵：啟用按需加載
            node.Expanded = false;
            
            if (drive.IsReady)
            {
                node.Text = $"{drive.Name} ({drive.VolumeLabel})";
            }
            else
            {
                node.Text = $"{drive.Name} (未就緒)";
            }
            
            driverInfoView.Nodes.Add(node);
        }
    }
}

節點展開時動態加載子目錄與文件

protected void driverInfoView_TreeNodePopulate(object sender, TreeNodeEventArgs e)
{
    DirectoryInfo dir = new DirectoryInfo(e.Node.Value);
    
    try
    {
        // 加載子目錄
        foreach (DirectoryInfo subDir in dir.GetDirectories())
        {
            TreeNode childNode = new TreeNode();
            childNode.Text = subDir.Name;
            childNode.Value = subDir.FullName;
            childNode.PopulateOnDemand = true; // 遞歸啟用按需加載
            childNode.Expanded = false;
            childNode.ImageUrl = "~/Images/folder.png"; // 可選圖標
            e.Node.ChildNodes.Add(childNode);
        }
        
        // 加載文件
        foreach (FileInfo file in dir.GetFiles())
        {
            TreeNode fileNode = new TreeNode();
            fileNode.Text = file.Name;
            fileNode.Value = file.FullName;
            fileNode.PopulateOnDemand = false; // 文件葉子節點
            fileNode.ImageUrl = "~/Images/file.png";
            e.Node.ChildNodes.Add(fileNode);
        }
    }
    catch (UnauthorizedAccessException)
    {
        // 權限不足目錄靜默跳過或添加提示節點
        TreeNode errorNode = new TreeNode("⚠ 無訪問權限");
        errorNode.Value = "";
        e.Node.ChildNodes.Add(errorNode);
    }
    catch (Exception ex)
    {
        // 記錄日誌
        TreeNode errorNode = new TreeNode($"⚠ 錯誤: {ex.Message}");
        e.Node.ChildNodes.Add(errorNode);
    }
}

關鍵技術點

進階增強建議

1. 圖標區分：根據文件擴展名設置不同 ImageUrl
2. 右鍵菜單：集成 ContextMenu 插件實現複製/刪除/重命名
3. 搜索過濾：文本框輸入關鍵字，客戶端 JS 過濾樹節點顯示
4. 虛擬路徑映射：將物理路徑映射為 Web 可訪問虛擬路徑，支持文件下載鏈接
5. 權限控制：根據用戶角色過濾可見目錄
6. 大目錄分頁：單目錄文件過多時分批加載

權限與安全注意

• 應用程序池身份需具備目標目錄讀取權限
• 生產環境嚴禁暴露系統敏感目錄 (Windows、Program Files 等)
• 通過配置文件指定允許瀏覽的根目錄白名單
• 異常捕獲防止未授權訪問導致頁面崩潰

TreeView + PopulateOnDemand 模式構建高性能、可擴展的 Web 文件瀏覽器，是內部管理系統常用功能模組。