快捷導(dǎo)航

Asp.net 菜單控件簡(jiǎn)潔版

更新時(shí)間：2009年11月11日 00:29:18 作者：

asp.net自帶的菜單控件采用的table和javascript，導(dǎo)致生成的大量的html,同時(shí)在很多瀏覽器中都無(wú)法顯示出子菜單，也只能在IE中能顯示出來(lái)。

本文介紹的菜單控件采用的css 和ul list來(lái)顯示菜單，生成的html小，無(wú)需javascript支持，對(duì)大部分的瀏覽器都支持，除ie6要單獨(dú)修改css也可以使其支持。
通過(guò)本文可以了解asp.net 控件的開發(fā)，及Composite設(shè)計(jì)模式的實(shí)際運(yùn)用。
采用Composite設(shè)計(jì)模式設(shè)計(jì)菜單類：
MenuCompositeitem類

復(fù)制代碼代碼如下:

 
namespace Ruinet.Controls 
{ 
[Serializable()] 
public class MenuCompositeItem 
{ 
private List<MenuCompositeItem> _children = new List<MenuCompositeItem>(); 
private string _text; 
private string _link; 
private string _target; 
/// <summary> 
/// 菜單項(xiàng) 
/// </summary> 
/// <param name="text">菜單名</param> 
/// <param name="link">鏈接</param> 
public MenuCompositeItem(string text, string link) 
{ 
this._text = text; 
this._link = link; 
} 
/// <summary> 
/// 菜單項(xiàng) 
/// </summary> 
/// <param name="text">菜單名</param> 
/// <param name="link">鏈接</param> 
/// <param name="target">跳轉(zhuǎn)目標(biāo)</param> 
public MenuCompositeItem(string text, string link, string target) 
{ 
this._text = text; 
this._link = link; 
this._target = target; 
} 
/// <summary> 
/// 設(shè)置或獲取菜單名 
/// </summary> 
public string Text 
{ 
get { return _text; } 
set { _text = value; } 
} 
/// <summary> 
/// 設(shè)置或獲取鏈接 
/// </summary> 
public string Link 
{ 
get { return _link; } 
set { _link = value; } 
} 
/// <summary> 
/// 跳轉(zhuǎn)目標(biāo) 
/// </summary> 
public string Target 
{ 
get { return _target; } 
set { _target=value; } 
} 
/// <summary> 
/// 設(shè)置或獲取子菜單 
/// </summary> 
public List<MenuCompositeItem> Children 
{ 
get { return _children; } 
set { _children = value; } 
} 
} 

MenuComposite類

復(fù)制代碼代碼如下:

 
namespace Ruinet.Controls 
{ 
[DefaultProperty("Menu")] 
[ToolboxData("<{0}:MenuComposite runat=server></{0}:MenuComposite>")] 
public class MenuComposite : WebControl 
{ 
/// <summary> 
/// 設(shè)置獲取選擇的菜單 
/// </summary> 
[Bindable(true)] 
[DefaultValue("")] 
[Localizable(true)] 
public string SelectedMenuText 
{ 
get 
{ 
String s = (String)ViewState["SelectedMenuText"]; 
return ((s == null) ? String.Empty : s); 
} 
set 
{ 
ViewState["SelectedMenuText"] = value; 
} 
} 
/// <summary> 
/// 獲取和設(shè)置菜單項(xiàng)從ViewState 
/// </summary> 
[Bindable(true)] 
[DefaultValue(null)] 
[Localizable(true)] 
public MenuCompositeItem MenuItems 
{ 
get 
{ 
return ViewState["MenuItems"] as MenuCompositeItem; 
} 
set 
{ 
ViewState["MenuItems"] = value; 
} 
} 
/// <summary> 
/// 呈現(xiàn)菜單結(jié)構(gòu) 
/// </summary> 
/// <param name="output">HTML輸出流</param> 
protected override void RenderContents(HtmlTextWriter output) 
{ 
MenuCompositeItem root = this.MenuItems; 
output.Write(@"<div class=""navmenu"">"); 
output.Write(@" <ul>"); 
for (int i = 0; i < root.Children.Count; i++) 
{ 
RecursiveRender(output, root.Children[i]); 
} 
output.Write(@" </ul>"); 
output.Write(@"</div>"); 
} 
/// <summary> 
/// 遞歸輸出菜單項(xiàng) 
/// </summary> 
/// <param name="output">HTML輸出流</param> 
/// <param name="item">菜單項(xiàng).</param> 
/// <param name="depth">Indentation depth.</param> 
private void RecursiveRender(HtmlTextWriter output, MenuCompositeItem item) 
{ 
output.Write("<li>"); 
if (string.IsNullOrEmpty(item.Target))//為空不設(shè)置跳轉(zhuǎn)目標(biāo) 
{ 
output.Write(@"<a href=""" + item.Link + @""">"); 
} 
else 
{ 
output.Write(@"<a href=""" + item.Link + @""" target= """ + item.Target + @""">"); 
} 
if (item.Text == SelectedMenuText) //選中的菜單 
{ 
output.Write(@"<span class=""selected"">"); 
output.WriteLine(item.Text); 
output.WriteLine("</span>"); 
} 
else 
{ 
output.Write(item.Text); 
} 
output.Write("</a>"); 
if (item.Children.Count > 0) 
{ 
output.WriteLine(); 
output.Write("<ul>"); 
for (int i = 0; i < item.Children.Count; i++) 
{ 
RecursiveRender(output, item.Children[i]); 
} 
output.Write("</ul>"); 
} 
output.Write("</li>"); 
} 
} 
} 

在頁(yè)面中使用
添加對(duì)控件的引用后就可以直接在“工具箱”-》Controls組件中看到MenuComposite組件
再就可以像其他asp.net 控件一樣使用
使用：

復(fù)制代碼代碼如下:

 
MenuCompositeItem root = new MenuCompositeItem("root", null); 
MenuCompositeItem menu01 = new MenuCompositeItem("menu01", ResolveUrl("~/Default.aspx")); 
MenuCompositeItem menu02 = new MenuCompositeItem("menu02", ResolveUrl("~/Default.aspx")); 
MenuCompositeItem menu03 = new MenuCompositeItem("menu03", ResolveUrl("~/Default.aspx")); 
MenuCompositeItem menu04 = new MenuCompositeItem("menu04", ResolveUrl("~/Page04.aspx")); 
MenuCompositeItem menu05 = new MenuCompositeItem("menu05", ResolveUrl("~/Default.aspx")); 
MenuCompositeItem menu01_01 = new MenuCompositeItem("menu01-01", ResolveUrl("~/Default.aspx")); 
MenuCompositeItem menu01_02 = new MenuCompositeItem("menu01-02", ResolveUrl("~/Page01-02.aspx")); 
MenuCompositeItem menu01_03 = new MenuCompositeItem("menu01-03", ResolveUrl("~/Default.aspx")); 
MenuCompositeItem menu01_04 = new MenuCompositeItem("menu01-04", ResolveUrl("~/Default.aspx")); 
menu01.Children.Add(menu01_01); 
menu01.Children.Add(menu01_02); 
menu01.Children.Add(menu01_03); 
menu01.Children.Add(menu01_04); 

MenuCompositeItem menu02_01 = new MenuCompositeItem("menu02-01", ResolveUrl("~/Default.aspx")); 
MenuCompositeItem menu02_02 = new MenuCompositeItem("menu02-02", ResolveUrl("~/Default.aspx"), "menu02-02"); 
menu02.Children.Add(menu02_01); 
menu02.Children.Add(menu02_02); 

MenuCompositeItem menu04_01 = new MenuCompositeItem("menu04-01", ResolveUrl("~/Default.aspx")); 
MenuCompositeItem menu04_02 = new MenuCompositeItem("menu04-02", ResolveUrl("~/Page04-02.aspx"), "_blank"); 
menu04.Children.Add(menu04_01); 
menu04.Children.Add(menu04_02); 
root.Children.Add(menu01); 
root.Children.Add(menu02); 
root.Children.Add(menu03); 
root.Children.Add(menu04); 
root.Children.Add(menu05); 

TheMenuComposite.MenuItems = root;
此時(shí)生成的編譯運(yùn)行后會(huì)生成一個(gè)沒有樣式Ul list ,效果如下：

因此要生成可顯示和隱藏的菜單項(xiàng)，關(guān)鍵在css的設(shè)置上，開始時(shí)將二級(jí)子菜單設(shè)置為隱藏visibility: hidden;
同時(shí)定義li的hover事件，li:hover時(shí)：自菜單的 visibility要改為visible; 大致原理是這樣，當(dāng)然還有注意菜單項(xiàng)的位置
一級(jí)菜單float:left;使其能水平顯示。
CSS定義如下：

復(fù)制代碼代碼如下:

 
.navmenu * 
{ 
margin: 0; 
padding: 0; 
} 
.navmenu 
{ 
border: #000 1px solid; 
height: 25px; 
} 
.navmenu li 
{ 
/*水平菜單*/ 
float: left; 
list-style: none; 
position: relative; 
} 
.navmenu a 
{ 
display: block; 
font-size: 12px; 
height: 24px; 
width: 100px; 
line-height: 24px; 
background-color: #CDEB8B; 
color: #0000ff; 
text-decoration: none; 
text-align: center; 
border-left: #36393D 1px inset; 
border-right: #36393D 1px inset; 
border-bottom: #36393D 1px inset; 
} 
/*單獨(dú)設(shè)置一級(jí)菜單樣式*/ 
.navmenu > ul > li > a 
{ 
font-size: 11px; 
font-weight: bold; 
} 
.navmenu a:hover 
{ 
background: #369; 
color: #fff; 
} 
/*新增的二級(jí)菜單部分*/ 
.navmenu ul ul 
{ 
visibility: hidden; /*開始時(shí)是隱藏的*/ 
position: absolute; 
left: 0px; 
top: 24px; 
} 
.navmenu ul li:hover ul, .navmenu ul a:hover ul 
{ 
visibility: visible; 
} 
.navmenu ul ul li 
{ 
clear: both; /*垂直顯示*/ 
text-align: left; 
} 
/*選中菜單項(xiàng)*/ 
.navmenu .selected 
{ 
padding-left:15px; 
background-position-x:0px; 
background-image: url(./res/selected.gif); 
background-repeat: no-repeat; 
text-decoration:underline; 
} 