Establecer enlaces a datos jerárquicos
Actualización: noviembre 2007
Los controles de origen de datos pueden trabajar con datos de tabla (datos relacionales o basados en tablas) o datos jerárquicos, o ambos. Los controles SqlDataSource y ObjectDataSource son ejemplos de controles de origen de datos que trabajan con datos de tabla. ASP.NET incluye igualmente dos controles de origen de datos que facilitan el enlace a datos jerárquicos: el control XmlDataSource, que trabaja con XML, o un archivo o cadena, y el control SiteMapDataSource, que trabaja con datos de navegación de sitio (que, de forma predeterminada, se mantienen como datos XML). Los controles de origen de datos jerárquicos se utilizan en escenarios de sólo lectura para mostrar datos.
En este tema se proporciona más información sobre cómo enlazar controles enlazados a datos a un origen de datos jerárquicos. Para obtener más información sobre los controles XmlDataSource y SiteMapDataSource, vea Información general sobre el control de servidor web XmlDataSource y Información general sobre SiteMapDataSource (Control de servidor Web).
Enlazar un control jerárquico a datos XML
XML es intrínsicamente jerárquico en su estructura y se puede mostrar en páginas Web de ASP.NET mediante controles enlazados a datos jerárquicos como el control TreeView o Menu. Puede enlazar a un control de origen de datos jerárquicos estableciendo la propiedad DataSourceID del control jerárquico en el ID de un control XmlDataSource o SiteMapDataSource.
En el ejemplo de código siguiente se muestra un control TreeView enlazado a un control XmlDataSource. Los datos XML se filtran mediante una consulta de XPath.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
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 xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>ASP.NET Example</title>
</head>
<body>
<form id="form1" >
<table border="0" cellpadding="3">
<tr>
<td valign="top">
<b>Select Region:</b>
<asp:DropDownList 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"
XPath="/People/Person"
DataFile="~/App_Data/people.xml" />
<asp:TreeView
id="PeopleTreeView"
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 >
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 xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>ASP.NET Example</title>
</head>
<body>
<form id="form1" >
<table border="0" cellpadding="3">
<tr>
<td valign="top">
<b>Select Region:</b>
<asp:DropDownList 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"
XPath="/People/Person"
DataFile="~/App_Data/people.xml" />
<asp:TreeView
id="PeopleTreeView"
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>
Enlazar un control de tabla a datos XML
Mientras el control XmlDataSource se utiliza principalmente para exponer datos XML a controles enlazados a datos jerárquicos como los controles TreeView y Menu, puede enlazar también controles enlazados a datos de tabla como un control GridView o DataList al control XmlDataSource.
Cuando enlaza un control enlazado a datos de tabla al control XmlDataSource, el control enlazado a datos representa sólo el primer nivel de la jerarquía de XML. No obstante, en una plantilla de control enlazado a datos también puede utilizar los métodos enlazados a datos XPath y XPathSelect para enlazar a elementos específicos dentro de la jerarquía de XML. El método de enlace de datos XPath devuelve un valor de un nodo o un atributo en cualquier parte de la jerarquía. El método XPathSelect devuelve una lista de nodos que coinciden con una expresión de XPath, con los que el control de datos de tabla puede trabajar como si fueran una colección de registros de datos.
Para obtener más información y ejemplos, vea Enlazar un control tabular con el control XmlDataSource.
Otros formularios de datos jerárquicos
Además de controles de enlaces a un control XmlDataSource tal como se muestra en este tema, puede enlazar también un control jerárquico a un archivo del mapa de sitio. Para obtener más información, vea Mapas de sitio de ASP.NET. El ejemplo de código siguiente muestra cómo enlazar un control Menu a un control SiteMapDataSource.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- For the hover styles of the Menu control to -->
<!-- work correctly, you must include this head -->
<!-- element. -->
<head >
<title>Menu DataBinding Example</title>
</head>
<body>
<form id="form1" >
<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"
>
<staticmenuitemstyle backcolor="LightSteelBlue"
forecolor="Black"/>
<statichoverstyle backcolor="LightSkyBlue"/>
<dynamicmenuitemstyle backcolor="Black"
forecolor="Silver"/>
<dynamichoverstyle backcolor="LightSkyBlue"
forecolor="Black"/>
</asp:menu>
<asp:SiteMapDataSource id="MenuSource"
/>
</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 xmlns="http://www.w3.org/1999/xhtml" >
<!-- For the hover styles of the Menu control to -->
<!-- work correctly, you must include this head -->
<!-- element. -->
<head >
<title>Menu DataBinding Example</title>
</head>
<body>
<form id="form1" >
<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"
>
<staticmenuitemstyle backcolor="LightSteelBlue"
forecolor="Black"/>
<statichoverstyle backcolor="LightSkyBlue"/>
<dynamicmenuitemstyle backcolor="Black"
forecolor="Silver"/>
<dynamichoverstyle backcolor="LightSkyBlue"
forecolor="Black"/>
</asp:menu>
<asp:SiteMapDataSource id="MenuSource"
/>
</form>
</body>
</html>
Para crear datos para el ejemplo, puede copiar los siguientes datos del mapa del sitio de ejemplo en un archivo de la aplicación Web denominado 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>
Vea también
Conceptos
Información general sobre el control de servidor web XmlDataSource
Enlazar un control tabular con el control XmlDataSource
Información general sobre SiteMapDataSource (Control de servidor Web)
Información general sobre el control Menu
Referencia
Información general sobre TreeView (Control de servidor Web)