ASP.NET 設計網路硬碟：資料夾瀏覽與多層目錄支援

延續「ASP.NET + XML 網路硬碟」主題，本文專注於主介面設計與資料夾瀏覽功能：工程建立、MasterPage 版面配置、TreeView 呈現多層目錄、GridView 列出檔案清單、權限視覺化。

專案建立步驟

1. Visual Studio → 新增專案 → ASP.NET Web 應用程式，位置 https://localhost/WebDisk。
2. 方案總管 → 加入新項目 → Web Form 命名 NetWorkDisk.aspx。
3. 加入 App_Themes、App_Code、Images 等資料夾。

主介面版面規劃

• 左側：TreeView 顯示資料夾樹，支援展開/摺疊、右鍵選單 (新增/重命名/刪除)。
• 中上：工具列 (上傳、下載、新增資料夾、刷新)。
• 中下：GridView 列出目前資料夾檔案，欄位含類型、名稱、大小、修改時間、操作 (下載/刪除)。
• 右側：資訊面板 (空間使用量、權限說明)。

TreeView 動態繫結多層目錄

private void BindFolderTree(string rootPath, TreeNode parentNode)
{
    foreach (string dir in Directory.GetDirectories(rootPath))
    {
        TreeNode node = new TreeNode(Path.GetFileName(dir), dir);
        node.PopulateOnDemand = true; // 延遲載入子節點
        if (parentNode == null) TreeView1.Nodes.Add(node);
        else parentNode.ChildNodes.Add(node);
    }
}

protected void TreeView1_TreeNodePopulate(object sender, TreeNodeEventArgs e)
{
    BindFolderTree(e.Node.Value, e.Node);
    e.Node.PopulateOnDemand = false;
}

GridView 列出檔案與權限圖示

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        FileInfo fi = (FileInfo)e.Row.DataItem;
        // 類型圖示
        Image img = (Image)e.Row.FindControl("imgType");
        img.ImageUrl = GetFileIcon(fi.Extension);
        // 權限圖示
        Image imgLock = (Image)e.Row.FindControl("imgLock");
        imgLock.Visible = IsFolderLocked(fi.DirectoryName);
        imgLock.ToolTip = "此資料夾已設密碼保護";
    }
}

安全性考量

• 所有路徑參數經 Server.MapPath 轉換，防止目錄遍歷攻擊 (../../)。
• 檔案上傳驗證副檔名、MIME、大小；儲存路徑隨機化，避免覆蓋。
• 下載使用 Response.TransmitFile，支援大檔案不佔記憶體。