关于菜单这个话题我想应该是不讲则懂,所以本文不会多讲这些概念,则重关注RadControls控件中的RadMenu控件的使用,结合数据库来开发一个系统菜单。
一、数据库设计
这里我就使用Access作为示例数据库,详细见下图:
表字段依次为:自动编号、菜单编码、菜单名称、请求地址、菜单上显示的图片地址、快捷键(RadMenu控件支持)、菜单顺序、菜单级限、是否为末级和父菜单编码。 整个设计中主要以菜单编码作为关联依据。
二、注册控件及使用控件皮肤
我们可以将控件添加到工具箱直接拖拽到aspx页面上就OK,随后可以在html视图下看到如**册命令:
要使用RadControls提供的皮肤功能很方便,从安装目录下将皮肤文件复制到项目中,然后在控件上直接选择所需要的皮肤就OK。下图为RadMenu选择皮肤截图:
三、编码实现读取数据
示例使用Access数据库,简单配置了几条数据,通过ADO.NET读出来这个很简单,这里就不多说。菜单下的子菜单,以及下一级子菜单,凡是菜单都有可能会有这种情况,这里递归生成就OK。相关代码如下:
2{
3publicclassMenu
4{
5privatestaticstringconnectionString="Provider=Microsoft.jet.OLEDB.4.0;dataSource="
6+HttpContext.Current.Server.MapPath(@"App_Data/MenuDB.mdb");
7
8privateDataTableExecuteQuery(stringcmdText)
9{
10using(OleDbConnectionconn=newOleDbConnection(connectionString))
11{
12using(OleDbDataAdapteroda=newOleDbDataAdapter(cmdText,conn))
13{
14DataSetds=newDataSet();
15oda.Fill(ds);
16returnds.Tables[0];
17}
18}
19}
20
21publicDataTableGetMenu()
22{
23stringsql="select*frommenuwheregrade=0";
24returnExecuteQuery(sql);
25}
26
27publicDataTableGetMenuBySupCode(stringsupMenuCode)
28{
29stringsql="select*frommenuwheresupmenucode='"+supMenuCode+"'";
30returnExecuteQuery(sql);
31}
32}
33}
四、生成菜单项的准备
菜单一般都是公用的(不考虑用户权限相关的控制),我们可以把它开发成为一个公共的部分。本示例使用母版页来做菜单,新建母版页:
在此母版页里加入RadMenu控件,并设置相应的皮肤就OK。如下代码块:
2<formid="form1"runat="server">
3
4<%--菜单开始--%>
5<rad:RadMenuID="SystemMenu"runat="server"Skin="Web20">
6</rad:RadMenu>
7<%--菜单结束--%>
8
9<%--内容开始--%>
10<asp:ContentPlaceHolderID="CPH"runat="server">
11
12</asp:ContentPlaceHolder>
13<%--内容结束--%>
14
15</form>
16</body>
五、根据数据库数据生成菜单项
现在就差最后一步了,根据数据库里读取的数据生成菜单项。由于菜单下会有子菜单情况,示例中将菜单项生成分两步来处理,详细见如下代码:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
除了上面的方法,还有一个构建子菜单的方法InitSubMenu(),如下代码块:
2{
3DataTabledtMenu=menu.GetMenuBySupCode(supMenuCode);
4
5if(dtMenu!=null)
6{
7foreach(DataRowdataRowindtMenu.Rows)
8{
9RadMenuItemsubItem=newRadMenuItem();
10
11subItem.ID=dataRow["ID"].ToString();
12subItem.Text=dataRow["Name"].ToString();
13subItem.Value=dataRow["Url"].ToString();
14subItem.AccessKey=dataRow["ShortCut"].ToString();
15
16item.Items.Add(subItem);
17
18if(Convert.ToInt32(dataRow["EndGrade"])!=1)
19{
20InitSubMenu(subItem,Convert.ToString(dataRow["Code"]));
21}
22}
23}
24}
六、展现RadMenu风采
通过上面一步步的开发,现在终于可以一览RadMenu的风采了。通过上面建立的母版页建立一内容页,直接运行内容页就可以看到效果了。示例中我使用了三种皮肤:Web2.0,WebBlue和Vista,下面是此三种皮肤的运行截图:
七、其他
出了皮肤是一大特色外,RadMenu还提供了很多客户端事件,我们利用这些API可以很方便在在客户端通过JavaScript动态的来创建、添加、删除菜单项,如下属性截图:
尤其是在AJAX普遍使用的今天,无刷新的应用开发越来越普遍,RadMenu为我们提供了比较完美的菜单解决方案。
本文就简单介绍于此,更多示例可以访问RadControls官方提供的在线Demo,希望本文对大家在菜单开发上可以起到一定的帮助。官方示例地址:http://demos.telerik.com/aspnet/Menu/Examples/Overview/DefaultCS.aspx
本文示例下载
注:原创文章欢迎转载,转载请注明出处。 出处:http://beniao.cnblogs.com/ 或 http://www.cnblogs.com/