在ASP.NET页面中使用SolpartMenu控件

在ASP.NET页面中使用SolpartMenu控件

微软为ASP.NET提供了大量的可以免费使用的控件，包括常用的表单验证控件、日历控件等。但微软似乎忘记了另外一个非常有用的控件，那就是菜单控件。的确，在网页中适当地使用菜单，不仅可以降低版面布局的工作
量，而且为日后栏目的扩充留有充分的余地。网上虽然也有不少用JavaScript脚本开发的菜单源代码，但它们并不能“即拿即用”，必须针对实际情况进行二次开发，工作量大且不说，能否适用也还是个未知数，更别提以后的维护与扩充了。本文所介绍的SolpartMenu菜单控件，是一个基于.NET平台的菜单控件，它功能强大，操作简单，而且完全免费，可以说是目前最好的.NET菜单控件。

SolpartMenu控件由Jon Henning开发，目前最新版本是1.0.0.4。我们先来熟悉一下它的特点。

完全支持ASP.NET，与VS.NET无缝集成。

支持XML文件和代码生成菜单。

使用数据岛，支持客户端缓冲功能（此功能仅适用于IE 5以上版本）。

支持鼠标悬停效果。

支持十几种滤镜效果（某些滤镜效果仅支持IE 5.5以上版本）。

菜单智能化展开，完全避免子菜单在展开时会显示在屏幕外。

支持自定义菜单项风格。

支持菜单在页面中自动移动。

其它特点笔者不再一一介绍，请大家参见下文第一部分中的SolpartMenu属性一览表。笔者将以下图为范例，向大家讲述分别用XML文件和代码生成菜单的方法。



在VS.NET中使用SolpartMenu控件之前，我们必须要做两项准备工作：

1、 将SolpartMenu控件引用添加到“解决方案资源管理器”中。步骤如下：打开【解决方案资源管理器】面板，用鼠标右键单击【引用】，选择添加【引用….. 】菜单，在弹出的对话框中选择【.NET】卡片，单击【浏览】按钮，找到SolpartWebControls.dll文件，再依次单击【选择】，【确定】按钮。这样，SolpartMenu的引用就被添加到当前项目中。请参见下图



2、 将SolpartMenu控件添加到工具箱中，以后在应用的时候只要直接用鼠标把它拖拽到页面中即可。打开【工具箱】面板，鼠标右键单击，选择【自定义工具箱……】菜单，在弹出的对话框中选择【.NET框架组件】，单击【浏览】按钮，找到SolpartWebControls.dll文件，单击【确定】按钮即可。添加后的工具箱如右图所示。



一、 SolpartMenu控件的属性

SolpartMenu控件有许多属性，这些属性的组合应用构成了菜单的主体。下表是SolpartMenu控件的所有属性及其说明。

布局
IconWidth
菜单项图标区宽度

MenuBarHeight
菜单条高度

MenuBorderWidth
菜单边框宽度

MenuItemHeight
菜单项高度

数据
（DataBindings）
相关联的数据绑定的集合

MenuData
生成菜单的XML字串

MenuDataXMLFileName
包含菜单内容的XML文件名

外观
ArrowImage
指示下级子菜单的箭头图像

BackColor
菜单背景色

BackgroundMenuImage
菜单背景图像

Display
水平|垂直显示菜单

Font
 

  Bold
字体加粗（True|False）

  Italic
字体倾斜（True|False）

  Name
首选字体名称

  Names
可选的字体名称序列

  Overline
字体上划线（True|False）

  Size
字体大小（磅）

  Strikeout
字体删除线（True|False）

  Underline
字体下划线（True|False）

ForceDownlevel
用文字表示当前菜单层级（True|False）

ForeColor
菜单前景色

HighlightColor
菜单高亮色

IconBackGroundColor
图标区背景色

MenuAlignment
菜单对齐方式

MenuEffects
 

  MenuTransition
菜单展开滤镜效果

  MenuTransitionLength
滤镜效果的时间（秒）

  MouseOverDisplay
鼠标悬停时菜单条效果

  MouseOverExpand
鼠标悬停是否展开菜单（True|False）

  ShadowColor
菜单阴影效果

  ShadowDirection
菜单阴影方向

  ShadowStrength
菜单阴影强度

RootArrow
菜单条箭头（推荐用于垂直显示菜单时）

SelectedBorderColor
选中菜单项边框颜色

SelectedColor
选中菜单项的背景色

SelectedForeColor
选中菜单项的前景色

ShadowColor
菜单项右、下边框颜色

行为
AccessKey
键盘的快捷方式

Enabled
菜单激活状态（True|False）

EnableViewState
是否自动保存菜单状态（True|False）

Moveable
菜单能否移动（True|False）

TabIndex
菜单的TAB键顺序

ToolTip
鼠标悬停时的文字说明

Visible
菜单是否可见（True|False）

杂项
（ID）
菜单的ID

SystemImagesPath
菜单中图片路径

SystemScriptPath
菜单脚本路径（用于代码生成菜单）


二、 使用XML文件生成菜单

使用XML文件生成菜单比较简单，它适用于菜单项更新不是很频繁的情况。我们只要制作一个XML文件，然后将SolpartMenu控件属性MenuDataXMLFileName指向它就可以了。具体步骤如下：

1、 打开工具箱，用鼠标将SolpartMenu控件拖拽到页面中，系统会自动为该控件赋ID值为SolpartMenu1。

2、 选中控件SolpartMenu1，打开属性面板，进行属性设置。本文中具体设置如下：

<cc1:SolpartMenu

id="SolpartMenu1"

MenuBarWidth="100px"

runat="server"

MenuDataXMLFileName="ycfcMenu.xml"

Font-Size="9pt"

MenuEffects-Style="filter:progid:DXImageTransform.Microsoft.Shadow(color='DimGray', Direction=135,

Strength=3)progid:DXImageTransform.Microsoft.Alpha(opacity=100) ;"

MenuEffects-MouseOverDisplay="Highlight"

MenuEffects-MouseOverExpand="True"

IconBackgroundColor="ActiveBorder"

MenuBorderWidth="0"

MenuBarHeight="20"

IconWidth="23"

MenuItemHeight="20"

SelectedColor="LightBlue"

BackColor="White"

ForeColor="#666666"

MenuEffects-MenuTransition="AlphaFade"

SelectedForeColor="White"

ForceDownlevel="False"

ShadowColor="Gainsboro">

</cc1:SolpartMenu>

3、 制作XML文件，并以ycfcMenu.xml为文件名保存在当前目录下。

在制作XML文件时，需要注意三点：

（1）菜单项的定义必须以根元素<root>开始，以</root>结束。

（2）XML文件中每个标记都必须成双成对地出现，即有开始标记同时必须有结束标记。

（3）每个菜单项（menuitem）都有一个唯一的ID值，它可以由字母、数字或字母与数字的组合构成，但绝对不能重复。

XML文件（ycfcMenu.XML）全部内容如下：

<root>

<menuitem id="1" title="简体中文">

<menuitem id="11" title="　公司信息" image="0416ycfcMenu_introduction.gif">

<menuitem id="111" title="　仪化简介" url="static/introduction.aspx" />

<menubreak />

<menuitem id="112" title="　业务信息" url="static/operation.aspx" />

</menuitem>

<menubreak />

<menuitem id="12" title="　投资者关系">

<menuitem id="121" title="　临时报告" url="static/investor.aspx" />

<menubreak />

<menuitem id="122" title="　定期报告" url="static/annual.aspx" />

<menubreak />

<menuitem id="123" title="　公司推介" url="static/spread.aspx" />

<menubreak />

<menuitem id="124" title="　仪化股票">

<menuitem id="1241" title="　仪化A股最新价格" url="static/ycstock.aspx" image="0416ycfcMenu_ycstock.gif" />

<menubreak />

<menuitem id="1242" title="　仪化H股最新价格" url="static/ycstock_h.aspx" />

</menuitem>

<menubreak />

<menuitem id="125" title="　联系方式" url="static/investor_contact.aspx" image="0416ycfcMenu_contact.gif" />

</menuitem>

<menubreak />

<menuitem id="13" title="　信息化建设" url="static/information.aspx" image="0416ycfcMenu_information.gif" />

<menubreak />

<menuitem id="14" title="　人事教育" url="static/education.aspx" />

<menubreak />

<menuitem id="15" title="　环保安全" url="static/environment.aspx" />

</menuitem>

<menuitem id="2" title="法律声明" url="static/legal.aspx" />

<menuitem id="3" title="网站地图" url="static/sitemap.aspx" />

<menuitem id="4" title="联合报价">

<menuitem id="41" title="　仪征化纤等六家单位POY联合报价单" url="static/POYPrice.aspx" image="0416ycfcMenu_ycstock.gif" />

<menubreak />

<menuitem id="42" title="　中国石化四家单位FDY联合报价单" url="static/FDYPrice.aspx" image="0416ycfcMenu_ycstock.gif" />

</menuitem>

</root>

此时用IE浏览器浏览本页，您就可以看到与本文中一模一样的菜单。以后如果需要对菜单进行修改或扩充，只要对XML文件进行适当的修改就可以了。

三、 使用代码隐藏文件动态生成菜单

与用XML文件生成菜单不同，使用代码生成菜单适应于菜单重新比较频繁的情况。我们可以将菜单信息放在数据库中，通过读取数据库来动态地生成菜单。以后菜单的更新只需对数据库进行操作就可以了，无须改动源代码。

1、 打开工具箱，用鼠标将SolpartMenu控件拖拽到页面中，系统会自动为该控件赋ID值为SolpartMenu1。

2、选中控件SolpartMenu1，打开属性面板，进行属性设置。本文中具体设置如下：

<cc1:SolpartMenu

id="SolpartMenu1"

MenuBarWidth="100px"

runat="server"

Font-Size="9pt"

MenuEffects-Style="filter:progid:DXImageTransform.Microsoft.Shadow(color='DimGray', Direction=135,

Strength=3) progid:DXImageTransform.Microsoft.Alpha(opacity=100) ;"

MenuEffects-MouseOverDisplay="Highlight"

MenuEffects-MouseOverExpand="True"

IconBackgroundColor="ActiveBorder"

MenuBorderWidth="0"

MenuBarHeight="20"

IconWidth="23"

MenuItemHeight="20"

SelectedColor="LightBlue"

BackColor="White"

ForeColor="#666666"

MenuEffects-MenuTransition="AlphaFade"

SelectedForeColor="Transparent"

SystemScriptPath="scripts/">

</cc1:SolpartMenu>

请注意到用代码和用XML生成菜单时属性设置的差别。在用XML生成菜单时，我们必须给出属性MenuDataXMLFileName的值，这个值就是XML文件名；而在此这里，我们必须为SystemScriptPath属性赋值，因为在用代码生成菜单时会调用一些随控件同时分发的脚本文件，该属性的值就是这些脚本文件所在的路径，默认为scripts子目录。

2、 打开代码分离文件.asp.vb，在函数Page_Load()中输入以下代码：

‘定义objItem为XML节点

Dim objItem As System.Xml.XmlNode

‘添加第一个菜单项（简体中文），同时指定其ID值为1

objItem = SolpartMenu1.AddMenuItem("1", "简体中文", "")

‘为“简体中文”项增加一个子菜单，ID值为11，带图标

SolpartMenu1.AddMenuItem(objItem, "11", "　公司信息", "", "0416ycfcMenu_introduction.gif")

‘增加一条菜单分隔线，根据参数为1决定其位置在“简体中文”的子菜单中

SolpartMenu1.AddBreak("1")

‘为“公司信息”增加一个三级子菜单“仪化简介”，指定链接地址，不带图标

SolpartMenu1.AddMenuItem("11", "111", "　仪化简介", "static/introduction.aspx")

‘增加一条菜单分隔线，根据参数为11决定其位置在“公司信息”的子菜单中

SolpartMenu1.AddBreak("11")

‘以下语句与上面相同，不再注释

SolpartMenu1.AddMenuItem("11", "112", "　业务信息", "static/operation.aspx")

SolpartMenu1.AddMenuItem(objItem, "12", "　投资者关系", "")

SolpartMenu1.AddMenuItem("12", "121", "　临时报告", "static/investor.aspx")

SolpartMenu1.AddBreak("12")

SolpartMenu1.AddMenuItem("12", "122", "　定期报告", "static/annual.aspx")

SolpartMenu1.AddBreak("12")

SolpartMenu1.AddMenuItem("12", "123", "　公司推介", "static/spread.aspx")

SolpartMenu1.AddBreak("12")

SolpartMenu1.AddMenuItem("12", "124", "　仪化股票", "")

SolpartMenu1.AddMenuItem("124", "1241", "　仪化A股最新价格", "static/ycstock.aspx")

SolpartMenu1.AddBreak("124")

SolpartMenu1.AddMenuItem("124", "1242", "　仪化H股最新价格", "static/ycstock_h.aspx")

SolpartMenu1.AddBreak("12")

SolpartMenu1.AddMenuItem("12", "125", "　联系方式", "static/investor_contact.aspx")

SolpartMenu1.AddBreak("1")

SolpartMenu1.AddMenuItem(objItem, "13", "　信息化建设", "static/information.aspx", "0416ycfcMenu_information.gif")

SolpartMenu1.AddBreak("1")

SolpartMenu1.AddMenuItem(objItem, "14", "　人事教育", "static/education.aspx")

SolpartMenu1.AddBreak("1")

SolpartMenu1.AddMenuItem(objItem, "15", "　环保安全", "static/environment.aspx")

objItem = SolpartMenu1.AddMenuItem("2", "法律声明", "static/legal.aspx")

objItem = SolpartMenu1.AddMenuItem("3", "网站地图", "static/sitemap.aspx")

objItem = SolpartMenu1.AddMenuItem("4", "联合报价", "")

SolpartMenu1.AddMenuItem(objItem, "41", "　仪征化纤等六家单位POY联合报价单", "static/POYprice.aspx", "0416ycfcMenu_ycstock.gif")

SolpartMenu1.AddBreak(objItem)

SolpartMenu1.AddMenuItem(objItem, "42", "　中国石化等四家单位FDY联合报价单", "static/FDYprice.aspx")

以上的代码比较简单，应该不难理解，笔者在此就不再多述。

从SolpartMenu控件的使用过程和使用效果来看，它的确是一款非常优秀的菜单控件，无论是用XML文件来生成菜单，还是在代码中生成动态菜单，对以后的修改或扩充都非常方便。当然我看重的不仅仅是它强大的功能，最重要的一点在于它是完全免费的，我们无须支付任何费用就可以无任何限制地使用。另外一点，由于它是基于.NET平台的，所以您只能在ASP.NET页面中使用它，而不能用于ASP等其他页面。

SolpartMenu控件的下载地址是：http://www.solpart.com/techcorner/SolpartMenuHistory.aspx，您在这里可以随时跟踪它的更新信息，下载最新版本。当然您也可以给作者写信，向他提出你使用后的建议和意见