Asp.net 菜单控件

本文介绍的菜单控件采用的css 和ul list来显示菜单，生成的html小，无需javascript支持，对大部分的浏览器都支持，除ie6要单独修改css也可以使其支持。
通过本文可以了解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多级菜单
进行修改，

本文的CSS显示部分参考了此文的介绍。

附上完整代码，如需要可自行下载修改 下载文件

时间： 2024-08-09 22:01:02

Asp.net 菜单控件的相关文章

ASP.NET控件&lt;ASP:Button /&gt; html控件&lt;input type=&quot;button&quot;&gt;区别联系

ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样的东西 服务器只认识input,我们可以直接写input 但是asp是要把自己自动翻译成input再交给服务器的.其实是一样的东西 写写我看到的区别:                asp控件,直接可以用c#编程                input加上 runat=“server” 也被c#编程了 说白

Essential ASP.NET MVC日历排程控件Essential Schedule for ASP.NET MVC 控件介绍及下载

Essential Schedule for ASP.NET MVC是一款界面控件,让开发人员添加OutLook外观的日历日程控件到你应用程序中,支持AJAX,内嵌多种皮肤,支持多种时间视图,支持打印等. 具体功能: 支持日程水平或垂直显示. 支持在运行时创建.读取.更新和删除任务活动 支持拖拉任务活动 支持设置任务活动的优先级 支持设置循环任务活动 支持为任务活动设置提示信息 控件为任务活动提供了右键菜单,以便客户更方便操作 支持Day View.Week View.Workweek View

ASP.NET_验证控件(class0620)

为什么使用验证控件 当需要让用户输入数据时,用户有可能输入不符合我们程序逻辑要求的信息,所以我们要对输入进行验证. 客户端验证(用户体验,减少服务器端压力) 服务器端验证(防止恶意攻击,客户端js很容易就可以被绕过) 必须要对用户输入的数据进行合法性校验,这些校验逻辑很多是重复的,比如字段不能为空.必须为日期格式.数字不能大于100等,而且要同时在客户端和服务器端校验. 验证控件 ASP.Net提供了如下的控件: RequiredFieldValidator:字段必填: RangeValidat

Winform控件之菜单控件，工具栏控件和状态栏控件

菜单是用户获取应用程序中主要功能和实用程序的主要途径,如新建文件,打开文件等,这就需要用到菜单控件(MenuStrip).工具栏另一种获取应用程序主要功能的常用方法,比起菜单要直观,这就需要用到工具栏控件(ToolStrip).状态栏用于显示用户状态的简短信息,这就需要用到状态栏控件(StatusStrip). 一,MenuStrip控件和ContenxMenuStrip控件 MenuStrip控件是由System.Windows.Forms.MenuStrip类提供的,取代了以前的MainMe

初始ASP.NET数据控件【续 ListView】

ListView控件   ListView控件可以用来显示数据,它还提供编辑,删除,插入,分页与排序等功能.ListView是GridView与DataList的融合体,它具有GridView控件编辑数据的功能同时还具有DataList控件的灵活布局的功能.ListView控件的分页功能需要通过DataPager控件来实现. ListView控件的模版 LayoutTemplate:标识定义控件的主要布局的根模版.包含一个占位符对象,如表行(tr),div,span元素.此元素将由ItemTem

asp.net分页控件使用详解【附实例下载】

本篇文章主要对asp.net创建事务的方法进行实例介绍,具有很好的参考价值,需要的朋友一起来看下吧 一.说明 AspNetPager.dll这个分页控件主要用于asp.net webform网站,现将整理代码如下 二.代码 1.首先在测试页面Default.aspx页面添加引用 <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer"

Asp.Net数据控件引用AspNetPager.dll分页

今天与大家分享一下"Asp.Net数据控件引用AspNetPager.dll分页"首先声明以下几点: 1.也许讲解有点初级,希望高手不要"喷"我,因为我知道并不是每一个人都是高手,我也怕高手们说我装13,小生不才: 2.如有什么不对的地方,还希望大家指出,一定虚心学习: 3.本文属于作者原创,尊重他人劳动成果,转载请注明作者,谢谢. 下面开讲: 第一步:首先是下载一个AspNetPager.dll 下载地址 http://files.cnblogs.com/tand

实用的树形菜单控件tree

 jQuery plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree. jQuery plugin: Treeview  jQuery  jstree jsTree是一个基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖\放节点操作.可以自己自定义创建,删除,嵌套,重命名,选择节点的规则.在这些操作上可以添加多种监听事件.  jstree  jQuery UI Widgets  FileTreePanel F

asp.net验证控件

asp.net验证控件的好处: 1,客户端服务器端都会同时校验. 2,简化校验逻辑. 1,RequiredFieldValidator:非空校验 InitialValue:默认值.当控件的值等于默认值时不能通过校验. Text:显示的错误信息. ControltoValidat:关联需要验证的控件. 2,RangeValidator:在给定的最大最小值之间. Type:需要验证的数据类型.MaximumValue:最大值.MinimumValue:最小值. 不会进行非空校验.如要进行非空校验需要