新建站点,然后从工具箱中找到导航栏部分,选择TreeView控件,拖进页面即可。这时候就可以直接对结点进行编辑了,点击编辑结点,出现的对话框很容易就可以添加父结点,子结点,子孙结点都可以直接进行编辑,只要在属性的Text 添上结点的内容即可。
比如下面经过编辑后的生成代码(这个仅仅是树形菜单的页面):
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<asp:TreeView ID="TreeView1" runat="server" ImageSet="Arrows">
<ParentNodeStyle Font-Bold="False" />
<HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
<SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px"
VerticalPadding="0px" />
<Nodes>
<asp:TreeNode Text="开发工具和语言" Value="开发工具和语言">
<asp:TreeNode Text="Visual Studio 文档" Value="Visual Studio 文档">
<asp:TreeNode Target ="rightframe" NavigateUrl="~/test1.aspx" Text ="Visual Studio 简介" Value ="Visual Studio 简介" >
<asp:TreeNode Text ="Visual Studio 技术讨论"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Target ="rightframe" NavigateUrl = "~/Default2.aspx" Text ="Visual C#" Value ="Visual C#" ></asp:TreeNode>
<asp:TreeNode Text ="Visual C++" Value ="Visual C++" ></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Visual Source Safe" Value="Visual Source Safe"></asp:TreeNode>
<asp:TreeNode Text="Visual Studio Team System" Value="Visual Studio Team System"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Enterprise Servers 和开发 " Value="Enterprise Servers 和开发 ">
<asp:TreeNode Text="Micrsoft Business Solutions" Value="Micrsoft Business Solutions">
</asp:TreeNode>
<asp:TreeNode Text="Enterprise Management" Value="Enterprise Management"></asp:TreeNode>
<asp:TreeNode Text="Windows Server 2003" Value="Windows Server 2003"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="移动和嵌入式开发" Value="移动和嵌入式开发">
<asp:TreeNode Target ="rightframe" NavigateUrl ="~/Default2.aspx" Text="嵌入式操作系统开发" Value="嵌入式操作系统开发"></asp:TreeNode>
<asp:TreeNode Target="rightframe" NavigateUrl ="~/test1.aspx" Text="Mobile Web Development" Value="Mobile Web Development"></asp:TreeNode>
<asp:TreeNode Text="Windows Mobile" Value="Windows Mobile"></asp:TreeNode>
<asp:TreeNode Text=".NET Compact Framwork" Value=".NET Compact Framwork"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text=".NET 开发" Value=".NET 开发">
<asp:TreeNode Text=".NET Framwork SDK 文档" Value=".NET Framwork SDK 文档"></asp:TreeNode>
<asp:TreeNode Text="Columns" Value="Columns"></asp:TreeNode>
<asp:TreeNode Text="Web Applications(asp.net)" Value="Web Applications(asp.net)"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
<NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" HorizontalPadding="5px"
NodeSpacing="0px" VerticalPadding="0px" />
</asp:TreeView>
</div>
</form>
</body>
</html>
注意了:
<asp:TreeNode Target ="rightframe" NavigateUrl="~/test1.aspx" Text ="Visual Studio 简介" Value ="Visual Studio 简介" > 是出现左右两个框架的,左边是树形菜单,右边是响应的页面。 这里的Target实现在哪个框架里显示。NavigateUrl="~/test1.aspx" 就是右边现实的页面,这个其实很简单的。
好了这个时候就可以在一个新的页面里实现左右两个框架然后分别在各自的框架里显示各自的页面就可以了,在页面的aspx 源码中添加
<frameset cols="20%,80%">
<frame src=Default.aspx name="leftframe"/>
<frame src=test1.aspx name="rightframe" />
</frameset>
哈哈,这个时候树形菜单就制作成功了。把这个页面设置成启动页面就可以了。