ASP.NET Tutorial/ASP.net Controls/TreeView
Содержание
Binding to an XML File
File: Data.xml
<movies>
<action>
<StarWars />
<IndependenceDay />
</action>
<horror>
<Jaws />
<NightmareBeforeChristmas />
</horror>
</movies>
File: TreeViewXml.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>TreeView XML</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView
id="TreeView1"
DataSourceID="srcMovies"
Runat="server" />
<asp:XmlDataSource
id="srcMovies"
DataFile="~/Data.xml"
Runat="server" />
</div>
</form>
</body>
</html>
Complex tree view
File: Data.xml
<movies>
<category id="category1" text="Action">
<movie id="movie1" text="Star Wars" />
<movie id="movie2" text="Independence Day" />
</category>
<category id="category2" text="Horror">
<movie id="movie3" text="Jaws" />
<movie id="movie4" text="Nightmare Before Christmas" />
</category>
</movies>
File: TreeViewXMLComplex.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>TreeView XML Complex</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView
id="TreeView1"
DataSourceID="srcMovies"
Runat="server">
<DataBindings>
<asp:TreeNodeBinding
DataMember="category"
TextField="text"
ValueField="id" />
<asp:TreeNodeBinding
DataMember="movie"
TextField="text"
ValueField="id" />
</DataBindings>
</asp:TreeView>
<asp:XmlDataSource
id="srcMovies"
DataFile="~/Data.xml"
Runat="server" />
</div>
</form>
</body>
</html>
Displaying a Site Map with a TreeView control.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>TreeView Site Map</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView
id="TreeView1"
DataSourceID="srcSiteMap"
Runat="server" />
<asp:SiteMapDataSource
id="srcSiteMap"
Runat="server" />
</div>
</form>
</body>
</html>
File: Web.sitemap
<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" >
<siteMapNode
url="Default.aspx"
title="Home"
description="The Home Page">
<siteMapNode
url="Products/Default.aspx"
title="Our Products"
description="Products that we offer">
<siteMapNode
url="Products/FirstProduct.aspx"
title="First Product"
description="The description of the First Product" />
<siteMapNode
url="Products/SecondProduct.aspx"
title="Second Product"
description="The description of the Second Product" />
</siteMapNode>
<siteMapNode
url="Services/Default.aspx"
title="Our Services"
description="Services that we offer">
<siteMapNode
url="Services/FirstService.aspx"
title="First Service"
description="The description of the First Service"
metaDescription="The first service" />
<siteMapNode
url="Services/SecondService.aspx"
title="Second Service"
description="The description of the Second Service" />
</siteMapNode>
</siteMapNode>
</siteMap>
Displaying TreeView check boxes.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
protected void btnSubscribe_Click(object sender, EventArgs e)
{
foreach (TreeNode node in TreeView1.CheckedNodes)
bltSubscribed.Items.Add(node.Text);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>TreeView CheckBoxes</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Select the Newsgroups which you
would like to join:
<br />
<asp:TreeView
id="TreeView1"
ShowCheckBoxes="Leaf"
Runat="server">
<Nodes>
<asp:TreeNode
Text="Programming">
<asp:TreeNode Text="ASP.NET" />
<asp:TreeNode Text="JAVA" />
<asp:TreeNode Text="Cold Fusion" />
</asp:TreeNode>
<asp:TreeNode
Text="Sports">
<asp:TreeNode Text="Baseball" />
<asp:TreeNode Text="Hockey" />
<asp:TreeNode Text="Football" />
</asp:TreeNode>
</Nodes>
</asp:TreeView>
<br />
<asp:Button
id="btnSubscribe"
Text="Subscribe"
OnClick="btnSubscribe_Click"
Runat="server" />
<hr />
You selected:
<asp:BulletedList
id="bltSubscribed"
EnableViewState="false"
Runat="server" />
</div>
</form>
</body>
</html>
Selecting a TreeView node.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
{
lblMessage.Text = TreeView1.SelectedValue;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>TreeView Value</title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<asp:TreeView
id="TreeView1"
OnSelectedNodeChanged="TreeView1_SelectedNodeChanged"
Runat="server" >
<Nodes>
<asp:TreeNode
Text="Home"
Value="Home">
<asp:TreeNode
Text="Products">
<asp:TreeNode
Text="First Product"
Value="FirstProduct" />
<asp:TreeNode
Text="Second Product"
Value="SecondProduct" />
</asp:TreeNode>
<asp:TreeNode
Text="Services">
<asp:TreeNode
Text="First Service"
Value="FirstService" />
<asp:TreeNode
Text="Second Service"
Value="SecondService" />
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
<div class="content">
You selected:
<asp:Label
id="lblMessage"
EnableViewState="false"
Runat="server" />
</div>
</form>
</body>
</html>
Tree style with XML data
<%@ page language="VB" %>
<script runat="server">
</script>
<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form runat="server">
<asp:treeview id="TreeView1"
runat="server"
font-underline="False"
datasourceid="XmlDataSource1"
font-names="Tahoma"
font-size="8pt"
font-italic="False"
font-bold="False"
imageset="XP_Explorer"
forecolor="Black"
nodeindent="15"
autogeneratebindings="False">
<selectednodestyle backcolor="#B5B5B5"
font-underline="False"
font-italic="False"
font-bold="False">
</selectednodestyle>
<hovernodestyle forecolor="#6666AA"
font-underline="True"
font-italic="False"
font-bold="False">
</hovernodestyle>
<bindings>
<asp:treenodebinding value="My Bookstore" depth="0" text="My Bookstore">
</asp:treenodebinding>
<asp:treenodebinding datamember="genre" textfield="name" depth="1">
</asp:treenodebinding>
<asp:treenodebinding datamember="book" textfield="isbn" depth="2">
</asp:treenodebinding>
</bindings>
<parentnodestyle font-underline="False" font-italic="False" font-bold="False">
</parentnodestyle>
<leafnodestyle font-underline="False" font-italic="False" font-bold="False">
</leafnodestyle>
<nodestyle forecolor="Black"
verticalpadding="2"
horizontalpadding="2"
font-underline="False"
font-names="Tahoma"
font-size="8pt"
font-italic="False"
font-bold="False">
</nodestyle>
<rootnodestyle font-underline="False" font-italic="False" font-bold="False">
</rootnodestyle>
</asp:treeview>
<asp:xmldatasource id="XmlDataSource1" runat="server" datafile="Data.xml">
</asp:xmldatasource>
</form>
</body>
</html>
File: Data.xml
<?xml version="1.0" standalone="yes"?>
<bookstore>
<genre name="fiction">
<book ISBN="10-000000-001">
<title>title 1</title>
<price>12.95</price>
<comments>
<userComment rating="4">
comment 1
</userComment>
<userComment rating="2">
comment 2
</userComment>
</comments>
</book>
</genre>
</bookstore>
Tree view event
<%@ page language="C#" %>
<%@ import namespace="System.IO" %>
<script runat="server" language="c#">
void TreeView1_TreeNodePopulate(object sender, System.Web.UI.WebControls.TreeNodeEventArgs e)
{
if (e.Node.ChildNodes.Count == 0) {
this.LoadChildNodes(e.Node);
}
}
private void LoadChildNodes(TreeNode node) {
DirectoryInfo directory;
if (node.ValuePath.Length == 0) {
directory = new DirectoryInfo(node.Value);
} else {
directory = new DirectoryInfo(node.ValuePath);
}
foreach(DirectoryInfo subDirectory in directory.GetDirectories()) {
TreeNode subNode = new TreeNode(subDirectory.Name);
subNode.PopulateOnDemand = true;
subNode.SelectAction = TreeNodeSelectAction.SelectExpand;
node.ChildNodes.Add(subNode);
}
}
</script>
<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form runat="server">
<asp:treeview id="TreeView1"
runat="server"
font-underline="False"
font-names="Tahoma"
font-size="8pt"
font-italic="False"
font-bold="False"
imageset="XP_Explorer"
forecolor="Black"
nodeindent="15"
ontreenodepopulate="TreeView1_TreeNodePopulate">
<selectednodestyle backcolor="#B5B5B5"
font-underline="False"
font-italic="False"
font-bold="False">
</selectednodestyle>
<hovernodestyle forecolor="#6666AA"
font-underline="True"
font-italic="False"
font-bold="False">
</hovernodestyle>
<parentnodestyle font-underline="False" font-italic="False" font-bold="False">
</parentnodestyle>
<leafnodestyle font-underline="False" font-italic="False" font-bold="False">
</leafnodestyle>
<nodes>
<asp:treenode checked="True"
value="c:\"
populateondemand="True"
showcheckbox="False"
selectaction="SelectExpand"
selected="True"
text="Drive C:\">
</asp:treenode>
</nodes>
<nodestyle forecolor="Black"
verticalpadding="2"
horizontalpadding="2"
font-underline="False"
font-names="Tahoma"
font-size="8pt"
font-italic="False"
font-bold="False">
</nodestyle>
<rootnodestyle font-underline="False" font-italic="False" font-bold="False">
</rootnodestyle>
</asp:treeview>
</form>
</body>
</html>
Tree view style
<%@ page language="VB" %>
<script runat="server">
</script>
<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form runat="server">
<asp:treeview id="TreeView1"
runat="server"
font-underline="False"
font-names="Verdana"
font-size="8pt"
font-italic="False"
font-bold="False"
imageset="MSDN"
forecolor="#000000"
nodeindent="16"
backcolor="#EEEEEE">
<selectednodestyle verticalpadding="1"
bordercolor="#999999"
horizontalpadding="3"
backcolor="#FFFFFF"
font-underline="False"
font-italic="False"
font-bold="False"
borderwidth="1px"
borderstyle="Solid">
</selectednodestyle>
<hovernodestyle verticalpadding="1"
bordercolor="#999999"
horizontalpadding="3"
backcolor="#C7C7C7"
font-underline="True"
font-italic="False"
font-bold="False"
borderwidth="1px"
borderstyle="Solid">
</hovernodestyle>
<parentnodestyle font-underline="False" font-italic="False" font-bold="False">
</parentnodestyle>
<leafnodestyle font-underline="False" font-italic="False" font-bold="False">
</leafnodestyle>
<nodes>
<asp:treenode checked="True"
value="My Root Element"
expanded="True"
text="My Root Element">
<asp:treenode value="My Child Element" text="My Child Element">
</asp:treenode>
<asp:treenode checked="True"
value="Another Child"
expanded="True"
showcheckbox="False"
selectaction="SelectExpand"
selected="True"
text="Another Child">
<asp:treenode value="A Childs Child"
selectaction="None"
text="A Childs Child">
</asp:treenode>
</asp:treenode>
</asp:treenode>
</nodes>
<nodestyle forecolor="#000000"
verticalpadding="2"
nodespacing="1"
horizontalpadding="4"
font-underline="False"
font-names="Verdana"
font-size="8pt"
font-italic="False"
font-bold="False">
</nodestyle>
<rootnodestyle font-underline="False" font-italic="False" font-bold="False">
</rootnodestyle>
</asp:treeview>
</form>
</body>
</html>
Using the TreeView Control
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>TreeView Declare</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView
id="TreeView1"
Runat="server">
<Nodes>
<asp:TreeNode
Text="Home"
NavigateUrl="~/Default.aspx">
<asp:TreeNode
Text="Products">
<asp:TreeNode
Text="First Product"
NavigateUrl="~/Products/FirstProduct.aspx" />
<asp:TreeNode
Text="Second Product"
NavigateUrl="~/Products/SecondProduct.aspx" />
</asp:TreeNode>
<asp:TreeNode
Text="Services">
<asp:TreeNode
Text="First Service"
NavigateUrl="~/Services/FirstService.aspx" />
<asp:TreeNode
Text="Second Service"
NavigateUrl="~/Services/SecondService.aspx" />
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
</form>
</body>
</html>