使用RadControls的RadMenu控件开发系统菜单

全栈程序员站长

发布于 2022-09-15 17:12:59

6960

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

关于菜单这个话题我想应该是不讲则懂，所以本文不会多讲这些概念，则重关注RadControls控件中的RadMenu控件的使用，结合数据库来开发一个系统菜单。

一、数据库设计

这里我就使用Access作为示例数据库,详细见下图：

表字段依次为：自动编号、菜单编码、菜单名称、请求地址、菜单上显示的图片地址、快捷键(RadMenu控件支持)、菜单顺序、菜单级限、是否为末级和父菜单编码。整个设计中主要以菜单编码作为关联依据。

二、注册控件及使用控件皮肤

我们可以将控件添加到工具箱直接拖拽到aspx页面上就OK，随后可以在html视图下看到如下注册命令：

<!– Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ –> 1 <% @RegisterAssembly = “ RadMenu.Net2 “ Namespace = “ Telerik.WebControls “ TagPrefix = “ rad “ %>

要使用RadControls提供的皮肤功能很方便，从安装目录下将皮肤文件复制到项目中，然后在控件上直接选择所需要的皮肤就OK。下图为RadMenu选择皮肤截图：

三、编码实现读取数据

示例使用Access数据库，简单配置了几条数据，通过ADO.NET读出来这个很简单，这里就不多说。菜单下的子菜单，以及下一级子菜单，凡是菜单都有可能会有这种情况，这里递归生成就OK。相关代码如下：

<!– Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ –> 1 namespace MenuDome 2 { 3 public class Menu 4 { 5 private static string connectionString = “ Provider=Microsoft.jet.OLEDB.4.0;dataSource= “ 6 + HttpContext.Current.Server.MapPath( @” App_Data/MenuDB.mdb “ ); 7 8 private DataTableExecuteQuery( string cmdText) 9 { 10 using (OleDbConnectionconn = new OleDbConnection(connectionString)) 11 { 12 using (OleDbDataAdapteroda = new OleDbDataAdapter(cmdText,conn)) 13 { 14 DataSetds = new DataSet(); 15 oda.Fill(ds); 16 return ds.Tables[ 0 ]; 17 } 18 } 19 } 20 21 public DataTableGetMenu() 22 { 23 string sql = “ select*frommenuwheregrade=0 “ ; 24 return ExecuteQuery(sql); 25 } 26 27 public DataTableGetMenuBySupCode( string supMenuCode) 28 { 29 string sql = “ select*frommenuwheresupmenucode=’ “ + supMenuCode + “ ‘ “ ; 30 return ExecuteQuery(sql); 31 } 32 } 33 }

四、生成菜单项的准备

菜单一般都是公用的（不考虑用户权限相关的控制），我们可以把它开发成为一个公共的部分。本示例使用母版页来做菜单，新建母版页：

在此母版页里加入RadMenu控件，并设置相应的皮肤就OK。如下代码块：

<!– Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ –> 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 >

五、根据数据库数据生成菜单项

现在就差最后一步了，根据数据库里读取的数据生成菜单项。由于菜单下会有子菜单情况，示例中将菜单项生成分两步来处理，详细见如下代码：

<!– Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ –> 1

private void InitMenu() 2

{ 3

//查询出菜单配置信息 4

DataTabledtMenu=menu.GetMenu(); 5

for(inti=0;i<dtMenu.Rows.Count;i++) 7

{ 8

//Rad菜单项 9

RadMenuItemitem=newRadMenuItem(); 10

item.ID=dtMenu.Rows[i][“Code“].ToString(); 12

item.Text=dtMenu.Rows[i][“Name“].ToString(); 13

item.Value=dtMenu.Rows[i][“Url“].ToString(); 14

item.AccessKey=dtMenu.Rows[i][“ShortCut“].ToString(); 15

this.SystemMenu.Items.Add(item); 17

//菜建子菜单 19

InitSubMenu(item,dtMenu.Rows[i][“Code“].ToString()); 20

} 21

}

除了上面的方法，还有一个构建子菜单的方法InitSubMenu()，如下代码块：

<!– Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ –> 1 private void InitSubMenu(RadMenuItemitem, string supMenuCode) 2 { 3 DataTabledtMenu = menu.GetMenuBySupCode(supMenuCode); 4 5 if (dtMenu != null ) 6 { 7 foreach (DataRowdataRow in dtMenu.Rows) 8 { 9 RadMenuItemsubItem = 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，下面是此三种皮肤的运行截图：