鲲鹏

C# asp.net

导航

ASP.NET + XML + DIV 构建动态导航菜单

Posted on 2009-07-23 19:59  昆鹏  阅读(543)  评论(0)    收藏  举报

一、首先找到三张菜单背景图片。
（分别是菜单顶边、菜单中间背景和菜单底边）


二、设计XML文件

<?xml version="1.0" encoding="utf-8" ?>
<NavMenu>

<Menus Text="个人助理" ID="1">
<MenuItem Text="我的首页" ImageUrl="../../Images/Menu/MyHomePage16.gif" NavigateUrl="../../Modules/Office/MyHomePage.aspx" />
<MenuItem Text="备 忘 录" ImageUrl="../../Images/Menu/MyMemo16.gif" NavigateUrl="../../Modules/Office/MyMemoList.aspx?id=0&amp;Day=0" />
<MenuItem Text="我的计划" ImageUrl="../../Images/Menu/MyTask16.gif" NavigateUrl="../../Modules/Office/MyToDo.aspx" />
<MenuItem Text="工作日志" ImageUrl="../../Images/Menu/MyLog16.gif" NavigateUrl="../../Modules/Office/MyBlogList.aspx" />
</Menus>

<Menus Text="业务管理" ID="2">
<MenuItem Text="案件登记" ImageUrl="../../Images/Menu/LawCaseAdd16.gif" NavigateUrl="../../Modules/CaseManagement/AddLawCase.aspx" />
<MenuItem Text="案件管理" ImageUrl="../../Images/Menu/Lawcaselist16.gif" NavigateUrl="../../Modules/CaseManagement/LawCaseList.aspx?Lawyer=No&amp;Type=No&amp;Phase=No" />
<MenuItem Text="案件查询" ImageUrl="../../Images/Menu/find.gif" NavigateUrl="../../Modules/CaseManagement/LawCaseQuery.aspx?Page=Lawyer" />
<MenuItem Text="案件统计" ImageUrl="../../Images/Menu/LawcaseReport16.gif" NavigateUrl="../../Modules/CaseManagement/LawCaseStat.aspx?Condition=Type" />
<MenuItem Text="冲突查询" ImageUrl="../../Images/Menu/mywatches16.gif" NavigateUrl="../../Modules/CaseManagement/ConflictQuery.aspx" />
</Menus>

<Menus Text="财务管理" ID="3">
<MenuItem Text="收支明细" ImageUrl="../../Images/Menu/details16.gif" NavigateUrl="../../Modules/Finance/IncomeList.aspx?IncomeType=All" />
<MenuItem Text="收支查询" ImageUrl="../../Images/Menu/find.gif" NavigateUrl="../../Modules/Finance/QueryIncome.aspx" />
<MenuItem Text="收支统计" ImageUrl="../../Images/Menu/LawcaseReport16.gif" NavigateUrl="../../Modules/Finance/IncomeStat.aspx?Condition=LegalFee" />
</Menus>

<Menus Text="客户管理" ID="4">
<MenuItem Text="客户登记" ImageUrl="../../Images/Menu/CustomerAdd16.gif" NavigateUrl="../../Modules/CustomerManagement/ShowCustomer.aspx?ReturnURL=List&amp;Type=New&amp;ID=0" />
<MenuItem Text="客户列表" ImageUrl="../../Images/Menu/CustomerList16.gif" NavigateUrl="../../Modules/CustomerManagement/CustomerList.aspx" />
<MenuItem Text="客户查询" ImageUrl="../../Images/Menu/mywatches16.gif" NavigateUrl="../../Modules/CustomerManagement/QueryCustomer.aspx" />
</Menus>

<Menus Text="法律法规" ID="5">
<MenuItem Text="法规列表" ImageUrl="../../Images/Menu/Details16.gif" NavigateUrl="../../Modules/LawDoc/LawDocList.aspx" />
<MenuItem Text="下载最新" ImageUrl="../../Images/Menu/find.gif" NavigateUrl="../../Modules/LawDoc/LawDocUpdate.aspx" />
</Menus>

<Menus Text="系统管理" ID="6">
<MenuItem Text="人员列表" ImageUrl="../../Images/Menu/UserList16.gif" NavigateUrl="../../Modules/SysManagement/LawyerList.aspx" />
<MenuItem Text="合同模板" ImageUrl="../../Images/Menu/Template16.gif" NavigateUrl="../../Modules/SysManagement/ContractTemplateList.aspx" />
<MenuItem Text="参数设置" ImageUrl="../../Images/Menu/SysConfig16.gif" NavigateUrl="../../Modules/SysManagement/SysConfig.aspx?XMLFile=CaseType" />
</Menus>


</NavMenu>

三、设计嵌套DataList.

ASPX文件如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>NavMenuBar</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<Link Rel="stylesheet" href="../../css/admin_css.css">
</head>
<body MS_POSITIONING="GridLayout" topmargin="0" leftmargin="0" bgcolor="#ffffff" rightmargin="0"
        scroll="no" onload="ShowFirst()">
<form id="Form1" method="post" runat="server">
<base target='main'>
<asp:datalist id="NavMenu_List" Width="100%" RepeatDirection="Vertical" DataKeyField="ID" Runat="server"
                OnItemDataBound="MenuItem_ItemDataBound">
<ItemTemplate>
<div class='category cursor' id='Menu<%# ((DataRowView)Container.DataItem)["ID"]%>' onclick=shift('<%# ((DataRowView)Container.DataItem)["ID"]%>')>
<img src="../../Images/menu/yellowdot.gif">&nbsp; <a href='#' target="_self">
<%# ((DataRowView)Container.DataItem)["Text"]%>
</a>
</div>
<div class='grid' id='<%# ((DataRowView)Container.DataItem)["ID"]%>' style="DISPLAY:none">
<ul>
<asp:datalist id="MenuItem_List" Runat="server" RepeatDirection="Vertical" Width="100%">
<ItemTemplate>
<div class='Item'>
<img src='<%# ((DataRowView)Container.DataItem)["ImageUrl"]%>'>&nbsp;&nbsp; <a href='<%# ((DataRowView)Container.DataItem)["NavigateUrl"]%>'>
<%# ((DataRowView)Container.DataItem)["Text"]%>
</a>
<br>
</div>
</ItemTemplate>
</asp:datalist>
</ul>
</div>
<div class="emptygrid"></div>
</ItemTemplate>
</asp:datalist>
</form>
</body>
</html>

四、鼠标点击要隐藏其他菜单

javascript 代码如下：

<script language='javascript'>
function shift(id)
{
var this_id = id;
var ID_Array = new Array("1","2", "3", "4", "5","6","7");
var objThis;
for (var i=0; i<ID_Array.length; i++)
{
        objThis = document.getElementById(ID_Array[i]);
if (this_id == ID_Array[i])
{
            objThis.style.display = 'inline';
        }
else
{
            objThis.style.display = 'none';
        }
    }
}
function ShowFirst()
{
    document.getElementById("1").style.display= 'inline';
}
</script>

五、后面的C#代码如下：

public class NavMenuBar : System.Web.UI.Page
{
        protected System.Web.UI.WebControls.DataList NavMenu_List;
        protected DataTable dt_TopMenu;
        protected DataTable dt_MenuItem;
        protected DataSet ds_NavMenu;
        protected string sCurrentMenuID;


        private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
if(!IsPostBack)
{
                sCurrentMenuID="1";
                ReadXMLMenu();
                BindDate_TopMenu();
            }
        }

        public void ReadXMLMenu()
{
//读菜单XML文件，分别放入到两张表中。
            string sID="0";  //临时记录菜单ID
            ds_NavMenu = new DataSet();
            dt_TopMenu = new DataTable();
            dt_MenuItem = new DataTable();

            DataRow dr_TopMenu;
            dt_TopMenu.Columns.Add(new DataColumn("ID",typeof(System.String)));
            dt_TopMenu.Columns.Add(new DataColumn("Text", typeof(System.String)));

            DataRow dr_MenuItem;
            dt_MenuItem.Columns.Add(new DataColumn("ParentID",typeof(System.String)));
            dt_MenuItem.Columns.Add(new DataColumn("Text", typeof(System.String)));
            dt_MenuItem.Columns.Add(new DataColumn("ImageUrl", typeof(System.String)));
            dt_MenuItem.Columns.Add(new DataColumn("NavigateUrl", typeof(System.String)));

            string xmlfile;
            xmlfile = Server.MapPath("../../") + "XMLData/NavMenu_Network.xml";    //这里以后可以任意更换，通过web.config
            XmlTextReader reader = new XmlTextReader(xmlfile);
while (reader.Read())
{
if(reader.NodeType == XmlNodeType.Element)
{
if (reader.Name=="Menus")
{
//读顶层菜单
                        dr_TopMenu = dt_TopMenu.NewRow();
                        sID = reader["ID"].ToString();
                        dr_TopMenu[0] = reader["ID"].ToString();
                        dr_TopMenu[1] = reader["Text"].ToString();
                        dt_TopMenu.Rows.Add(dr_TopMenu);
                    }
//然后读这个菜单下面的子菜单
else if (reader.Name=="MenuItem")
{
                        dr_MenuItem = dt_MenuItem.NewRow();
                        dr_MenuItem[0] = sID;
                        dr_MenuItem[1] = reader["Text"].ToString();
                        dr_MenuItem[2] = reader["ImageUrl"].ToString();
                        dr_MenuItem[3] = reader["NavigateUrl"].ToString();
                        dt_MenuItem.Rows.Add(dr_MenuItem);
                    }
                }
            }
            reader.Close();

            ds_NavMenu.Tables.Add(dt_TopMenu);
            ds_NavMenu.Tables.Add(dt_MenuItem);
            DataColumn parentCol;
            DataColumn childCol;
            parentCol = dt_TopMenu.Columns["ID"];
            childCol = dt_MenuItem.Columns["ParentID"];
            DataRelation rel;
            rel = new DataRelation("MenuRelation", parentCol, childCol);
// Add the relation to the DataSet.
            ds_NavMenu.Relations.Add(rel);

        }

        public void BindDate_TopMenu()
{
            NavMenu_List.DataSource = dt_TopMenu;
            NavMenu_List.DataBind();
        }

        public void MenuItem_ItemDataBound(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)
{
//Only consume the items in the parent datalist
//pertinent to nesting
if (e.Item.ItemType == ListItemType.Item ||
                e.Item.ItemType == ListItemType.AlternatingItem)
{
//Now that the nested repeater is in scope, find it,
//cast it, and create a child view from
//the datarelation name, and specify that view as the
//datasource.  Then bind the nested repeater!
                string sMenuID = NavMenu_List.DataKeys[e.Item.ItemIndex].ToString();
                DataList MenuItem_List =     (DataList)e.Item.FindControl("MenuItem_List");
if (MenuItem_List != null)
{
                    MenuItem_List.DataSource =
                        ((DataRowView)e.Item.DataItem).CreateChildView("MenuRelation");
                    MenuItem_List.DataBind();
                }

            }
        }

        #region Web 窗体设计器生成的代码
        override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
            InitializeComponent();
            base.OnInit(e);
        }

/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
        private void InitializeComponent()
{   
this.Load += new System.EventHandler(this.Page_Load);
        }
        #endregion
    }