利用JavaScript在ASP.NET中动态生成系统菜单
用戶在登陸一個系統后通常會因為權限的不同而使用不同的系統功能，我們在實現用戶使用的菜單項時有兩種選擇，一是列出全部系統菜單項，根據用戶的權限禁用一部分菜單，二是根據權限動態加載菜單，這樣只要列出的菜單都可以使用，而不同用戶登陸后看到的菜單項排列是不同的。在這里我使用了第二種方式，利用JavaScript和SQL Server2000在ASP.NET中實現了一個類似于論壇菜單的動態加載功能。
整個菜單的界面如右圖所示：?
上面共有四個大菜單項，每個菜單項內又有若干個小項，我們所要實現的就是讓不同的用戶登陸后所看到的大小菜單項都是不同的。
(1)首先我們進行數據庫方面的設計。由于不同用戶對應不同的權限，而不同的權限對應不同的菜單，所以數據庫方面要設計三個表：
表Users
| 列名 | 數據類型及長度 | 說明 |
| UserName | Varchar(50) | ?主鍵，用戶名 |
| RoleName | Varchar(50) | 角色名 |
此表用于記錄所有的用戶，每個用戶可以賦予一個角色
表Roles
| 列名 | 數據類型及長度 | 備注 |
| RoleName | Varchar(50) | 主鍵 |
| FunctionID | Int | 主鍵，功能點序號 |
此表是角色表，包括角色名稱和功能點編號（功能點對應著界面內的菜單項）。由于一個角色可以對應多個功能點，而一個功能點也可以由多個角色使用，雙方是多對多關系，所以此表設置聯合主鍵。
?
表Fun
| 列名 | 數據類型及長度 | 備注 |
| ID | Int(4) | 主鍵，功能點序號 |
| ParentID | Int(4) | 父功能點序號 |
| Text | Varchar(30) | 功能點的文字描述 |
| URL | Varchar(50) | 點擊菜單后轉向的頁面地址 |
| ImageUrl | Varchar(30) | 菜單項圖片本身的地址 |
此表是功能點信息表，由于菜單包括主菜單項和子菜單項，因此每個功能點要記錄他的父功能點編號，主菜單的父功能點則為0，由于點擊菜單后要進行頁面的跳轉，因此要記錄各功能點對應的頁面的URL，同時為了美化菜單我們也可以在菜單上加一下小圖標，這個可以通過ImageUrl來保存圖標的位置。
這樣數據庫部分已經設計完畢，接下來我們先要對數據庫填充數據，這里首先看Fun表，該表填充后的結果如下（其中URL和ImageUrl分別存儲頁面和圖標的地址，此處省略）
| ID | ParentID | Text |
| 1 | 0 | 我的社區 |
| 2 | 0 | .NET技術社區 |
| 3 | 0 | 休閑區 |
| 4 | 0 | 版主管理 |
| 5 | 1 | 我的問題 |
| 6 | 1 | 我得分的問題 |
| 7 | 1 | 我參與的問題 |
| 8 | 1 | 我的專家分 |
| 9 | 2 | C#編程 |
| 10 | 2 | ASP.NET開發 |
| 11 | 2 | WinForm開發 |
| 12 | 2 | .NET Framework |
| 13 | 3 | 灌水樂園 |
| 14 | 3 | 貼圖天地 |
| 15 | 4 | 查詢帖子 |
| 16 | 4 | 回復管理 |
| 17 | 4 | 封殺帳號 |
這樣已經把菜單中全部的功能點填充完畢，然后開始填充表Roles的數據這里非常簡單，只要根據事先設計的角色名和可以使用的功能點進行填充就可以了。最后在Users表中添加三個帳號用于測試，此處將后兩個表的內容統一列出
| 帳號（UserName） | 角色(RoleName) | 可用功能點序號 (FunctionID) |
| admin | Administrator | 全部：1－17 |
| ue | User | 1－15 |
| Gust | Guest | 1－3，9－14 |
?
(2)下面新建一個Web項目，項目中有兩個Web窗體，分別是login.aspx 和webform1.aspx
打開login.aspx頁面，可以在里面加上一個Textbox和一個Button按鈕，其中TextBox用于輸入用戶名，按鈕用來登陸，我們在按鈕的Click事件中加入下面的代碼
?
string?name=TextBox1.Text.ToString();?//記錄登陸人員的用戶名
Session.Add("UserName",name);?//將用戶名加入到session中
Response.Redirect("WebForm1.aspx",true);
（3）打開webform1.aspx頁面，切換到html代碼視圖，在<Head>與</Head>中插入下拉JavaScript代碼
<link?href="../style.css"?rel="stylesheet"?type="text/css">
<STYLE?type="text/css">
A:link?{?FONT-SIZE:?12px;?COLOR:?#000000;?TEXT-DECORATION:?none?}
A:visited?{?FONT-SIZE:?12px;?COLOR:?#000000;?TEXT-DECORATION:?none?}
A:hover?{?FONT-SIZE:?12px;?COLOR:?#006cd9;?TEXT-DECORATION:?none?}
TD?{?FONT-SIZE:?12px;?LINE-HEIGHT:?150%?}
</STYLE>
<SCRIPT>
function?showitem(id,name)
{
return?("<span><a?href='"+id+"'?target=_self>"+name+"</a></span><br>")
}
function?switchoutlookBar(number)
{
var?i?=?outlookbar.opentitle;
outlookbar.opentitle=number;
var?id1,id2,id1b,id2b
if?(number!=i?&&?outlooksmoothstat==0){
if?(number!=-1)
{
if?(i==-1)
{
id2="blankdiv";
id2b="blankdiv";}
else{
id2="outlookdiv"+i;
id2b="outlookdivin"+i;
document.all("outlooktitle"+i).style.border="1px?none?navy";
document.all("outlooktitle"+i).style.background="#006CD9";
document.all("outlooktitle"+i).style.color="#ffffff";
document.all("outlooktitle"+i).style.textalign="center";
}
id1="outlookdiv"+number
id1b="outlookdivin"+number
document.all("outlooktitle"+number).style.border="1px?none?white";
document.all("outlooktitle"+number).style.background="#006CD9";?//title
document.all("outlooktitle"+number).style.color="#ffffff";
document.all("outlooktitle"+number).style.textalign="center";
smoothout(id1,id2,id1b,id2b,0);
}
else
{
document.all("blankdiv").style.display="";
document.all("blankdiv").sryle.height="100%";
document.all("outlookdiv"+i).style.display="none";
document.all("outlookdiv"+i).style.height="0%";
document.all("outlooktitle"+i).style.border="1px?none?navy";
document.all("outlooktitle"+i).style.background="#006CD9";
document.all("outlooktitle"+i).style.color="#ffffff";
document.all("outlooktitle"+i).style.textalign="center";
}
}
}
function?smoothout(id1,id2,id1b,id2b,stat)
{
if(stat==0){
tempinnertext1=document.all(id1b).innerHTML;
tempinnertext2=document.all(id2b).innerHTML;
document.all(id1b).innerHTML="";
document.all(id2b).innerHTML="";
outlooksmoothstat=1;
document.all(id1b).style.overflow="hidden";
document.all(id2b).style.overflow="hidden";
document.all(id1).style.height="0%";
document.all(id1).style.display="";
setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+outlookbar.inc+")",outlookbar.timedalay);
}
else
{
stat+=outlookbar.inc;
if?(stat>100)
stat=100;
document.all(id1).style.height=stat+"%";
document.all(id2).style.height=(100-stat)+"%";
if?(stat<100)?
setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+stat+")",outlookbar.timedalay);
else
{
document.all(id1b).innerHTML=tempinnertext1;
document.all(id2b).innerHTML=tempinnertext2;
outlooksmoothstat=0;
document.all(id1b).style.overflow="auto";
document.all(id2).style.display="none";
}
}
}
function?getOutLine()
{
outline="<table?"+outlookbar.otherclass+">";
for?(i=0;i<(outlookbar.titlelist.length);i++)
{
outline+="<tr><td?name=outlooktitle"+i+"?id=outlooktitle"+i+"?";?
if?(i!=outlookbar.opentitle)?
outline+="?nowrap?align=center?style='cursor:hand;background-color:#006CD9;color:#ffffff;height:5;border:1?none?navy'?";
else
outline+="?nowrap?align=center?style='cursor:hand;background-color:#006CD9;color:white;height:5;border:1?none?white'?";
outline+=outlookbar.titlelist[i].otherclass
outline+="?οnclick='switchoutlookBar("+i+")'>";
outline+=outlookbar.titlelist[i].title+"</td></tr>";
outline+="<tr><td?name=outlookdiv"+i+"?valign=top?align=center?id=outlookdiv"+i+"?style='width:100%"
if?(i!=outlookbar.opentitle)?
outline+=";display:none;height:0%;";
else
outline+=";display:;height:100%;";
outline+="'><div?name=outlookdivin"+i+"?id=outlookdivin"+i+"?style='overflow:auto;width:100%;height:100%'>";
for?(j=0;j<outlookbar.itemlist[i].length;j++)
outline+=showitem(outlookbar.itemlist[i][j].key,outlookbar.itemlist[i][j].title);
outline+="</div></td></tr>"
}
outline+="</table>"
return?outline
}
function?show()
{
var?outline;
outline="<div?id=outLookBarDiv?name=outLookBarDiv?style='width=100%;height:100%'>"
outline+=outlookbar.getOutLine();
outline+="</div>"
document.write(outline);
}
function?theitem(intitle,instate,inkey)
{
this.state=instate;
this.otherclass="?nowrap?";
this.key=inkey;
this.title=intitle;
}
function?addtitle(intitle)
{
outlookbar.itemlist[outlookbar.titlelist.length]=new?Array();
outlookbar.titlelist[outlookbar.titlelist.length]=new?theitem(intitle,1,0);
return(outlookbar.titlelist.length-1);
}
function?additem(intitle,parentid,inkey)
{
if?(parentid>=0?&&?parentid<=outlookbar.titlelist.length)
{
outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length]=new?theitem(intitle,2,inkey);
outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length-1].otherclass="?nowrap?align=left?style='height:5'?";
return(outlookbar.itemlist[parentid].length-1);
}
else
additem=-1;
}
function?outlook()
{
this.titlelist=new?Array();
this.itemlist=new?Array();
this.divstyle="style='height:100%;width:100%;overflow:auto'?align=center";
this.otherclass="border=0?cellspacing='0'?cellpadding='0'?style='height:100%;width:100%'valign=middle?align=center?";
this.addtitle=addtitle;
this.additem=additem;
this.starttitle=-1;
this.show=show;
this.getOutLine=getOutLine;
this.opentitle=this.starttitle;
this.reflesh=outreflesh;
this.timedelay=50;
this.inc=10;
}
function?outreflesh()
{
document.all("outLookBarDiv").innerHTML=outlookbar.getOutLine();
}
function?locatefold(foldname)
{
for?(var?i=0;i<outlookbar.titlelist.length;i++)
if(foldname==outlookbar.titlelist[i].title)
{
outlookbar.starttitle=i;
outlookbar.opentitle=i;
}
}
var?outlookbar=new?outlook();
var?tempinnertext1,tempinnertext2,outlooksmoothstat
outlooksmoothstat?=?0;
????????</SCRIPT>
在<Body>與</Body>中插入下面代碼
<form?id="Form1"?method="post"?runat="server">
<asp:Label?id="Label1"?style="Z-INDEX:?101;?LEFT:?208px;?POSITION:?absolute;?TOP:?208px"?runat="server">Label</asp:Label>
??<TABLE?id="mnuList"?style="Z-INDEX:?102;?LEFT:?8px;?WIDTH:?140px;?POSITION:?absolute;?TOP:?8px;?HEIGHT:?100%"
??cellSpacing="0"?cellPadding="0"?align="center"?border="0">
????<TBODY>
??????<TR>
????????<TD?id="outLookBarShow"?style="HEIGHT:?100%"?vAlign="top"?align="center"?bgColor="#f0f0e5"
?????name="outLookBarShow">
????????<SCRIPT>locatefold("我的社區")
????????outlookbar.show()
????????</SCRIPT>
????????<FONT?face="宋體"></FONT>
????????</TD>
??????</TR>
????</TBODY>
??</TABLE>
</form>
?????? 這里面有一點要注意，就是上面的<SCRIPT>locatefold("我的社區") 這一句必須把“我的社區”改成你自己的菜單的第一項，而且這個是必須有的，否則JAVASCRIPT將無法正確寫出其他的菜單項。?
（4）轉入WebForm1.aspx.cs頁面
先定義一個變量
private string name;
在page_load中加入
name=Session["UserName"].ToString();//獲取用戶名
if(!IsPostBack)
{????????
????SqlConnection?conn=new?SqlConnection();
????conn.ConnectionString=…//連接數據庫
????SqlDataAdapter?adap=new?SqlDataAdapter();
????DataSet?ds=new?DataSet();
????SqlCommand?cmd=new?SqlCommand();????cmd.Connection=conn;
????cmd.CommandText="select?Fun.ID,Fun.text,Fun.URL,Fun.ParentID?from?Fun,Roles,Users?where?Users.RoleName=Roles.RoleName?and?Roles.functionID=Fun.ID?and?Users.userName='"+name+"'";
????conn.Open();
????adap.SelectCommand=cmd;
????adap.Fill(ds);
????this.ViewState["ds"]=ds;
????string[]?str1=new?string[6];
????this.Label1.Text="<script>";
????foreach(DataRow?row?in?ds.Tables[0].Rows)
????{
????????if?(Convert.ToInt32(row["ParentID"].ToString())==0)????????????????{
????????int?id=Convert.ToInt32(row["ID"].ToString());
????????this.Label1.Text+=@"var?t;?t=outlookbar.addtitle('"+row["text"].ToString()+"');";
????????addItem(id);????
????????????????}
????}
????this.Label1.Text+="</script>";????
}????
private?void?addItem(int?id)
{
????DataSet?ds=(DataSet)this.ViewState["ds"];
????foreach?(DataRow?row?in?ds.Tables[0].Rows)
????{
????if?(Convert.ToInt32(row["ParentID"].ToString())==id)
????????{
????this.Label1.Text+="outlookbar.additem('"+row["text"].ToString()+"',t,'"+row["URL"].ToString()+"');";
????????}
????}
}????
?
??????? 即可
??? (5) 此處需要注意的一項，就是最后一句中的row[“URL”]中為各菜單項所對應的連接，如果要令各小菜單項本身也是圖片以美化菜單，則可以把最后一句改成
this.Label1.Text+="outlookbar.additem('<img?src="+row["imageUrl"].ToString()+"?border=0>"+row["text"].ToString()+"',t,'"+row["URL"].ToString()+"');";
其中等于加入了<img src=…>這一句，這樣就可以在小菜單項前加入一些小的圖標來進行美化
(6)運行整個程序，首先會看到登陸頁面，分別輸入事先設計的三個用戶名進行登陸就會看到不同的菜單項
?
?
轉載于:https://www.cnblogs.com/xiaoleiking/archive/2011/09/19/2180945.html
總結
以上是生活随笔為你收集整理的利用JavaScript在ASP.NET中动态生成系统菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 利用cross join 构造大量测试数
- 下一篇： 前端开发学习二——由JSON和Objec