先建立一個名為menu的xml檔案,內容如下:
<?xml version="1.0" encoding="utf-8" ?> <menu> <menuItem url="~/Default.aspx" title="首頁" description=""/> <menuItem url="~/News.aspx" title="新聞" description=""> <menuItem url="~/News.aspx" title="國內新聞" description=""/> <menuItem url="~/News.aspx" title="國際新聞" description=""/> </menuItem> </menu>
然後在頁面上拖放一個menu控制項,並拖放一個XmlDataSource控制項,id為XmlDataSource1,將menu的 DataSourceID設定為XmlDataSource1。 配置XmlDataSource控制項,使DataFile="~/Menu.xml" XPath="menu/menuItem",這裡採用xpath來選取資料,即將menuItem的資料篩選出來。 此時,再綁定menu控制項的資料,告訴menu控制項該怎麼顯示從xml檔案篩選出來的資料。選中menu控制項,在屬性視窗選取DataBindings,在彈出的對話方塊裡,在左上方的列表中選中menuItem,單擊添加按鈕將menuItem添加到左下的列表中,再在此列表中選擇menuItem,此是右邊的列表將顯示要綁定的屬性,使NavigateUrlField="url" TextField="title"。按確定按鈕返回設計介面,此時就會顯示出"首頁"和"新聞"兩個功能表項目。 設計html代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CoAffiliate._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Menu ID="Menu1" runat="server" DataSourceID="XmlDataSource1" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False"> <DataBindings> <asp:MenuItemBinding DataMember="menuItem" NavigateUrlField="url" TextField="title" /> </DataBindings> </asp:Menu> <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Menu.xml" XPath="menu/menuItem"></asp:XmlDataSource> </div> </form> </body> </html>