ASP.NET 自訂 Web 控制項開發實戰：使用 C# 建立可重用、預編譯的導航列元件

為什麼選擇 C# Web 控制項而非 User Control (.ascx)？

專案結構

MyNavBar.sln
├── MyNavBar (類別庫專案)
│   ├── NavBar.cs          // 核心控制項類別
│   └── Properties/AssemblyInfo.cs
└── WebApplication (測試網站)
    ├── Default.aspx
    └── bin/MyNavBar.dll   // 參考輸出

核心控制項實作：NavBar.cs

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections.Generic;

namespace MyNavBar
{
    /// 

    /// 動態產生 Yahoo 風格麵包屑導航列
    /// 
    [ToolboxData("<{0}:NavBar runat=server>")]
    public class NavBar : WebControl
    {
        // === 可自訂屬性 ===
        private string _separator = ">";
        private int _leftPadding = 1;
        private int _rightPadding = 3;

        /// 
分隔符號 HTML
        [Category("Appearance")]
        [DefaultValue(">")]
        public string Separator
        {
            get => _separator;
            set => _separator = value ?? ">";
        }

        /// 
分隔符號左側空白數
        [Category("Appearance")]
        [DefaultValue(1)]
        public int LeftPadding
        {
            get => _leftPadding;
            set => _leftPadding = Math.Max(0, value);
        }

        /// 
分隔符號右側空白數
        [Category("Appearance")]
        [DefaultValue(3)]
        public int RightPadding
        {
            get => _rightPadding;
            set => _rightPadding = Math.Max(0, value);
        }

        // === 核心邏輯：建立子控制項 ===
        protected override void CreateChildControls()
        {
            Controls.Clear(); // 確保重新建立時不重複

            // 1. 建立分隔符號標籤 (共用實例)
            var separatorLabel = new Label
            {
                Text = new string(' ', _leftPadding) + _separator + new string(' ', _rightPadding)
            };

            // 2. 首頁連結 (固定)
            var homeLink = new HyperLink
            {
                Text = "Home",
                NavigateUrl = "~/"
            };
            Controls.Add(homeLink);

            // 3. 解析目前請求路徑，動態產生中間層級連結
            string[] pathSegments = Page.Request.Path.Split('/');
            // 範例：/folder1/folder2/page.aspx → ["", "folder1", "folder2", "page.aspx"]
            
            string accumulatedPath = "";
            for (int i = 1; i < pathSegments.Length - 1; i++) // 排除首個空字串與檔名
            {
                string segment = pathSegments[i];
                accumulatedPath += "/" + segment;

                // 加入分隔符號
                Controls.Add(new Label { Text = separatorLabel.Text });

                // 加入層級連結
                var link = new HyperLink
                {
                    Text = CapitalizeFirst(segment),
                    NavigateUrl = accumulatedPath + "/" // 目錄需以 / 結尾，依賴 IIS 預設文件
                };
                Controls.Add(link);
            }

            // 4. 最後一層：目前頁面標題 (非連結)
            if (pathSegments.Length > 1)
            {
                Controls.Add(new Label { Text = separatorLabel.Text });
                string pageName = pathSegments[pathSegments.Length - 1];
                // 移除副檔名
                int dotIndex = pageName.LastIndexOf('.');
                if (dotIndex > 0) pageName = pageName.Substring(0, dotIndex);
                Controls.Add(new Label 
                { 
                    Text = CapitalizeFirst(pageName),
                    CssClass = "current-page"
                });
            }
        }

        private static string CapitalizeFirst(string input)
        {
            if (string.IsNullOrEmpty(input)) return input;
            return char.ToUpper(input[0]) + input.Substring(1).ToLower();
        }

        // === 渲染輸出 ===
        protected override void Render(HtmlTextWriter writer)
        {
            // 確保子控制項已建立
            EnsureChildControls();
            
            // 包裝容器 (可選)
            writer.AddAttribute(HtmlTextWriterAttribute.Class, "navbar-container");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            
            base.Render(writer); // 渲染所有子控制項
            
            writer.RenderEndTag(); //