Data source controls can work with either tabular data (table-based or relational data) or hierarchical data, or both. The
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 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
The following code example shows a TreeView control bound to an XmlDataSource control. The XML data is filtered using an XPath query.
| Visual BasicВ | Copy Code |
|---|---|
<%@ 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>
<BODY>
<form 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>
| |
| C#В | Copy Code |
|---|---|
<%@ 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>
<BODY>
<form 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
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В | Copy Code |
|---|---|
<%@ Page Language="VB" %>
<html>
<!-- For the hover styles of the Menu control to -->
<!-- work correctly, you must include this head -->
<!-- element. -->
<head runat="server">
</head>
<body>
<form 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>
| |
| C#В | Copy Code |
|---|---|
<%@ Page Language="C#" %>
<html>
<!-- For the hover styles of the Menu control to -->
<!-- work correctly, you must include this head -->
<!-- element. -->
<head runat="server">
</head>
<body>
<form 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.
<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>
</siteMapNode>
</siteMap>
jscript editor
Web designer