基于asp.net的webmenu的數據操作

2024-07-10 13:01:52

字體：大中小

來源：轉載

供稿：網友

收集最實用的網頁特效代碼！

摘要：越來越多的網頁中使用到了菜單，一般說來，菜單制作的方法比較多，編程的語言基本上是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對象。

4：添加菜單組和菜單項。

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頁面實現菜單的基本功能。除了能夠實現這些功能外，還可以在菜單中添加圖標，可停靠等。如下圖：

索要源代碼和作者聯系方式：[email protected]，謝謝支持。