利用JavaScript在ASP.NET中动态生成系统菜单
用戶在登陸一個系統(tǒng)后通常會因為權限的不同而使用不同的系統(tǒng)功能，我們在實現(xiàn)用戶使用的菜單項時有兩種選擇，一是列出全部系統(tǒng)菜單項，根據(jù)用戶的權限禁用一部分菜單，二是根據(jù)權限動態(tài)加載菜單，這樣只要列出的菜單都可以使用，而不同用戶登陸后看到的菜單項排列是不同的。在這里我使用了第二種方式，利用JavaScript和SQL Server2000在ASP.NET中實現(xiàn)了一個類似于論壇菜單的動態(tài)加載功能。
整個菜單的界面如右圖所示：?
上面共有四個大菜單項，每個菜單項內又有若干個小項，我們所要實現(xiàn)的就是讓不同的用戶登陸后所看到的大小菜單項都是不同的。
(1)首先我們進行數(shù)據(jù)庫方面的設計。由于不同用戶對應不同的權限，而不同的權限對應不同的菜單，所以數(shù)據(jù)庫方面要設計三個表：
表Users
| 列名 | 數(shù)據(jù)類型及長度 | 說明 |
| UserName | Varchar(50) | ?主鍵，用戶名 |
| RoleName | Varchar(50) | 角色名 |
此表用于記錄所有的用戶，每個用戶可以賦予一個角色
表Roles
| 列名 | 數(shù)據(jù)類型及長度 | 備注 |
| RoleName | Varchar(50) | 主鍵 |
| FunctionID | Int | 主鍵，功能點序號 |
此表是角色表，包括角色名稱和功能點編號（功能點對應著界面內的菜單項）。由于一個角色可以對應多個功能點，而一個功能點也可以由多個角色使用，雙方是多對多關系，所以此表設置聯(lián)合主鍵。
?
表Fun
| 列名 | 數(shù)據(jù)類型及長度 | 備注 |
| ID | Int(4) | 主鍵，功能點序號 |
| ParentID | Int(4) | 父功能點序號 |
| Text | Varchar(30) | 功能點的文字描述 |
| URL | Varchar(50) | 點擊菜單后轉向的頁面地址 |
| ImageUrl | Varchar(30) | 菜單項圖片本身的地址 |
此表是功能點信息表，由于菜單包括主菜單項和子菜單項，因此每個功能點要記錄他的父功能點編號，主菜單的父功能點則為0，由于點擊菜單后要進行頁面的跳轉，因此要記錄各功能點對應的頁面的URL，同時為了美化菜單我們也可以在菜單上加一下小圖標，這個可以通過ImageUrl來保存圖標的位置。
這樣數(shù)據(jù)庫部分已經(jīng)設計完畢，接下來我們先要對數(shù)據(jù)庫填充數(shù)據(jù)，這里首先看Fun表，該表填充后的結果如下（其中URL和ImageUrl分別存儲頁面和圖標的地址，此處省略）
| ID | ParentID | Text |
| 1 | 0 | 我的社區(qū) |
| 2 | 0 | .NET技術社區(qū) |
| 3 | 0 | 休閑區(qū) |
| 4 | 0 | 版主管理 |
| 5 | 1 | 我的問題 |
| 6 | 1 | 我得分的問題 |
| 7 | 1 | 我參與的問題 |
| 8 | 1 | 我的專家分 |
| 9 | 2 | C#編程 |
| 10 | 2 | ASP.NET開發(fā) |
| 11 | 2 | WinForm開發(fā) |
| 12 | 2 | .NET Framework |
| 13 | 3 | 灌水樂園 |
| 14 | 3 | 貼圖天地 |
| 15 | 4 | 查詢帖子 |
| 16 | 4 | 回復管理 |
| 17 | 4 | 封殺帳號 |
這樣已經(jīng)把菜單中全部的功能點填充完畢，然后開始填充表Roles的數(shù)據(jù)這里非常簡單，只要根據(jù)事先設計的角色名和可以使用的功能點進行填充就可以了。最后在Users表中添加三個帳號用于測試，此處將后兩個表的內容統(tǒng)一列出
| 帳號（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("我的社區(qū)")
????????outlookbar.show()
????????</SCRIPT>
????????<FONT?face="宋體"></FONT>
????????</TD>
??????</TR>
????</TBODY>
??</TABLE>
</form>
?????? 這里面有一點要注意，就是上面的<SCRIPT>locatefold("我的社區(qū)") 這一句必須把“我的社區(qū)”改成你自己的菜單的第一項，而且這個是必須有的，否則JAVASCRIPT將無法正確寫出其他的菜單項。?
（4）轉入WebForm1.aspx.cs頁面
先定義一個變量
private string name;
在page_load中加入
name=Session["UserName"].ToString();//獲取用戶名
if(!IsPostBack)
{????????
????SqlConnection?conn=new?SqlConnection();
????conn.ConnectionString=…//連接數(shù)據(jù)庫
????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 构造大量测试数
- 下一篇： [译]WPF 应用程序和MVVM设计模式