Menu 菜單控件可以建立水平或垂直方向的菜單。<asp:Menu>控件非常容易使用與調整。可以使用 MenuItem 控件來建立靜態菜單，或是從 SiteMapDataSource 數據源控件建立動態菜單。Menu 菜單控件有80個公有屬性(包括所有控件都擁有的***同屬性)。Menu控件的常用屬性如表7-4所示。
表7-4 Menu 控件的常用屬性
屬 性 屬 性 描 述
CssClass 允許設置壹個應用到整個控件的CSS類屬性
StaticDisplayLevels 顯示幾層靜態菜單，超過就成為動態菜單
Orientation 菜單方向是默認垂直 Vertical，或水平 Horizontal
StaticMenuStyle 靜態菜單的樣式
StaticHoverStyle 當鼠標移至靜態菜單的選項上時，顯示的樣式
StaticMenuItemStyle 靜態菜單的選項樣式
DynamicMenuStyle 動態菜單的樣式
DynamicMenuItemStyle 動態菜單的選項樣式
DynamicHoverStyle 當鼠標移至動態菜單的選項上時，顯示的樣式
MaximumDynamicDisplayLevels 確定控件能顯示的子菜單項的級數。
有助於非常大的站點地圖限制發送給瀏覽器的項數
Menu控件包含幾個以Static或Dynamic開頭的特性。Static特性用來控制加載頁面時出現的主菜單項。因為把鼠標懸停在它們上面時它們不會改變或隱藏，所以認為它們是靜態的。子菜單是動態的，因為只有當激活相關主菜單項時它們才會出現。
1. 靜態菜單
Menu控件可以使用MenuItem控件定義菜單數據來建立靜態菜單。下面舉例說明在VWD2008中創建靜態菜單的方法。
例7-7利用Menu控件在網頁中添加壹個菜單，實現自定義導航功能。
(1) 新建壹個Web站點Ex7_7。
(2) 在解決方案資源管理器中，添加Web窗體頁Program.aspx、Csharp.aspx、JAVA.aspx、VB.aspx。
(3) 在Default.aspx中，切換到設計視圖，向其中添加壹個Menu控件。並設置其Orientation屬性為Horizontal。
(4) 在Default.aspx中選擇Menu1控件，在屬性窗體中找到Items選項，單擊其右邊的…按鈕打開菜單項編輯器對話框，在其中菜單項並設置其相應屬性。如圖7-6所示。
（）圖7-6 菜單項編輯器對話框
(5) 菜單項設置完畢，單擊確定按鈕。這時在源窗口中可以看到VWD 2008自動生成如下代碼：
1. <asp:Menu ID="Menu1" runat="server" Font-Italic
="False" ForeColor="Fuchsia"
2. Orientation="Horizontal" StaticDisplayLevels="1">
3. <Items>
4. <asp:MenuItem NavigateUrl="~/Default.aspx"
Text="首頁" Value="首頁"></asp:MenuItem>
5. <asp:MenuItem NavigateUrl="~/Program.aspx"
Text="程序設計語言" Value="程序設計語言"/>
6. <asp:MenuItem NavigateUrl="~/Csharp.aspx"
Text="Visual C#" Value="Visual C#" />
7. <asp:MenuItem NavigateUrl="~/VB.aspx"
Text="VB.NET" Value="VB.NET"> </asp:MenuItem>
8. <asp:MenuItem NavigateUrl="~/JAVA.aspx"
Text="JAVA" Value="JAVA"></asp:MenuItem>
9. <asp:MenuItem Text="新聞" Value="新聞"></asp:MenuItem>
10. </Items>
11. </asp:Menu>
上述 MenuItem 控件標記是定義在 <Items> 區段，可以定義菜單的選項，Text屬性是菜單項名稱，或是使用ImageUrl屬性指定菜單項圖片，NavigateUrl屬性是菜單連接的URL網址。
(6) 切換到Default.aspx中，按Ctrl+F5鍵，在瀏覽器中執行程序，查看執行結果。
7.3.3 利用Menu控件實現自定義導航（2）
2. 從SiteMapDataSource控件獲取菜單數據
Menu 控件的菜單數據源如果是 SiteMapDataSource 數據源控件，在 ASP.NET 程序中需要創建此控件，如下所示：
1. <asp:SiteMapDataSource Id="sitemap" Runat="server"/>
上述標記建立名為 sitemap 的 SiteMapDataSource 數據源控件，在Menu控件中是使用 DataSourceID 屬性來指定數據源，如下所示。
1. <asp:Menu id="Menu1" Runat="Server"
2. StaticDisplayLevels="2" DataSourceID="sitemap"
3. StaticMenuItemStyle-VerticalPadding="3"
4. …
5. DynamicHoverStyle-ForeColor="black"/>
例7-8演示從SiteMapDataSource控件獲取菜單數據方法。
(1) 復制Web站點Ex7_6，修改其名稱為Ex7_8。
(2) 在VWD 2008中打開Ex7_8。
(3) 在解決方案資源管理器雙擊Default.aspx，從工具箱的導航類別中，拖動壹個Menu控件放到DIV標記之間。生成的代碼如下所示：
1. <asp:Menu ID="Menu1" runat="server"> </asp:Menu>
(4) 切換到設計視圖。單擊Menu控件的智能標記(灰色右箭頭)打開Menu任務快捷菜單。在選擇數據源下拉列表中選擇<新建數據源>。在出現的數據源配置向導對話框中單擊站點地圖圖標。如圖7-7所示。
(5) 單擊確定按鈕關閉對話框。
(6) 當返回頁面時，Menu控件現在顯示了頂級元素主頁(如圖7-8所示)。這時，可以看到VWD 2008在源視圖窗口中自動添加了SiteMapDataSource控件，同時給Menu控件添加了DataSourceID="SiteMapDataSource1"的屬性值。生成的代碼如下所示：
（）圖7-7 數據源配置向導對話框
（）圖7-8 添加了SiteMapDataSource控件後顯示的結果
1. <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
2. </asp:Menu>
3. <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
(7) 再單擊壹次SiteMapDataSource，然後按F4鍵打開或激活屬性窗口。將Show StartingNote屬性的值由True改為False。註意，壹旦這樣做後，設計器中的Menu控件就會更新，並顯示根元素下的所有直接子菜單。
(8) 再次單擊Menu控件，然後用屬性窗口對控件的屬性作下列修改，如表7-5所示。
表7-5 Menu控件屬性的設置
特 性 值
StaticEnableDefaultPopOutImage False
Orientation Horizontal
ItemSpacing(需要展開的StaticMenuItemStyle的子特性) 10px
(9) 按Ctrl+F5鍵，在瀏覽器中打開頁面。當把鼠標放在計算機類主菜單時，會自動顯示其下拉菜單，選擇硬件命令，執行結果如圖7-9所示。
22.3 實現Menu控件的導航
Menu控件是壹個頁面上使用的菜單。該控件有靜態模式和動態模式兩種顯示模式，靜態模式的菜單項始終是完全展開的，在這種模式下，設置StaticDisplayLevels屬性指定顯示菜單的級別，如果菜單的級別超過了StaticDisplayLevels屬性指定的值，則把超過的級別自動設置為動態模式顯示。動態模式需要響應用戶的鼠標事件才在父節點上顯示子菜單項，MaximumDynamicDisplayLevels屬性指定動態菜單的顯示級別，如果菜單的級別超過了該屬性指定的值，則不顯示超過的級別。
Menu控件最簡單的用法是在設計視圖中使用Items屬性添加MenuItem對象的集合。MenuItem對象有壹個NavigateUrl屬性，如果設置了該屬性，單擊菜單項後將導航到指定的頁面，可以使用Menu控件的Target屬性指定打開頁的位置，MenuItem對象也有壹個Target屬性，可以單獨指定打開頁面的位置。如果沒有設置NavigateUrl屬性，則把頁面提交到服務器進行處理。本示例將演示如何使用Menu控件實現導航。
技術要點
使用Menu控件實現導航的技術要點如下。
MenuItem對象表示菜單的壹項通過該對象的屬性可以設置菜單的內容和導航方式。
Menu控件的項可以使用設計器和編程兩種方法添加。
StaticDisplayLevels屬性指定靜態菜單的顯示級別。
實現步驟
（1）在VS2008中創建壹個ASP.NET網站，命名為“MenuSample”。
（2）添加壹個頁面，命名為“Menu.aspx”，並把這個頁設置為起始頁。
（3）從工具箱選擇Menu控件設計頁面，並在窗口的Items屬性中打開編輯菜單項的界面，添加“系統操作”和“幫助”兩個根菜單項，如圖22.3所示。
（）圖22.3 添加根菜單項
（4）在首次加載頁面時，用編程的方式，指定Menu控件的壹些屬性，並為兩個根菜單項添加子菜單。代碼如下所示。
<%@ Page Language="C#" AutoEventWireup="true" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.Menu1.Orientation = Orientation.Horizontal;//設置菜單水平顯示
this.Menu1.StaticDisplayLevels = 1;//只顯示第壹級菜單
this.Menu1.Target = "_blank";//指定在新的窗口打開頁面
MenuItem register = new MenuItem();//定義子菜單
register.Text = "註冊用戶";
register.NavigateUrl = "~/register.aspx";
this.Menu1.Items[0].ChildItems.Add(register);//添加子菜單
MenuItem Login = new MenuItem();
Login.Text = "登錄";
Login.NavigateUrl = "~/Login.aspx";
this.Menu1.Items[0].ChildItems.Add(Login);
MenuItem help = new MenuItem();//定義第二項菜單的子菜單
help.Text = "幫助";
help.NavigateUrl = "~/help.aspx";
this.Menu1.Items[1].ChildItems.Add(help);
MenuItem About = new MenuItem();
About.Text = "關於";
About.NavigateUrl = "~/About.aspx";
this.Menu1.Items[1].ChildItems.Add(About);
}
}
</script>
<html xmlns="的導航控件中,我用的最多的是TreeView控件,今天無意間用到了menu控件,感覺挺好的.寫出來當作筆記吧!
前臺代碼:
<asp:Menu ID="Menu1" runat="server" BackColor="#FFFBD6" DynamicHorizontalOffset="2"
ForeColor="#990000" Height="187px" Orientation="Horizontal" StaticSubMenuIndent="10px"
Style="font-size: 8pt; font-family: Verdana; display: block; background-position-x: center; background-attachment: scroll; background-image: url(img/Alter.jpg); visibility: visible; color: #ff3399; background-repeat: repeat-x; position: static; background-color: #99ff00; text-align: center;" Font-Names="Verdana" Font-Size="0.8em" Width="594px" OnMenuItemClick="Menu1_MenuItemClick">
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#990000" ForeColor="White" />
<DynamicMenuStyle BackColor="#FFFBD6" BorderColor="White" BorderStyle="Solid" BorderWidth="1px" />
<StaticSelectedStyle BackColor="#FFCC66" />
<DynamicSelectedStyle BackColor="#FFCC66" />
<StaticHoverStyle BackColor="#990000" ForeColor="White" />
<DynamicMenuItemStyle BackColor="#B5C7DE" Font-Names="Verdana" Font-Size="8pt" BorderColor="White" BorderStyle="Solid" BorderWidth="1px" HorizontalPadding="5px" VerticalPadding="2px" />
</asp:Menu>
後臺代碼:
#region 頁面初始化
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
PR.BLL.menu.A_Menu bll = new PR.BLL.menu.A_Menu();
DataSet ds = bll.GetList();
CreateMenu(1, (MenuItem)null, ds);
}
}
#endregion
#region 遞歸生成橫向菜單
public void CreateMenu(int ParentID, MenuItem tempItem, DataSet ds)
{
DataView dvMenu = new DataView(ds.Tables[0]);
//過濾ParentID,得到當前菜單的所有子節點
dvMenu.RowFilter = "[MenuParentId] = " + ParentID;
foreach (DataRowView Row in dvMenu)
{
if (tempItem == null)
{ //添加根節點
MenuItem Node = new MenuItem();
//節點的文本
Node.Text = Row["FMenuName"].ToString();
//節點旁邊的圖片
// Node.ImageUrl = "img/" + Row["MenuImage"].ToString();
//有子菜單時的圖片
//Node.PopOutImageUrl = "img/02.gif";
this.Menu1.Items.Add(Node);
CreateMenu(Int32.Parse(Row["Fid"].ToString()), Node, ds);//再次遞歸
}
else
{ //添加當前節點的子節點
MenuItem Node = new MenuItem();
Node.Text = Row["FMenuName"].ToString();
//點擊節點後的連接地址
Node.NavigateUrl = Row["Url"].ToString();
//Node.ImageUrl = "Image/" + Row["MenuImage"].ToString();
//Node.Target = Row["left"].ToString();
tempItem.ChildItems.Add(Node);
CreateMenu(Int32.Parse(Row["Fid"].ToString()), Node, ds); //再次遞歸
}
}
}
#endregion