摘要:越来越多的网页中使用到了菜单,一般说来,菜单制作的方法比较多,编程的语言基本上是javascript或者vbscript这两种,这种菜单一旦制作好就不能改变,修改起来比较麻烦。本文讲解webmenu控件,同时给出实例,讲菜单和数据库结合起来,实现动态的菜单。
前言:
下拉菜单技术常常在大型网站(如微软公司网站)中被用于网站导航,这样可有效的缩短浏览者定位至特定内容的时间。用Javascript或VBscript虽可实现该项效果,但需要学习脚本语言和DHTML。或者,还可以用Dreamweaver和CSS也能制作出(多级)下拉菜单。
对菜单的显示过程进行一下分析,可以发现以下几点:
1 当鼠标移动到文字(或图像)上,菜单显示;
2 鼠标从文字(或图像)上移开(除菜单外的位置),菜单消失;
3 鼠标从文字(或图像)移动到菜单上,菜单保持显示(这是关键);鼠标从菜单移开,菜单消失。
4 对于多级菜单还要保持上下级菜单的同步。
5当鼠标移动到菜单项目上,菜单项的外观(前景,背景或边框)变化。
这些特点实现了菜单的部分功能,某一些菜单功能无法通过或者不方便通过脚本语言来操作,例如,怎么来实现菜单的Disenable和Enable功能。还有怎么来实现菜单的“过程操作”(也就是没有点击“打开文件”,就无法进行“编辑”功能),这些方法均无法通过脚本来实现,同时脚本语句嵌入HTML语言中,结构复杂,写作麻烦,技术要求较高,不能迅速掌握,现在也有一些写作网页菜单的工具,通过软件操作,生成脚本,然后拷贝脚本到网页里,尽管这样也可以实现网页菜单,但是也无法实现上文所说的部分功能。
第一部分:Web Munu控件
在网上搜索到了一个很有用的控件,WebMenu for ASP.NET(http://www.coalesys.com),这个控件除了能够实现生成脚本语言的功能之外,就是还可以支持数据库操作,通过在数据库里设置一些属性的值,可以实现菜单的相关功能。而且该控件生成的脚本可以面向国中内核的浏览器,做到了真正的兼容,使用起来没有后顾之忧。
使用之前要注册。注册后就可以把注册码嵌入ASP.net的后台,以便分发部署的时候不会出错。Web Menu的License key是一个字符串,格式为:"用户名:公司名称:序列号"具体使用如下:
WebMenu.UserData = "John Doe:Acme Corp:1234567890";
//如果没有公司名称,使用方法如下:
WebMenu.UserData = "John Doe::1234567890";
具体使用这个控件的方法如下:
1:拷贝DLL到解决方案的bin目录。
2:在您的页面上注册。语句为:
<%@ Register TagPrefix="cswm" Namespace="Coalesys.WebMenu" Assembly="Coalesys.WebMenu" %>
3:在页面上放置Web Menu对象。
<cswm:WebMenu
ID = "QuickMenu"
ClearPixelImage = "/images/clearpixel.gif"
PopupIcon = "/images/popup.gif"
SelectedPopupIcon = "/images/selectedpopup.gif"
runat = "server">
</cswm:WebMenu>
4:添加菜单组和菜单项。
<cswm:WebMenu
ID = "QuickMenu"
ClearPixelImage = "/images/clearpixel.gif"
PopupIcon = "/images/popup.gif"
SelectedPopupIcon = "/images/selectedpopup.gif"
runat = "server">
<cswm:Group
Caption = "Home"
runat="server">
<cswm:Item
Caption = "News"
URL = "News.aspx"
runat = "server" />
</cswm:Group>
</cswm:WebMenu>
5:添加嵌套菜单组和菜单项。
<cswm:WebMenu
ID = "QuickMenu"
ClearPixelImage = "/images/clearpixel.gif"
PopupIcon = "/images/popup.gif"
SelectedPopupIcon = "/images/selectedpopup.gif"
runat = "server">
<cswm:Group
Caption = "Home"
runat="server">
<cswm:Item
Caption = "News"
URL = "News.aspx"
runat = "server" />
<cswm:Item
Caption = "About"
URL = "About.aspx"
runat = "server" />
<cswm:Item
Caption = "Products"
runat = "server">
<cswm:Group runat="server">
<cswm:Item
Caption = "Super Widget"
URL = "SuperWidget.aspx"
runat = "server" />
<cswm:Item
Caption = "Super Widget Pro"
URL = "SuperWidgetPro.aspx"
runat = "server" />
</cswm:Group>
</cswm:Item>
</cswm:Group>
</cswm:WebMenu>
在Asp.net里操作的基本过程如下
1:添加控件对象到VS.net的工具箱
找到相应的DLL:
2:拖放Web Menu到页面上。
效果图如下:
3:编程。
第二部分:数据库操作
为了实现通过数据库来操作菜单功能,建立下表:
其中的部分数据如下:
可以看到有File,Edit,Options等几个菜单组,在File里又有New,Open,Save等。在Asp.net后台
程序代码如下:
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.OleDb;
namespace WebApplication6
{
/// <summary>
/// WebForm1 的摘要说明。
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected Coalesys.WebMenu.WebMenu csNetMenu;
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
csNetMenu.MenuBar.AbsoluteDockEnabled = false;
csNetMenu.MenuBar.AbsoluteDragEnabled = false;
csNetMenu.MenuBar.BackgroundColor = "";
csNetMenu.MenuBar.OuterHighlightColor = "#666666";
csNetMenu.MenuBar.OuterShadowColor = "#666666";
csNetMenu.MenuBar.InnerShadowColor = "#F9F8F7";
csNetMenu.MenuBar.HoverColor = "#dfdfdf";
csNetMenu.MenuBar.SelectedColor = "#B6BDD2";
csNetMenu.MenuBar.SelectedTextColor = "#000000";
csNetMenu.BackgroundColor = "";
csNetMenu.SelectedColor = "#B6BDD2";
csNetMenu.OuterHighlightColor = "#c0c0c0";
csNetMenu.OuterShadowColor = "#c0c0c0";
csNetMenu.InnerShadowColor = "#808080";
csNetMenu.PopupIcon = "./images/arrow-black.gif";
csNetMenu.SelectedPopupIcon = "./images/arrow-white.gif";
csNetMenu.ClearPixelImage = "./images/clearpixel.gif";
// Populate WebMenu
LoadWebMenuData(csNetMenu);
}
//=============================================================================
// LoadWebMenuData - load webmenu from database
//
// input:
// csWebMenu - [in] Coalesys.WebMenu.WebMenu object
//
// output:
// none
//
public void LoadWebMenuData(Coalesys.WebMenu.WebMenu csWebMenu)
{
Coalesys.WebMenu.Group csMenuGroup;
// database info
string dbConnString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=";
string dbPathString = Server.MapPath("./SelfReferencedTable.mdb");
string dbSqlString = "SELECT * FROM Nodes ORDER BY ID";
// Initiate OleDb interface
OleDbConnection dbConn = new OleDbConnection(dbConnString + dbPathString);
OleDbCommand dbComm = new OleDbCommand(dbSqlString, dbConn);
OleDbDataAdapter dbAdapter = new OleDbDataAdapter();
dbConn.Open();
// Fill an ADO.NET DataSet
DataSet ds = new DataSet();
dbAdapter.SelectCommand = dbComm;
dbAdapter.Fill(ds, "MenuItems");
dbConn.Close();
// Create the data relation between the ID and Parent_ID columns of the MenuItems table.
// (this is the key to hierarchical navigating in a self-referencing table).
DataRelation dr = ds.Relations.Add("MenuItemHierarchy",
ds.Tables["MenuItems"].Columns["ID"],
ds.Tables["MenuItems"].Columns["Parent_ID"]);
// Start top-down navigation of the MenuItem rows.
foreach(DataRow dbMenuItem in ds.Tables["MenuItems"].Rows)
{
// If the Parent_ID colum is null, then this is a root menu item.
if(dbMenuItem.IsNull("Parent_ID"))
{
// Create a menu group for the root menu item
csMenuGroup = csWebMenu.Groups.Add();
csMenuGroup.Caption = dbMenuItem["Caption"].ToString();
// execute the recursive function to populate all it's children.
AddMenuItems(dbMenuItem.GetChildRows(dr), dr, csMenuGroup);
}
}
}
//=============================================================================
// AddMenuItems - Recursive function to populate hierarchical Menu Items
// from data rows that have parent/child relationships.
//
// input:
// dataRows - [in] Child Rows
// dataRel - [in] Data Relation
// webMenuGroup - [in] WebMenu Group
//
// output:
// none
//
public void AddMenuItems(DataRow[] dataRows, DataRelation dataRel, Coalesys.WebMenu.Group webMenuGroup)
{
Coalesys.WebMenu.Item csMenuItem;
Coalesys.WebMenu.Group csNestedMenuGroup;
DataRow[] drChildren;
foreach(DataRow dbMenuItem in dataRows)
{
csMenuItem = webMenuGroup.Items.Add();
csMenuItem.Caption = dbMenuItem["Caption"].ToString();
csMenuItem.URL = dbMenuItem["URL"].ToString();
if (dbMenuItem["Enable"].ToString()=="True" )
{
csMenuItem.Enabled=true;
}
else
{
csMenuItem.Enabled=false;
}
// check if this Item has children of it's own
drChildren = dbMenuItem.GetChildRows(dataRel);
// if so, create a group for the children and reenter this function.
if(drChildren.Length > 0)
{
csNestedMenuGroup = csMenuItem.AddGroup();
AddMenuItems(drChildren, dataRel, csNestedMenuGroup);
}
}
}
}
效果图如下:
其中可以看到,Help菜单有两项内容:Contents和About,其中,Contents又有Topics和ObjectReference,但是这里的Topics已经被Disenable了,不能点击,菜单的使能由数据库里的Enable字段决定,这样实现了动态菜单的生成。如果菜单的项目由改变,只需要在数据库里面进行操作就可以了,从而实现了web页面实现菜单的基本功能。除了能够实现这些功能外,还可以在菜单中添加图标,可停靠等。如下图:
索要源代码和作者联系方式:l_yx123@sina.com.cn,谢谢支持。