關于菜單這個話題我想應該是不講則懂,所以本文不會多講這些概念,則重關注RadControls控件中的RadMenu控件的使用,結合數據庫來開發一個系統菜單。
一、數據庫設計
這里我就使用Access作為示例數據庫,詳細見下圖:

表字段依次為:自動編號、菜單編碼、菜單名稱、請求地址、菜單上顯示的圖片地址、快捷鍵(RadMenu控件支持)、菜單順序、菜單級限、是否為末級和父菜單編碼。 整個設計中主要以菜單編碼作為關聯依據。
二、注冊控件及使用控件皮膚
我們可以將控件添加到工具箱直接拖拽到aspx頁面上就OK,隨后可以在html視圖下看到如下注冊命令:
1 <%@ Register Assembly="RadMenu.Net2"
Namespace="Telerik.WebControls" TagPrefix="rad" %>
要使用RadControls提供的皮膚功能很方便,從安裝目錄下將皮膚文件復制到項目中,然后在控件上直接選擇所需要的皮膚就OK。下圖為RadMenu選擇皮膚截圖:
三、編碼實現讀取數據
示例使用Access數據庫,簡單配置了幾條數據,通過ADO.NET讀出來這個很簡單,這里就不多說。菜單下的子菜單,以及下一級子菜單,凡是菜單都有可能會有這種情況,這里遞歸生成就OK。相關代碼如下:
1 namespace MenuDome
2 {
3 public class Menu
4 {
5 private static string connectionString = "Provider=
Microsoft.jet.OLEDB.4.0;data Source="
6 + HttpContext.Current.Server.MapPath(@"App_Data\MenuDB.mdb");
7
8 private DataTable ExecuteQuery(string cmdText)
9 {
10 using (OleDbConnection conn =
new OleDbConnection(connectionString))
11 {
12 using (OleDbDataAdapter oda =
new OleDbDataAdapter(cmdText, conn))
13 {
14 DataSet ds = new DataSet();
15 oda.Fill(ds);
16 return ds.Tables[0];
17 }
18 }
19 }
20
21 public DataTable GetMenu()
22 {
23 string sql = "select * from menu where grade=0";
24 return ExecuteQuery(sql);
25 }
26
27 public DataTable GetMenuBySupCode(string supMenuCode)
28 {
29 string sql = "select * from menu where supmenucode=
'" + supMenuCode + "'";
30 return ExecuteQuery(sql);
31 }
32 }
33 }
四、生成菜單項的準備
菜單一般都是公用的(不考慮用戶權限相關的控制),我們可以把它開發成為一個公共的部分。本示例使用母版頁來做菜單,新建母版頁:

在此母版頁里加入RadMenu控件,并設置相應的皮膚就OK。如下代碼塊:
1 <body>
2 <form id="form1" runat="server">
3
4 <%--菜單開始--%>
5 <rad:RadMenu ID="SystemMenu" runat="server" Skin="Web20">
6 </rad:RadMenu>
7 <%--菜單結束--%>
8
9 <%--內容開始--%>
10 <asp:ContentPlaceHolder ID="CPH" runat="server">
11
12 </asp:ContentPlaceHolder>
13 <%--內容結束--%>
14
15 </form>
16 </body>
五、根據數據庫數據生成菜單項
現在就差最后一步了,根據數據庫里讀取的數據生成菜單項。由于菜單下會有子菜單情況,示例中將菜單項生成分兩步來處理,詳細見如下代碼:
除了上面的方法,還有一個構建子菜單的方法InitSubMenu(),如下代碼塊:
1 private void InitSubMenu(RadMenuItem item, string supMenuCode)
2 {
3 DataTable dtMenu = menu.GetMenuBySupCode(supMenuCode);
4
5 if (dtMenu != null)
6 {
7 foreach (DataRow dataRow in dtMenu.Rows)
8 {
9 RadMenuItem subItem = new RadMenuItem();
10
11 subItem.ID = dataRow["ID"].ToString();
12 subItem.Text = dataRow["Name"].ToString();
13 subItem.Value = dataRow["Url"].ToString();
14 subItem.AccessKey = dataRow["ShortCut"].ToString();
15
16 item.Items.Add(subItem);
17
18 if (Convert.ToInt32(dataRow["EndGrade"]) != 1)
19 {
20 InitSubMenu(subItem, Convert.ToString(dataRow["Code"]));
21 }
22 }
23 }
24 }
六、展現RadMenu風采
通過上面一步步的開發,現在終于可以一覽RadMenu的風采了。通過上面建立的母版頁建立一內容頁,直接運行內容頁就可以看到效果了。示例中我使用了三種皮膚:Web2.0,WebBlue和Vista,下面是此三種皮膚的運行截圖:



七、其他
出了皮膚是一大特色外,RadMenu還提供了很多客戶端事件,我們利用這些API可以很方便在在客戶端通過JavaScript動態的來創建、添加、刪除菜單項,如下屬性截圖:

尤其是在AJAX普遍使用的今天,無刷新的應用開發越來越普遍,RadMenu為我們提供了比較完美的菜單解決方案。
標簽:
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:網絡轉載