（原创）ASP.NET + XML + DIV 构建动态导航菜单

用ASP.NET + XML+DIV 构建一个基于XML文件的动态导航菜单。其中菜单的背景是图片。

效果如下图，类似outlook菜单，点击某一个菜单，其他菜单隐藏。

一、首先找到三张菜单背景图片。

（分别是菜单顶边、菜单中间背景和菜单底边）

二、设计XML文件

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

</Menus>

</Menus>

</Menus>

</Menus>

</Menus>

</Menus>

</NavMenu>

三、设计嵌套DataList.

ASPX文件如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html>

<head>

<title>NavMenuBar</title>

</head>

<body MS_POSITIONING="GridLayout" topmargin="0" leftmargin="0" bgcolor="#ffffff" rightmargin="0"

scroll="no" onload="ShowFirst()">

<asp:datalist id="NavMenu_List" Width="100%" RepeatDirection="Vertical" DataKeyField="ID" Runat="server"

OnItemDataBound="MenuItem_ItemDataBound">

<div class='category cursor' id='Menu<%# ((DataRowView)Container.DataItem)["ID"]%>' onclick=shift('<%# ((DataRowView)Container.DataItem)["ID"]%>')>

<%# ((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%">

<%# ((DataRowView)Container.DataItem)["Text"]%>

</a>

<br>

</div>

</ItemTemplate>

</asp:datalist>

</ul>

</div>

</ItemTemplate>

</asp:datalist>

</form>

</body>

</html>

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

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

}

posted @ 2006-01-18 23:25 PowerProject-企业项目管理系统阅读(4017) 评论(9) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

（原创）ASP.NET + XML + DIV 构建动态导航菜单

公告