Home   |   QuickStart Welcome   |   ASP.NET   |   Web Services   |   How Do I...?   
  |   I want my samples in...      

ASP.NET 2.0 Quickstart Tutorials

Hierarchical Data

Data source controls can expose either tabular or hierarchical data, or both. The SqlDataSource and ObjectDataSource controls demonstrated previously are examples of tabular data source controls. ASP.NET 2.0 also includes two hierarchical data source controls: XmlDataSource for connecting to XML files, and SiteMapDataSource for connecting to site navigation data. Some techniques for using these controls are covered by the examples that follow in this section.

Refer to the XmlDataSource and SiteMapDataSource topics in the Control Reference section for more examples of these controls.

The TreeView and Menu Controls

Like data sources, data-bound controls can also be hierarchical. Whereas tabular data-bound controls render a list or grid of data, hierarchical data-bound controls are able to recurse into a data hierarchy in order to render data as parent-child relationships in the UI. Two examples of hierarchical data-bound controls are the TreeView and Menu controls in ASP.NET 2.0. The techniques for databinding these controls to hierarchical data sources are covered by the examples that follow in this section.

Refer to the TreeView and Menu topics in the Control Reference section for more examples of these controls.

Binding to XML

The XmlDataSource control allows controls to bind to XML data. XmlDataSource supports a DataFile property for specifying the path to an XML data file to be used as input. You may also specify a TranformFile property to apply an XSLT transformation to the data and an XPath property for specifying a subset of nodes to expose from the data source.

The example below demonstrates a TreeView control bound to an XML file through an XmlDataSource control. The TreeView associates properties of individual TreeNode objects to attributes of XML nodes in the hierarchy (attributes are promoted to properties of the data item for the sake of data binding). By default, the TreeView control simply renders the data item by calling ToString() on the object. This renders the element name of the XML node so that you can see the hierarchy of the nodes the TreeView is bound against. This does not necessarily produce the desired rendering, but it gives you a starting point for further customizing the way the XML data will be displayed.

VB Binding TreeView to an XML File
Run Sample View Source

To give the TreeView a more meaningful rendering, you can specify individual data bindings for nodes in the tree. TreeNodeBinding objects may be added to the TreeView's Databindings collection for the purpose of defining how the fields of hierarchical data items are mapped to TreeNode properties. There are two key properties of TreeNodeBinding that determine the set of hierarchical data items to which the binding applies. The DataMember property specifies the type of data item, or in the case of XML data, the element name for which a binding applies. The Depth property specifies the depth in the hierarchy at which the data binding should apply. You can set either DataMember or Depth, or you can set both of these properties. For example, to define data bindings for all Book elements in a given XML file, set DataMember to "Book". To define bindings for all nodes at depth 1, set the Depth property to 1. To define bindings for all Book nodes at depth 1, set both DataMember to "Book" and Depth to 1 on the TreeNodeBinding object.

Once you have set DataMember or Depth to match a given set of nodes, you can define additional properties of TreeNodeDataBinding to define how properties of the data item (or XML node attributes, in the case of XML data) map to the properties of the TreeNodes that the TreeView control renders. For example, the TextField property defines the name of property/attribute to use for the Text of the TreeNode. Similarly, the ValueField property defines the data item property/attribute to use for the TreeNode Value. The NavigateUrlField property defines the field/attribute to use for TreeNode's NavigateUrl, and so on. You can also specify static values for the TreeNode properties for a given data binding. For example, to specify that TreeNodes for Book elements have a "Book.gif" image, set the ImageUrl property on the TreeNodeBinding whose DataMember property is set to "Book".

The following example shows a TreeView bound to the same XML data as the preceding example, with Databindings defined for specific elements in the XML hierarchy.

VB TreeView Data Bindings
Run Sample View Source

The XmlDataSource supports an XPath property you can use to filter the set of nodes exposed by the data source. In the example below, the XPath property is set to Bookstore/genre[@name='Business']/book, to filter the nodes of the data source to show only those book elements under the "Business" genre. Be careful to specify correct syntax for the XPath property; otherwise, the data source may expose no nodes (and the associated data-bound control will not render).

VB TreeView to an XPath Result
Run Sample View Source

Note that the TreeView hierarchy exactly matches the hierarchy of the source XML. Because of this, it is either common to construct XML specifically for binding to the TreeView or to use an XSL transformation to "re-shape" the data into an appropriate hierarchy for binding to the TreeView.

VB TreeView to an XSLT Transformation
Run Sample View Source


It is also possible to bind a tabular data-bound control to a hierarchical data source, however the control only renders the first level of hierarchy in this case. In the example below, a templated DataList control is bound to the same bookstore XML file from the preceding example. Because the top-level nodes exposed from the data source are <book/> nodes, the DataList can bind to properties of those nodes in its ItemTemplate using Eval data binding expressions.

VB DataList Bound to XML File
Run Sample View Source

Although rendering one level of hierarchy is useful, it would be better if we could nest tabular data-bound controls to reflect the underlying hierarchy. Fortunately, ASP.NET 2.0 allows you to do just that. In addition to the Eval data binding syntax, ASP.NET 2.0 provides an XPath-based data binding syntax that is supported on any data item that implements the IXPathNavigable interface. There are two supported expression types:
  • XPath(expression, [formatString]) - Evaluates an XPath expression against the data item, returning a single value.
  • XPathSelect(expression, [formatString]) - Evaluates an XPath expression against the data item, returning a selected list of nodes.
The example below builds upon the preceding example, using the XPath data binding expressions instead of Eval expressions to bind to attributes of the book nodes. At face value, this appears to do nothing more than introduce an '@' prefix to each expression, which is the XPath syntax to refer to a node attribute. However, the real flexibility of XPath lies in its ability to refer to arbitrary items within the hierarchy (not just attributes).

The example adds another DataList to the ItemTemplate of the outer DataList, and binds the DataSource property of this inner DataList to an XPathSelect expression representing the list of chapter nodes for the current book node. In the ItemTemplate of the inner DataList, XPath data binding expressions are evaluated against these 'chapter' context nodes. Using this technique, ASP.NET 2.0 allows you to easily construct rich, hierarchical rendering of data by composing tabular data-bound controls.

VB Nested DataList Bound to XML File
Run Sample View Source

A hierarchical data source control like XmlDataSource associates a unique path to each node in its hierarchy, in order to serve requests from data-bound controls for nodes at a specific location. This enables features like TreeView's PopoulateOnDemand feature, where nodes from a data source can be sent down to the client as each node is expanded, instead of sending down all nodes at once (this feature is discussed in more detail in the TreeView control reference samples). It also enables you to use this path from page code to configure a data source to show nodes from a specific location. The path syntax is specific to the type of data represented, and cannot be constructed from code. However, you can access the data path for a node bound to TreeView using the TreeNode DataPath property. Because the XmlDataSource uses XPath expressions for it's data path syntax, these paths may be assigned to the XPath property of an XmlDataSource to filter the list of nodes. The example below demonstrates this technique to implement a master-details scenario using XmlDataSource. There are two XmlDataSource controls, one bound to the TreeView (master control), and one bound to a DataList (details control). When a TreeView node is clicked, the DataPath property is retrieved and assigned to the XmlDataSource control bound to the DataList, in order to display additional information for the specific node that was clicked.

VB XML-based Event Log using TreeView (Master-Details)
Run Sample View Source

The TreeView control reference section walks through a series of steps for how this sample was written from scratch, so refer to that topic for more information.

Binding to Site Navigation

Site navigation data is another form of hierarchical data in an ASP.NET application. As described in the Creating a Site Navigation Hierarchy section. In addition to supporting the Site Navigation API in ASP.NET for programmatic access to site map data, ASP.NET 2.0 also supports a SiteMapDataSource control for declarative data binding. When you bind a TreeView (or Menu) control to a SiteMapDataSource, the Text and Url properties of the site map can be bound to TreeNodes (or MenuItems). Although you can specify a DataBinding collection to establish these bindings, this is not strictly necessary. The TreeView and Menu controls automatically bind the Text and NavigateUrl properties of TreeNode or MenuItem to the related site map properties (this is achieved using the INavigateUIData interface on SiteMapNode). Another feature of TreeView and Menu when bound to a SiteMapDataSource is that is automatically sets the SelectedNode or SelectedItem property to the current node in the site map.

The example below shows a TreeView bound to a SiteMapDataSource control. Although this example shows the Databindings collection for demonstration purposes, this is not necessary when you are only binding to the Text and Url properties of the node.

VB TreeView Bound to SiteMap Data
Run Sample View Source

Binding to Relational Databases

A relational database can also be interpreted as a hierarchy, when tables are associated through foreign key relationships. For example, a products database where each product is associated with a product category can be interpreted as a hierarchical (1-to-many) relationship between categories and products. Although the current version of ASP.NET does not include a data source control for exposing relational data as hierarchical, you can still achieve this by programmatically populating nodes/items of a hierarchical data-bound control like TreeView or Menu. The example below shows a TreeView control populated from a relational database. This example takes advantages of the PopulateOnDemand feature of TreeView to populate child nodes on-demand (through a callback to the server) when a TreeNode is expanded on the client. For more information about this feature, refer to the TreeView control reference section of this tutorial.

VB Populating TreeView from a Database
Run Sample View Source