使用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);
}
{
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);
}
运行效果: