Binding to Hierarchical Data

Switch View

Binding to Hierarchical Data

Collapse All

Language Filter

This page is specific to

Microsoft Visual Studio 2008/.NET Framework 3.5

Other versions are also available for the following:

ASP.NET

Binding to Hierarchical Data

Data source controls can work with either tabular data (table-based or relational data) or hierarchical data, or both. The SqlDataSource and ObjectDataSource controls are examples of data source controls that work with tabular data. ASP.NET also includes two data source controls that make it easy to bind to hierarchical data: the XmlDataSource control, which works with XML from a file or a string, and the SiteMapDataSource control, which works with site navigation data (which by default is maintained as XML data). Hierarchical data source controls are used in read-only scenarios to display data.

This topic provides more information about binding data-bound controls to a hierarchical data source. For additional information on the XmlDataSource and SiteMapDataSource controls, see XmlDataSource Web Server Control Overview and SiteMapDataSource Web Server Control Overview.

Binding a Hierarchical Control to XML Data

XML is intrinsically hierarchical in structure, and can be displayed in ASP.NET Web pages using hierarchical data-bound controls such as the TreeView or Menu control. You can bind to a hierarchical data source control by setting the hierarchical control's DataSourceID property to the ID of a XmlDataSource or SiteMapDataSource control.

The following code example shows a TreeView control bound to an XmlDataSource control. The XML data is filtered using an XPath query.

Visual Basic

<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

Sub SelectRegion(sender As Object, e As EventArgs)
  If RegionDropDownList.SelectedValue = "(Show All)" Then
    PeopleDataSource.XPath = "/People/Person"
  Else
    Dim selectedValue As String = ""

    Select Case RegionDropDownList.SelectedValue
      Case "CA"
        selectedValue = "CA"
      Case "HI"
        selectedValue = "HI"
      Case "WA"
        selectedValue = "WA"
      Case Else
        ' Invalid value.
    End Select

    PeopleDataSource.XPath = "/People/Person[Address/Region='" & selectedValue & "']"
  End If

  PeopleTreeView.DataBind()
End Sub

</script>

<html  >
  <head runat="server">
    <title>ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
      <table border="0" cellpadding="3">
        <tr>
          <td valign="top">
            <b>Select Region:</b>
            <asp:DropDownList runat="server" id="RegionDropDownList" AutoPostBack="True"
                              OnSelectedIndexChanged="SelectRegion">                              
              <asp:ListItem Selected="True">(Show All)</asp:ListItem>
              <asp:ListItem>CA</asp:ListItem>
              <asp:ListItem>HI</asp:ListItem>
              <asp:ListItem>WA</asp:ListItem>
            </asp:DropDownList>
          </td>
          <td valign="top">
            <asp:XmlDataSource
              id="PeopleDataSource"
              runat="server"
              XPath="/People/Person"
              DataFile="~/App_Data/people.xml" />

            <asp:TreeView
              id="PeopleTreeView"
              runat="server"
              DataSourceID="PeopleDataSource">
              <DataBindings>
                <asp:TreeNodeBinding DataMember="LastName"    TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="FirstName"   TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="Street"      TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="City"        TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="Region"      TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="ZipCode"     TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="Title"       TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="Description" TextField="#InnerText" />
              </DataBindings>
            </asp:TreeView>
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

void SelectRegion(object sender, EventArgs e)
{
  if (RegionDropDownList.SelectedValue == "(Show All)")
    PeopleDataSource.XPath = "/People/Person";
  else
  {
    string selectedValue = "";

    switch (RegionDropDownList.SelectedValue)
    {
      case "CA":
        selectedValue = "CA";
        break;
      case "HI":
        selectedValue = "HI";
        break;
      case "WA":
        selectedValue = "WA";
        break;
      default:
        // Invalid value.
        break;
    }

    PeopleDataSource.XPath = "/People/Person[Address/Region='" + selectedValue + "']";
  }

  PeopleTreeView.DataBind();
}

</script>

<html  >
  <head runat="server">
    <title>ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
      <table border="0" cellpadding="3">
        <tr>
          <td valign="top">
            <b>Select Region:</b>
            <asp:DropDownList runat="server" id="RegionDropDownList" AutoPostBack="True"
                              OnSelectedIndexChanged="SelectRegion">                              
              <asp:ListItem Selected="True">(Show All)</asp:ListItem>
              <asp:ListItem>CA</asp:ListItem>
              <asp:ListItem>HI</asp:ListItem>
              <asp:ListItem>WA</asp:ListItem>
            </asp:DropDownList>
          </td>
          <td valign="top">
            <asp:XmlDataSource
              id="PeopleDataSource"
              runat="server"
              XPath="/People/Person"
              DataFile="~/App_Data/people.xml" />

            <asp:TreeView
              id="PeopleTreeView"
              runat="server"
              DataSourceID="PeopleDataSource">
              <DataBindings>
                <asp:TreeNodeBinding DataMember="LastName"    TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="FirstName"   TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="Street"      TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="City"        TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="Region"      TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="ZipCode"     TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="Title"       TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="Description" TextField="#InnerText" />
              </DataBindings>
            </asp:TreeView>
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

Binding a Tabular Control to XML Data

While the XmlDataSource control is used primarily to expose XML data to hierarchical data-bound controls such as the TreeView and Menu controls, you can also bind tabular data-bound controls such as a GridView or DataList control to the XmlDataSource control.

When you bind a tabular data-bound control to the XmlDataSource control, the data-bound control renders only the first level of the XML hierarchy. However, in a data-bound control template, you can also use the XPath and XPathSelect data-binding methods to bind to specific elements within the XML hierarchy. The XPath data-binding method returns a value from a node or an attribute anywhere in the hierarchy. The XPathSelect method returns a list of nodes that match an XPath expression, which the tabular data control can work with as if they were a collection of data records.

For more information and examples, see Binding a Tabular Control to the XmlDataSource Control.

Other Forms of Hierarchical Data

In addition to binding controls to a XmlDataSource control as shown in this topic, you can also bind a hierarchical control to a sitemap file. For more information, see ASP.NET Site Maps. The following code example shows how to bind a Menu control to a SiteMapDataSource control.

Visual Basic

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  >

  <!-- For the hover styles of the Menu control to  -->
  <!-- work correctly, you must include this head   -->
  <!-- element.                                     -->
  <head runat="server">
    <title>Menu DataBinding Example</title>
</head>

  <body>
    <form id="form1" runat="server">

      <h3>Menu DataBinding Example</h3>

      <!-- Bind the Menu control to a SiteMapDataSource control.  -->
      <asp:menu id="NavigationMenu"
        disappearafter="2000"
        staticdisplaylevels="2"
        staticsubmenuindent="10" 
        orientation="Vertical"
        font-names="Arial" 
        target="_blank"
        datasourceid="MenuSource"   
        runat="server">

        <staticmenuitemstyle backcolor="LightSteelBlue"
          forecolor="Black"/>
        <statichoverstyle backcolor="LightSkyBlue"/>
        <dynamicmenuitemstyle backcolor="Black"
          forecolor="Silver"/>
        <dynamichoverstyle backcolor="LightSkyBlue"
          forecolor="Black"/>

      </asp:menu>

      <asp:SiteMapDataSource id="MenuSource"
        runat="server"/>        

    </form>
  </body>
</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  >

  <!-- For the hover styles of the Menu control to  -->
  <!-- work correctly, you must include this head   -->
  <!-- element.                                     -->
  <head runat="server">
    <title>Menu DataBinding Example</title>
</head>

  <body>
    <form id="form1" runat="server">

      <h3>Menu DataBinding Example</h3>

      <!-- Bind the Menu control to a SiteMapDataSource control.  -->
      <asp:menu id="NavigationMenu"
        disappearafter="2000"
        staticdisplaylevels="2"
        staticsubmenuindent="10" 
        orientation="Vertical"
        font-names="Arial" 
        target="_blank"
        datasourceid="MenuSource"   
        runat="server">

        <staticmenuitemstyle backcolor="LightSteelBlue"
          forecolor="Black"/>
        <statichoverstyle backcolor="LightSkyBlue"/>
        <dynamicmenuitemstyle backcolor="Black"
          forecolor="Silver"/>
        <dynamichoverstyle backcolor="LightSkyBlue"
          forecolor="Black"/>

      </asp:menu>

      <asp:SiteMapDataSource id="MenuSource"
        runat="server"/>        

    </form>
  </body>
</html>

To create data for the example, you can copy the following sample site map data to a file in your Web application named Web.sitemap.

<siteMapNode url="~\Home.aspx"

title="Home"

description="Home">

<siteMapNode url="~\Music.aspx"

title="Music"

description="Music">

<siteMapNode url="~\Classical.aspx"

title="Classical"

description="Classical"/>

<siteMapNode url="~\Rock.aspx"

title="Rock"

description="Rock"/>

<siteMapNode url="~\Jazz.aspx"

title="Jazz"

description="Jazz"/>

</siteMapNode>

<siteMapNode url="~\Movies.aspx"

title="Movies"

description="Movies">

<siteMapNode url="~\Action.aspx"

title="Action"

description="Action"/>

<siteMapNode url="~\Drama.aspx"

title="Drama"

description="Drama"/>

<siteMapNode url="~\Musical.aspx"

title="Musical"

description="Musical"/>

</siteMapNode>

</siteMap>

Concepts

XmlDataSource Web Server Control Overview

Binding a Tabular Control to the XmlDataSource Control

SiteMapDataSource Web Server Control Overview

Menu Control Overview

Reference

TreeView Web Server Control Overview