通过本文可以了解asp.net 控件的开发，及composite设计模式的实际运用。
采用composite设计模式设计菜单类：
menucompositeitem类
namespace ruinet.controls { [serializable()] public class menucompositeitem { private list<menucompositeitem> _children = new list<menucompositeitem>(); private string _text; private string _link; private string _target; /// <summary> /// 菜单项 /// </summary> /// <param name="text">菜单名</param> /// <param name="link">链接</param> public menucompositeitem(string text, string link) { this._text = text; this._link = link; } /// <summary> /// 菜单项 /// </summary> /// <param name="text">菜单名</param> /// <param name="link">链接</param> /// <param name="target">跳转目标</param> public menucompositeitem(string text, string link, string target) { this._text = text; this._link = link; this._target = target; } /// <summary> /// 设置或获取菜单名 /// </summary> public string text { get { return _text; } set { _text = value; } } /// <summary> /// 设置或获取链接 /// </summary> public string link { get { return _link; } set { _link = value; } } /// <summary> /// 跳转目标 /// </summary> public string target { get { return _target; } set { _target=value; } } /// <summary> /// 设置或获取子菜单 /// </summary> public list<menucompositeitem> children { get { return _children; } set { _children = value; } } }
menucomposite类
namespace ruinet.controls { [defaultproperty("menu")] [toolboxdata("<{0}:menucomposite runat=server></{0}:menucomposite>")] public class menucomposite : webcontrol { /// <summary> /// 设置获取选择的菜单 /// </summary> [bindable(true)] [defaultvalue("")] [localizable(true)] public string selectedmenutext { get { string s = (string)viewstate["selectedmenutext"]; return ((s == null) ? string.empty : s); } set { viewstate["selectedmenutext"] = value; } } /// <summary> /// 获取和设置菜单项从viewstate /// </summary> [bindable(true)] [defaultvalue(null)] [localizable(true)] public menucompositeitem menuitems { get { return viewstate["menuitems"] as menucompositeitem; } set { viewstate["menuitems"] = value; } } /// <summary> /// 呈现菜单结构 /// </summary> /// <param name="output">html输出流</param> protected override void rendercontents(htmltextwriter output) { menucompositeitem root = this.menuitems; output.write(@"<div class=""navmenu"">"); output.write(@" <ul>"); for (int i = 0; i < root.children.count; i++) { recursiverender(output, root.children[i]); } output.write(@" </ul>"); output.write(@"</div>"); } /// <summary> /// 递归输出菜单项 /// </summary> /// <param name="output">html输出流</param> /// <param name="item">菜单项.</param> /// <param name="depth">indentation depth.</param> private void recursiverender(htmltextwriter output, menucompositeitem item) { output.write("<li>"); if (string.isnullorempty(item.target))//为空不设置跳转目标 { output.write(@"<a href=""" + item.link + @""">"); } else { output.write(@"<a href=""" + item.link + @""" target= """ + item.target + @""">"); } if (item.text == selectedmenutext) //选中的菜单 { output.write(@"<span class=""selected"">"); output.writeline(item.text); output.writeline("</span>"); } else { output.write(item.text); } output.write("</a>"); if (item.children.count > 0) { output.writeline(); output.write("<ul>"); for (int i = 0; i < item.children.count; i++) { recursiverender(output, item.children[i]); } output.write("</ul>"); } output.write("</li>"); } } }
在页面中使用
添加对控件的引用后就可以直接在“工具箱”-》controls组件中 看到menucomposite组件
再就可以像其他asp.net 控件一样使用
使用：
menucompositeitem root = new menucompositeitem("root", null); menucompositeitem menu01 = new menucompositeitem("menu01", resolveurl("~/default.aspx")); menucompositeitem menu02 = new menucompositeitem("menu02", resolveurl("~/default.aspx")); menucompositeitem menu03 = new menucompositeitem("menu03", resolveurl("~/default.aspx")); menucompositeitem menu04 = new menucompositeitem("menu04", resolveurl("~/page04.aspx")); menucompositeitem menu05 = new menucompositeitem("menu05", resolveurl("~/default.aspx")); menucompositeitem menu01_01 = new menucompositeitem("menu01-01", resolveurl("~/default.aspx")); menucompositeitem menu01_02 = new menucompositeitem("menu01-02", resolveurl("~/page01-02.aspx")); menucompositeitem menu01_03 = new menucompositeitem("menu01-03", resolveurl("~/default.aspx")); menucompositeitem menu01_04 = new menucompositeitem("menu01-04", resolveurl("~/default.aspx")); menu01.children.add(menu01_01); menu01.children.add(menu01_02); menu01.children.add(menu01_03); menu01.children.add(menu01_04); menucompositeitem menu02_01 = new menucompositeitem("menu02-01", resolveurl("~/default.aspx")); menucompositeitem menu02_02 = new menucompositeitem("menu02-02", resolveurl("~/default.aspx"), "menu02-02"); menu02.children.add(menu02_01); menu02.children.add(menu02_02); menucompositeitem menu04_01 = new menucompositeitem("menu04-01", resolveurl("~/default.aspx")); menucompositeitem menu04_02 = new menucompositeitem("menu04-02", resolveurl("~/page04-02.aspx"), "_blank"); menu04.children.add(menu04_01); menu04.children.add(menu04_02); root.children.add(menu01); root.children.add(menu02); root.children.add(menu03); root.children.add(menu04); root.children.add(menu05);
themenucomposite.menuitems = root;
此时生成的编译运行后会生成一个没有样式ul list ,效果如下：
因此要生成可显示和隐藏的菜单项，关键在css的设置上，开始时将二级子菜单设置为隐藏visibility: hidden;
同时定义li的hover事件，li:hover时：自菜单的 visibility要改为visible; 大致原理是这样，当然还有注意菜单项的位置
一级菜单float:left;使其能水平显示。
css定义如下：
.navmenu * { margin: 0; padding: 0; } .navmenu { border: #000 1px solid; height: 25px; } .navmenu li { /*水平菜单*/ float: left; list-style: none; position: relative; } .navmenu a { display: block; font-size: 12px; height: 24px; width: 100px; line-height: 24px; background-color: #cdeb8b; color: #0000ff; text-decoration: none; text-align: center; border-left: #36393d 1px inset; border-right: #36393d 1px inset; border-bottom: #36393d 1px inset; } /*单独设置一级菜单样式*/ .navmenu > ul > li > a { font-size: 11px; font-weight: bold; } .navmenu a:hover { background: #369; color: #fff; } /*新增的二级菜单部分*/ .navmenu ul ul { visibility: hidden; /*开始时是隐藏的*/ position: absolute; left: 0px; top: 24px; } .navmenu ul li:hover ul, .navmenu ul a:hover ul { visibility: visible; } .navmenu ul ul li { clear: both; /*垂直显示*/ text-align: left; } /*选中菜单项*/ .navmenu .selected { padding-left:15px; background-position-x:0px; background-image: url(./res/selected.gif); background-repeat: no-repeat; text-decoration:underline; }
定义css后的效果如下：
到此菜单控件已完成。已测试过可以在ie7,ie8,chrome,firefox中正常显示，在ie6显示可能会有问题，可以参考纯css多级菜单 进行修改，
更多asp.net 菜单控件简洁版。