C# 打造類 QQ 側邊欄導航：從資料庫動態生成 Outlook 風格選單

專案背景與架構概覽

早期 WinForms / WebForms 專案常需實作類似 QQ 或 Outlook 的左側摺疊導航列。本文展示一套完整方案：後端 C# 從資料庫讀取選單結構，前端 JavaScript 動態渲染可摺疊動畫面板，支援多層級選單、平滑展開/收合動畫與 iframe 內容載入。

資料庫結構：PowerSetting 表

單一資料表支援無限層級（此處示範兩層）：

CREATE TABLE [dbo].[PowerSetting] (
    [PowerSettingID] INT IDENTITY(1,1) PRIMARY KEY,
    [ParentID]       INT NOT NULL,           -- 父節點 ID，根節點 ParentID = 0
    [Description]    NVARCHAR(255) NULL,     -- 選單顯示文字
    [Icon]           NVARCHAR(50) NULL,      -- 圖示路徑（擴充用）
    [Url]            NVARCHAR(255) NULL,     -- 目標連結
    [Target]         NVARCHAR(50) NULL,      -- _self / _blank / iframe 名稱
    [CreateByID]     NVARCHAR(50) NULL,
    [CreateON]       DATETIME NULL,
    [IsEnabled]      BIT NULL,
    [IsBoot]         INT NULL                -- 0=根節點(大標題), 1=子節點(功能項目)
);

後端 C#：遞迴生成 JavaScript 選單腳本

VerticalMenu.aspx.cs 核心邏輯：查詢根節點 → 迴圈查詢子節點 → 拼裝 outlookbar.addtitle() 與 outlookbar.additem() 呼叫字串：

public partial class VerticalMenu : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e) { }

    public static string ConnectionString = ConfigurationManager.AppSettings["ConnectionString"];

    public static DataSet GetDataSet(string sql)
    {
        using (var sda = new SqlDataAdapter(sql, ConnectionString))
        {
            var ds = new DataSet();
            sda.Fill(ds);
            return ds;
        }
    }

    protected string LoadVerticalMenu()
    {
        string sqlFather = "SELECT * FROM PowerSetting";
        DataSet ds = GetDataSet(sqlFather);
        var fathers = ds.Tables[0].Select("IsBoot=0", "IsBoot"); // 根節點
        var sb = new System.Text.StringBuilder();

        foreach (DataRow drFather in fathers)
        {
            string title = drFather["Description"].ToString();
            sb.Append($"var t; t=outlookbar.addtitle('{title}');");

            var children = ds.Tables[0].Select($"ParentID={Convert.ToInt32(drFather["PowerSettingID"])} AND IsBoot=1");
            foreach (DataRow drChild in children)
            {
                string childTitle = drChild["Description"].ToString();
                string url = drChild["Url"].ToString();
                sb.Append($"outlookbar.additem('{childTitle}', t, '{url}');");
            }
        }
        return sb.ToString();
    }
}

前端 JavaScript：OutlookBar 核心類別與動畫引擎

VerticalMenu.aspx 內嵌完整的 outlook 類別，關鍵功能：

• 資料模型： titlelist[] 儲存大標題，itemlist[][] 儲存對應子項目。
• 動畫引擎： smoothout() 使用 setTimeout 漸變 height 百分比，實現平滑展開/收合（inc=10%, timedelay=50ms）。
• 狀態持久化： opentitle 記錄目前展開面板，支援 locatefold() 指定預設展開項。
• iframe 整合： 子項目點擊時呼叫 url(id) 設定 document.getElementById('fMain').src，無需重新整理整頁。

前端 HTML 結構與初始化

<table id="mnuList" style="width:150px;height:100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td id="outLookBarShow" bgcolor="#F0F0E5" valign="top" align="center" style="height:100%">
      <script language="JavaScript">
        <%=LoadVerticalMenu()%>  <!-- 後端注入選單資料 -->
        locatefold("");           <!-- 預設展開第一組 -->
        outlookbar.show();        <!-- 渲染完整選單 HTML -->
      </script>
    </td>
  </tr>
</table>
<iframe id="fMain" name="fMain" src="Default.aspx" frameborder="0" style="width:100%;height:100%"></iframe>

現代化改造建議

1. 前後端分離： 改為 Web API 回傳 JSON，前端使用 Vue/React/Angular 或原生 JS 模板渲染。
2. CSS 動畫替代 JS 動畫： 使用 max-height + transition 實現更流暢、GPU 加速的摺疊效果。
3. 無障礙支援： 加入 aria-expanded、鍵盤導航（Enter/Space 展開、ArrowUp/Down 選項）。
4. 資料快取： 選單結構變動較少，建議加入 MemoryCache 或 Redis 減少資料庫查詢。

結語

此方案展示了經典 ASP.NET WebForms 時代「伺服器端資料綁定 + 客戶端豐富互動」的典型模式。雖然技術棧已演進，但其資料驅動選單、狀態機管理動畫、iframe 區塊載入的核心思想，在現代 SPA 架構中依然適用，值得參考移植。