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

     关于菜单这个话题我想应该是不讲则懂，所以本文不会多讲这些概念，则重关注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 >

 

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

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

 1 private   void  InitMenu()
 2 {
 3    //查询出菜单配置信息
 4    DataTable dtMenu = menu.GetMenu();
 5
 6    for (int i = 0; i < dtMenu.Rows.Count; i++)
 7    {
 8        //Rad菜单项
 9        RadMenuItem item = new RadMenuItem();
10
11        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
16        this.SystemMenu.Items.Add(item);
17
18        //菜建子菜单
19        InitSubMenu(item, dtMenu.Rows[i]["Code"].ToString());
20    }
21}

 

     除了上面的方法，还有一个构建子菜单的方法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为我们提供了比较完美的菜单解决方案。

     本文就简单介绍于此，更多示例可以访问RadControls官方提供的在线Demo，希望本文对大家在菜单开发上可以起到一定的帮助。官方示例地址：http://demos.telerik.com/aspnet/Menu/Examples/Overview/DefaultCS.aspx

     本文示例下载

注：原创文章欢迎转载，转载请注明出处。  出处：http://beniao.cnblogs.com/ 或 http://www.cnblogs.com/