如何从数据库根据用户权限绑定左侧可展开/折叠的纵向菜单？ -- ASP.NET网站开发

我需要实现从数据库根据用户权限在网站页面左侧绑定用户的菜单，期望实现如下网页实现的效果（请复制存为.htm文件看效果），每个用户的菜单根据角色权限会有不同，请大神教教我该如何绑定这样的的菜单呢？页面效果：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="VerticalMenuDemo.aspx.cs" Inherits="CarManagement.VerticalMenuDemo" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
 font-family: arial, 宋体, serif;
 font-size:12px;
 charset:GB2312;
}
#nav {
 width:180px;
    line-height: 24px; 
 list-style-type: none;
 text-align:left;
    /*定义整个ul菜单的行高和背景色*/
}
/*==================一级目录===================*/
#nav a {
 width: 160px; 
 display: block;
 padding-left:20px;
 /*Width(一定要)，否则下面的Li会变形*/
}
#nav li {
 background:#CCC; /*一级目录的背景色*/
 border-bottom:#FFF 1px solid; /*下面的一条白边*/
 float:left;
 /*float：left,本不应该设置，但由于在Firefox不能正常显示
 继承Nav的width,限制宽度，li自动向下延伸*/
}
#nav li a:hover{
 background:#CC0000; /*一级目录onMouseOver显示的背景色*/
}
#nav a:link  {
 color:#666; text-decoration:none;
}
#nav a:visited  {
 color:#666;text-decoration:none;
}
#nav a:hover  {
 color:#FFF;text-decoration:none;font-weight:bold;
}
/*==================二级目录===================*/
#nav li ul {
 list-style:none;
 text-align:left;
}
#nav li ul li{ 
 background: #EBEBEB; /*二级目录的背景色*/
}
#nav li ul a{
         padding-left:20px;
         width:160px;
 /* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/
}
/*下面是二级目录的链接样式*/
#nav li ul a:link  {
 color:#666; text-decoration:none;
}
#nav li ul a:visited  {
 color:#666;text-decoration:none;
}
#nav li ul a:hover {
 color:#F3F3F3;
 text-decoration:none;
 font-weight:normal;
 background:#CC0000;
 /* 二级onmouseover的字体颜色、背景色*/
}
/*==============================*/
#nav li:hover ul {
 left: auto;
}
#nav li.sfhover ul {
 left: auto;
}
#content {
 clear: left; 
}
#nav ul.collapsed {
 display: none;
}
-->
#PARENT{
 width:300px;
 padding-left:20px;
}
</style>
<div id="PARENT">
    <ul id="nav">
        <li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">我的网站</a>
             <ul id="ChildMenu1" class="collapsed">
             <li><a href="#">网页教学网</a></li>
             <li><a href="#">管理</a></li>
             <li><a href="#">网页教学网</a></li>
             <li><a href="#">内部教学网</a></li>
             </ul>
        </li>
        <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帐务</a>
            <ul id="ChildMenu2" class="collapsed">
                <li><a href="#">支付</a></li>
                <li><a href="#">网上支付</a></li>
                <li><a href="#">登记汇款</a></li>
                <li><a href="#">在线招领</a></li>
                <li><a href="#">历史帐务</a></li>
            </ul>
        </li>
        <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">人事管理</a>
             <ul id="ChildMenu3" class="collapsed">
                 <li><a href="#">人员目录</a></li>
                 <li><a href="#">薪酬管理</a></li>
                 <li><a href="#">招聘管理</a></li>
             </ul>
        </li>
        <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">网站管理</a>
             <ul id="ChildMenu4" class="collapsed">
                 <li><a href="#">用户登录</a></li>
                 <li><a href="#">基础管理</a></li>
                 <li><a href="#">其他管理</a></li>
             </ul>
        </li>
    </ul>
</div>
<script type="text/javascript"><!--
    var LastLeftID = "";
    function menuFix() {
        var obj = document.getElementById("nav").getElementsByTagName("li");        for (var i = 0; i < obj.length; i++) {
            obj[i].onmouseover = function () {
                this.className += (this.className.length > 0 ? " " : "") + "sfhover";
            }
            obj[i].onMouseDown = function () {
                this.className += (this.className.length > 0 ? " " : "") + "sfhover";
            }
            obj[i].onMouseUp = function () {
                this.className += (this.className.length > 0 ? " " : "") + "sfhover";
            }
            obj[i].onmouseout = function () {
                this.className = this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
            }
        }
    }
    function DoMenu(emid) {
        var obj = document.getElementById(emid);
        obj.className = (obj.className.toLowerCase() == "expanded" ? "collapsed" : "expanded");
        if ((LastLeftID != "") && (emid != LastLeftID)) //关闭上一个Menu
        {
            document.getElementById(LastLeftID).className = "collapsed";
        }
        LastLeftID = emid;
    }
    function GetMenuID() {
        var MenuID = "";
        var _paramStr = new String(window.location.href);
        var _sharpPos = _paramStr.indexOf("#");        if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1) {
            _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
        }
        else {
            _paramStr = "";
        }        if (_paramStr.length > 0) {
            var _paramArr = _paramStr.split("&");
            if (_paramArr.length > 0) {
                var _paramKeyVal = _paramArr[0].split("=");
                if (_paramKeyVal.length > 0) {
                    MenuID = _paramKeyVal[1];
                }
            }
            /*
            if (_paramArr.length>0)
            {
            var _arr = new Array(_paramArr.length);
            }
  
            //取所有#后面的，菜单只需用到Menu
            //for (var i = 0; i < _paramArr.length; i++)
            {
            var _paramKeyVal = _paramArr[i].split('=');
   
            if (_paramKeyVal.length>0)
            {
            _arr[_paramKeyVal[0]] = _paramKeyVal[1];
            }  
            }
            */
        }        if (MenuID != "") {
            DoMenu(MenuID)
        }
    }
    GetMenuID(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果
    menuFix();
--></script>
<br/>
    </div>
    </form>
</body>
</html>

解决方案 »

  1.   

    前台展示简单，用easy ui或其他框架提供的控件就行
    主要是后台数据库设计
      

  2.   

    后台用string，把html代码结合数据库数据写出来，然后打印到前台就好啦
      

  3.   

    ------------------------------------------------------
    后台数据设计我没有问题，就是在前段如何实现存在问题。
    稍微研究了一下easy ui，这个easy ui能免费试用吗？还是需要购买授权的？
    谢谢大侠的指教！
      

  4.   


    有免费版本，也有商业版本。
    具体看这里
    http://www.jeasyui.net/download/
      

  5.   

    你的菜单不就是 <ul id="nav">
    </ul>里边的 <li> 么？如果要用服务器控件，你可以使用 Repeater 控件。
      

  6.   

    谢谢指点。厚着脸皮请教sp1234，用户A登陆后，校验到他又如下系统权限，在前后台页面中应该如何编程呢？能帮忙给一下前后台的代码吗？
    另外，请注意，我需要这个菜单能实现我在1楼贴出的html页面所演示的效果，点击主菜单（如“我的账户”）展开其子菜单，再次点击主菜单则收起其子菜单。
    MenuID Text Description ParentID NavigateUrl
    1 首页 首页 NULL frmHome.aspx
    2 我的帐务 我的帐务 NULL #
    3 人事管理 人事管理 NULL #
    4 网站管理 网站管理 NULL #
    6 网上支付 网上支付 2 Masters/frmPriceTypeMst.aspx
    7 登记汇款 登记汇款 2 Masters/frmSeasonCodeMst.aspx
    8 在线招领 在线招领 2 Masters/frmSKUScreen.aspx
    12 历史帐务 历史帐务 2 Masters/frmAreaMaster.aspx
    16 薪酬管理 薪酬管理 3 Transactions/frmMASearch.aspx
    17 基础管理 基础管理 4 Transactions/frmGlobalReport.aspx
    19 报表 报表 NULL #
    20 支付报表 支付报表 19 Admin/frmReportHeaders.aspx
    22 工资报表 工资报表 19 Admin/frmStatusTypeMst.aspx非常感谢！
      

  7.   

    后台代码：
    public string menu ="<li><a href=\"#Menu=ChildMenu1\"  onclick=\"DoMenu('ChildMenu1')\">我的网站</a>";
    menu +="<ul id=\"ChildMenu1\" class=\"collapsed\"><li><a href=\"#\">网页教学网</a></li> </ul></li>";前台：
    <ul id="nav">
    <%=menu %>
    </ul>
      

  8.   

    以这个古老的 asp.net 2.0 教程为例，它使用了一个 asp.net 站点地图控件（SiteMapDataSource）作为 Repeater 的数据源。首先做到将数据源与界面分离开来、不相互纠结，你下一步才能去单独考虑如何在“站点地图”相关事件机制内部去根据权限产生不同数据。首先要熟悉这个“架子”，然后是数据。
      

  9.   

    你首先要反复研究范例，把教程上面的asp.net 设计模式熟练了，再考虑自己的问题。这就好比练自由搏击，如果很浮躁地“学一个招式就想打人”，那么你还不如不学（随便一个没有学过的小流氓就能打你），省得招惹是非。