使用CSS+SiteMap+UserControl+MasterPage實現簡易的Tab

我們在做網站後台管理的時候，往往需要用到Tab形式的導覽功能表，部落格園如此，BlogEngine也如此，前段時間研究修改BlogEngine的時候看到其Tab實現如此容易，思路不錯，但是有一點使我鬱悶，他的Tab標題是取檔案名稱，而使用中文的檔案名稱是寫程式的大忌，自然就想到了Asp.Net2.0的特性Web.sitemap，我們的資料來源如何不從它來，於是簡單寫了下，其實很簡單，只需要一個樣式檔案，一個SiteMap,一個通用的UserControl，一個主版頁面。

 

下面是核心Code）

protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsCallback)
            {
                BindMenu();
            }
        }
    
        /// <summary>
        /// Binds the menu.
        /// </summary>
        private void BindMenu()
        {
            SiteMapNodeCollection smnc = SiteMap.CurrentNode.ParentNode.ChildNodes;

            foreach (SiteMapNode smn in smnc)
            {
                AddItem(smn.Title, smn.Url);
            }
        }

        /// <summary>
        /// Adds the item.
        /// </summary>
        /// <param name="text">The text.</param>
        /// <param name="url">The URL.</param>
        public void AddItem(string text, string url)
        {
            HtmlAnchor a = new HtmlAnchor();
            a.InnerHtml = "<span>" + text + "</span>";
            a.HRef = url;

            if (Request.RawUrl.EndsWith(url, StringComparison.OrdinalIgnoreCase))
                a.Attributes["class"] = "current";

            HtmlGenericControl li = new HtmlGenericControl("li");
            li.Controls.Add(a);
            ulMenu.Controls.Add(li);
        }

運行效果：

源碼下載：web projectTab.zip
          web site Tab.rar