ASP.NET Tutorial/ASP.net Controls/TreeView — различия между версиями

Версия 15:30, 26 мая 2010

Содержание

1 Binding to an XML File
2 Complex tree view
3 Displaying a Site Map with a TreeView control.
4 Displaying TreeView check boxes.
5 Selecting a TreeView node.
6 Tree style with XML data
7 Tree view event
8 Tree view style
9 Using the TreeView Control

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>&nbsp;
    </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>

ASP.NET Tutorial/ASP.net Controls/TreeView — различия между версиями

Версия 15:30, 26 мая 2010

Содержание

Binding to an XML File

Complex tree view

Displaying a Site Map with a TreeView control.

Displaying TreeView check boxes.

Selecting a TreeView node.

Tree style with XML data

Tree view event

Tree view style

Using the TreeView Control

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Инструменты

Навигация

Текущая версия на 12:00, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Версия 15:30, 26 мая 2010 (просмотреть исходный код) (обсуждение) Следующая правка →
(нет различий)