Tutorial: Crear una página Web para mostrar datos XML
Actualización: noviembre 2007
Con frecuencia, los datos para las aplicaciones Web están disponibles en formato XML. Sin embargo, los datos XML son intrínsecamente jerárquicos, y tal vez desee utilizar los datos XML en controles basados en listas, como por ejemplo, el control GridView o DropDownList. Este tutorial le enseña a trabajar con datos XML como si fuera en una tabla de base de datos.
Durante este tutorial aprenderá a:
Utilice un control de origen de datos para leer los datos XML y ponerlos a disposición de los controles de lista.
Cree una página principal-detalle que muestra los datos XML relacionados de una forma lógica.
Aplique una transformación a un archivo .xml para hacer que el archivo se pueda utilizar como datos en formato de tabla.
.gif "Nota") Nota: |
|---|
También puede trabajar con XML de una forma jerárquica. Para obtener información detallada, vea Tutorial: Mostrar datos jerárquicos en un control TreeView. |
Requisitos previos
Para poder completar este tutorial, necesitará:
Microsoft Visual Web Developer
El entorno .NET Framework
Este tutorial da por supuesto que sabe cómo utilizar Visual Web Developer.
Crear un sitio Web
Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, siguiendo los pasos en Tutorial: Crear una página Web básica en Visual Web Developer), puede utilizar ese sitio Web y pasar a la siguiente sección. De lo contrario, cree un sitio y una página Web nuevos siguiendo estos pasos.
Para crear un sitio Web de sistema de archivos
Abra Visual Web Developer.
En el menú Archivo, señale a Nuevo sitio Web.
Aparecerá el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.
En el cuadro Ubicación, haga clic en Sistema de archivos y a continuación escriba el nombre de la carpeta en la que desea guardar su sitio Web.
Por ejemplo, escriba el nombre de la carpeta C:\WebSites\XMLWalkthrough.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar, como por ejemplo, Visual Basic o Visual C#.
El lenguaje de programación que escoja será el valor predeterminado para el sitio Web, sin embargo, puede establecer el lenguaje de programación para cada página de forma individual.
Haga clic en Aceptar.
Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.
Crear un archivo .xml para datos
Para tener datos XML con los que trabajar, cree un archivo .xml en el sitio Web.
Para crear el archivo .xml
En el Explorador de soluciones, haga clic con el botón secundario del mouse en la carpeta App_Data y después haga clic en AgregarNuevo elemento.
Nota:Cuando pone el archivo .xml en la carpeta App_Data, el archivo .xml tiene los permisos correctos para permitir a ASP.NET que lea desde y escriba en el archivo en el tiempo de ejecución. Además, si guarda archivos en la carpeta App_Data los protege de que los vean en un explorador, ya que la carpeta App_Data está marcada como no explorable.
Debajo de Plantillas instaladas de Visual Studio, haga clic en archivo XML.
En el cuadro Nombre, escriba Bookstore.xml.
Haga clic en Agregar.
Se crear un nuevo archivo .xml que solo contiene la directiva XML.
Copie los siguientes datos XML y péguelos luego en el archivo reemplazando el contenido actual del archivo.
<?xml version="1.0" standalone="yes"?> <bookstore> <book ISBN="10-000000-001" title="The Iliad and The Odyssey" price="12.95"> <comments> <userComment rating="4" comment="Best translation I've read." /> <userComment rating="2" comment="I like other versions better." /> </comments> </book> <book ISBN="10-000000-999" title="Anthology of World Literature" price="24.95"> <comments> <userComment rating="3" comment="Needs more modern literature." /> <userComment rating="4" comment="Excellent overview of world literature." /> </comments> </book> <book ISBN="11-000000-002" title="Computer Dictionary" price="24.95" > <comments> <userComment rating="3" comment="A valuable resource." /> </comments> </book> <book ISBN="11-000000-003" title="Cooking on a Budget" price="23.95" > <comments> <userComment rating="4" comment="Delicious!" /> </comments> </book> <book ISBN="11-000000-004" title="Great Works of Art" price="29.95" > </book> </bookstore>El archivo Bookstore.xml contiene información sobre libros que podrían estar disponibles en una librería en línea. Tenga en cuenta los siguientes aspectos del archivo .xml:
Todos los valores de propiedad para los elementos se expresan como atributos.
El archivo contiene una estructura anidada, cada libro puede contener sus valores de propiedad, así como uno o más comentarios como elementos separados.
Guarde el archivo Bookstore.xml y ciérrelo.
Mostrar datos XML en un control de lista
Para hacer que los datos estén disponibles para los controles en una página Web ASP.NET, se utiliza un control de origen de datos.
Para configurar el acceso a datos al archivo .xml
Abra el archivo Default.aspx y después cambie a la vista Diseño.
En el Cuadro de herramientas, desde el grupo Datos, arrastre un control XmlDataSource a la página.
En el menú XmlDataSourceTareas, haga clic en Configurar origen de datos.
Aparece el cuadro de diálogo Configurar origen de datos<DataSourceName>.
En el cuadro Archivo de datos, escriba ~/App_Data/Bookstore.xml.
Haga clic en Aceptar.
El control XmlDataSource pone los datos del archivo .xml a disposición de los controles que están en la página. Los datos están disponibles en dos formatos: jerárquico y de tabla. Los controles que enlazan con el control XmlDataSource pueden obtener los datos en el formato que funcione para ellos.
En este caso, la jerarquía del archivo Bookstore.xml se presta a una interpretación relacional. Los dos niveles del archivo (libros y comentarios) se pueden considerar como dos tablas relacionadas.
Ahora puede mostrar los datos XML en un control de lista. Para comenzar, muestre algunos datos XML en un control GridView.
Para utilizar un control GridView para una presentación básica de datos XML
En el Cuadro de herramientas, desde el grupo Datos, arrastre un control GridView a la página.
En el menú Tareas de GridView, en la lista Elegir origen de datos, haga clic en XmlDataSource1.
Presione CTRL+F5 para ejecutar la página.
La página muestra los datos XML en una cuadrícula.
Los datos que se muestran en el control GridView ilustran los siguientes puntos sobre la interpretación de los datos XML:
Cuando los datos XML se representan como un registro de datos, como valor predeterminado, las columnas se crean a partir de atributos (como por ejemplo ISBN).
Los elementos secundarios se tratan como parte de una tabla relacionada separada. Para este ejemplo, el control GridView no se enlaza con los elementos comments en el archivo.
Filtrar datos XML mediante una expresión XPath
En la primera parte de este tutorial, se basó en el comportamiento predeterminado de los controles XmlDataSource y GridView para extraer información del archivo .xml. Sin embargo, el control solo muestra parte de estos datos XML.
En esta parte del tutorial, agregará un segundo control GridView y lo usará para mostrar información principal-detalle. Los usuarios podrán seleccionar un libro individual en el primer control GridView y el segundo control GridView mostrara los comentarios del usuario relacionados, si existieran, para ese libro. Para mostrar comentarios, utilizará una expresión XPath, que le permite especificar el nivel del archivo de datos XML que desea extraer. Puesto que desea mostrar comentarios para un libro específico únicamente, creará la expresión XPath de forma dinámica, dependiendo del libro que haya seleccionado el usuario.
Para comenzar, agregará un segundo control GridView a la página y entonces, configure el control GridView para que muestre los comentarios del usuario.
Para agregar un control GridView que muestre los comentarios del usuario
Cambie a la vista Diseño.
En el Cuadro de herramientas, desde el grupo Datos, arrastre un control GridView a la página y sitúela debajo del primer control GridView.
Aparece el menú Tareas de GridView.
En el cuadro Elegir origen de datos, haga clic en Nuevo origen de datos.
Aparece Asistente para la configuración del origen de datos.
Haga clic en Archivo XML como el origen de datos.
En el cuadro Especificar un id. para el origen de datos, deje el valor XmlDataSource2 predeterminado.
Haga clic en Aceptar.
Aparece el cuadro de diálogo Configurar origen de datos.
En el cuadro Archivo de datos, escriba ~/App_Data/Bookstore.xml.
Utilizará el mismo archivo .xml que utilizó con anterioridad en este tutorial, pero ahora extraerá diferente información para el segundo control GridView.
En el cuadro Expresión de XPath, escriba la siguiente expresión:
/bookstore/book/comments/userComment
Más adelante, cambiará la propiedad XPath dinámicamente en código. Sin embargo, al definir ahora una expresión XPath para el origen de datos, ayudará a las herramientas en Visual Web Designer a determinar la información que finalmente se mostrará en el control.
Haga clic en Aceptar.
Aparece el segundo control GridView mostrando clasificaciones y comentarios de usuario como datos de muestra.
Seleccione el control GridView2 y en Propiedades, establezca Visible en False.
El segundo control GridView aparecerá sólo cuando el usuario haya seleccionado un libro en el primer control GridView.
Ahora puede configurar el primer control GridView para permitir a los usuarios que seleccionen un libro. También agregará código para crear una expresión XPath basada en la selección del usuario y asignarla al control XmlDataSource2. El resultado final es que el segundo control GridView mostrará los comentarios del usuario para el libro seleccionado.
Para configurar el control GridView para la selección
Cambie a vista Diseño y después seleccione el primer control GridView.
En el menú Tareas de GridView, seleccione Habilitar selección.
Se agrega una nueva columna al control GridView que contiene un botón de vínculo con el texto Seleccionar.
En Propiedades, establezca DataKeyNames en ISBN.
Puede hacer clic en el cuadro de propiedades para seleccionar el valor.
De este modo se configura el control GridView para que trate la propiedad ISBN como la clave principal para cada elemento en los datos XML.
Haga clic en el controlGridView. En la ventana Propiedades, seleccione Eventos en la lista desplegable en la parte superior de la ventana Propiedades. Así se mostrarán todos los eventos asociados con el control.
Haga doble clic en el cuadro para el evento SelectedIndexChanged.
Esto le lleva al editor de código y crea un esqueleto del controlador para el evento SelectedIndexChanged.
Agregue el siguiente código resaltado al controlador:
Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles GridView1.SelectedIndexChanged Dim currentIndex As Integer currentIndex = GridView1.SelectedIndex Dim isbn As String isbn = CStr(GridView1.DataKeys(currentIndex).Value) XmlDataSource2.XPath = _ String.Format( _ "/bookstore/book[@ISBN='{0}']/comments/userComment", _ isbn) GridView2.Visible = true End Subprotected void GridView1_SelectedIndexChanged(Object sender, EventArgs e) { String isbn = (String) GridView1.DataKeys[GridView1.SelectedIndex].Value; XmlDataSource2.XPath = String.Format( "/bookstore/book[@ISBN='{0}']/comments/userComment", isbn); GridView2.Visible = true; }El código realiza lo siguiente:
Utiliza la propiedad SelectedIndex (del control GridView) para indizar la matriz de claves de datos, y después devolver la clave principal de la fila seleccionada. Con anterioridad, estableció la propiedad DataKeyNames para que contenga números ISBN.
Crea una nueva expresión XPath que incluye el ISBN seleccionado.
Asigna la nueva expresión XPath a la propiedad XPath (del control XmlDataSource2). Al asignar una nueva expresión XPath a la propiedad XPath hace que el control XmlDataSource vuelva a evaluar los datos que devuelve. El control GridView, a su vez vuelve a enlazar con los datos.
Establece la propiedad Visible en true, lo que hace que se muestre el segundo control GridView. Estableció la visibilidad en false de forma declarativa cuando creó el segundo control GridView de modo que no aparece hasta que el usuario seleccione un libro.
Ahora pueda probar la página.
Para probar el filtrado con la expresión XPath
Vea la página Default.aspx y presione CTRL+F5 para ejecutar la página.
La página se muestra con una cuadrícula con información sobre libros.
Haga clic en el vínculo Seleccionar junto al primer libro.
Los comentarios sobre ese libro se muestran en una segunda cuadrícula.
Haga clic en el vínculo Seleccionar junto al último libro.
No se muestra ningún comentario porque no hay ninguno para este libro.
Mostrar datos XML con un diseño personalizado
Para crear un diseño personalizado para los datos, puede utilizar un control DataList. En el control DataList, puede definir una o más plantillas. Cada plantilla contiene una combinación de texto estático y controles que puede organizar con el diseño que desee.
En esta parte del tutorial, utilizará un control DataList que muestre la misma información que mostró con anterioridad mediante el control GridView2. Sin embargo, podrá crear un diseño personalizado para los comentarios del usuario.
Para mostrar datos XML con un diseño personalizado
Cambie a vista Diseño, haga clic en el control GridView2 y después presione SUPRIMIR para quitarlo de la página.
En el Cuadro de herramientas, desde el grupo Datos, arrastre un control DataList a la página.
En el menú Tareas de DataList, en la lista Elegir origen de datos, haga clic en XmlDataSource2.
Utilizará el mismo origen de datos para el control DataList que el que utilizó para el control GridView2.
En Propiedades, establezca Visible en False.
Si la etiqueta inteligente no aparece, haga clic con el botón secundario del mouse en el control DataList y luego haga clic en Mostrar etiqueta inteligente.
En el menú Tareas de DataList, haga clic en Editar plantillas y después en el cuadro Mostrar, haga clic en Plantilla de elementos.
El control DataList aparece con un área modificable para la plantilla de elementos. La plantilla contiene un diseño predeterminado que está formado por texto estático y controles Label que están enlazados con las columnas Clasificación y Comentario en el registro de datos. (El control DataList es capaz de deducir la estructura de los datos que mostrará porque definió una expresión estática XPath para el control XmlDataSource2 anteriormente en este tutorial.)
En el área modificable, cambie primero el título a Clasificación del usuario:.
Cambie el título de comentario a Comentario:.
Haga clic con el botón secundario del mouse en la barra de título del control DataList, señale Editar plantilla y haga clic en Plantilla del separador.
En el control DataList se muestra otra área modificable, ésta para definir el diseño de los elementos que aparecerán entre cada registro de datos.
En el Cuadro de herramientas, del grupo HTML, arrastre un control Regla horizontal hasta el área modificable.
Haga clic con el botón secundario del mouse en el control DataList y haga clic en Terminar edición de plantilla.
Haga clic con el botón secundario del mouse en la página y haga clic en Ver código para cambiar al código para la página.
En el controlador GridView1_SelectedIndexChanged, cambie la siguiente línea:
GridView2.Visible = TrueGridView2.Visible = true;debería cambiarse por esta otra:
DataList1.Visible = TrueDataList1.Visible = true;
Ahora pueda probar el diseño de la página.
Para probar el diseño personalizado
Vea la página Default.aspx y presione CTRL+F5 para ejecutar la página.
La página se muestra con una cuadrícula con información sobre libros.
Haga clic en el vínculo Seleccionar junto al primer libro.
Los comentarios sobre el primer libro se muestran en una lista.
Haga clic en el vínculo Seleccionar junto al último libro.
No se muestra ningún comentario porque no hay ninguno para este libro.
Utilizar Transformaciones para reestructurar datos XML
El archivo .xml que ha utilizado en este tutorial está estructurado de modo que las propiedades de cada elemento están expresadas como atributos. En muchos casos, los archivos .xml con los que trabaja están estructurados de forma diferente. Por ejemplo, los valores en un archivo .xml se crean a menudo como elementos con texto interno.
Si tiene un archivo .xml en el que los valores de propiedad se expresan en un formato diferente de los atributos, puede crear un archivo de transformación (.xslt) que puede volver a dar formato de forma dinámica al archivo .xml para que sea compatible con el control XmlDataSource.
En esta parte del tutorial, trabajará con un archivo .xml que contiene los mismos datos que el archivo Bookstore.xml que utilizó anteriormente . Sin embargo, los datos se estructurarán de forma diferente que en el archivo Bookstore.xml, por lo que utilizará una transformación para cambiarle el formato de forma dinámica.
Para comenzar esta sección, creará un segundo archivo .xml.
Para crear el segundo archivo .xml
En el Explorador de soluciones, haga clic con el botón secundario del mouse en la carpeta App_Data y después haga clic en AgregarNuevo elemento.
Debajo de Plantillas instaladas de Visual Studio, haga clic en archivo XML.
En el cuadro Nombre, escriba Bookstore2.xml.
Haga clic en Agregar.
Se crear un nuevo archivo .xml que solo contiene la directiva XML.
Copie los siguientes datos XML y péguelos luego en el archivo reemplazando el contenido actual del archivo.
<?xml version="1.0" standalone="yes"?> <bookstore> <book ISBN="10-000000-001"> <title>The Iliad and The Odyssey</title> <price>12.95</price> <comments> <userComment rating="4"> Best translation I've read. </userComment> <userComment rating="2"> I like other versions better. </userComment> </comments> </book> <book ISBN="10-000000-999"> <title>Anthology of World Literature</title> <price>24.95</price> <comments> <userComment rating="3"> Needs more modern literature. </userComment> <userComment rating="4"> Excellent overview of world literature. </userComment> </comments> </book> <book ISBN="11-000000-002"> <title>Computer Dictionary</title> <price>24.95</price> <comments> <userComment rating="3"> A valuable resource. </userComment> </comments> </book> <book ISBN="11-000000-003"> <title>Cooking on a Budget</title> <price>23.95</price> <comments> <userComment rating="4">Delicious!</userComment> </comments> </book> <book ISBN="11-000000-004"> <title>Great Works of Art</title> <price>29.95</price> </book> </bookstore>Guarde el archivo Bookstore2.xml y ciérrelo.
Ahora necesita un archivo de transformación que convertirá los datos del archivo Bookstore2.xml en el formato basado en atributos que utiliza el control XmlDataSource.
Para crear el archivo de transformación
En el Explorador de soluciones, haga clic con el botón secundario del mouse en la carpeta App_Data y después haga clic en AgregarNuevo elemento.
Debajo de Plantillas instaladas de Visual Studio, haga clic en Archivo de texto.
No hay ninguna plantilla para un archivo de transformación, así que puede crearlo como un archivo de texto con la extensión adecuada.
En el cuadro Nombre, escriba Bookstore2.xsl.
Nota:Asegúrese de utilizar la extensión .xsl.
Haga clic en Agregar.
Se crea un nuevo archivo en blanco.
Copie el siguiente código de transformación y luego péguelo en el archivo.
<?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msxsl="urn:schemas-microsoft-com:xslt" > <xsl:strip-space elements="*"/> <xsl:output method="xml" omit-xml-declaration="yes" indent="yes" standalone="yes" /> <xsl:template match="/"> <xsl:for-each select="bookstore"> <xsl:element name="bookstore"> <xsl:for-each select="book"> <xsl:element name="book"> <xsl:attribute name="ISBN"> <xsl:value-of select="@ISBN"/> </xsl:attribute> <xsl:attribute name="title"> <xsl:value-of select="title"/> </xsl:attribute> <xsl:attribute name="price"> <xsl:value-of select="price"/> </xsl:attribute> </xsl:element> </xsl:for-each> </xsl:element> </xsl:for-each> </xsl:template> </xsl:stylesheet>Guarde el archivo Bookstore2.xsl y ciérrelo.
A partir de este momento, trabajar con los datos XML es muy similar a lo que ya hizo antes en este tutorial, salvo que puede especificar el archivo de transformación cuando configure el control XmlDataSource. En la última parte de este tutorial, creará una página nueva y luego repetirá algunos pasos de la primera parte del tutorial. Sin embargo, esta vez mostrará los datos del archivo Bookstore2.xml.
Para configurar el acceso a datos al archivo .xml
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, haga clic en AgregarNuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Web Forms.
En el cuadro Nombre, escriba Bookstore2.aspx.
Haga clic en Agregar.
Cambie a la vista Diseño.
En el Cuadro de herramientas, desde el grupo Datos, arrastre un control XmlDataSource a la página.
En el menú XmlDataSourceTareas, haga clic en Configurar origen de datos.
Aparece el cuadro de diálogo Configurar origen de datos.
En el cuadro Archivo de datos, escriba ~/App_Data/Bookstore2.xml.
En el cuadro Archivo de transformación, escriba ~/App_Data/Bookstore2.xsl.
Haga clic en Aceptar.
En el Cuadro de herramientas, desde el grupo Datos, arrastre un control GridView a la página.
En el menú Tareas de GridView, en la lista Elegir origen de datos, haga clic en XmlDataSource1.
Presione CTRL+F5 para ejecutar la página.
La página muestra los datos XML en una cuadrícula. Los datos aparecerán en la cuadrícula al igual que lo hicieron en la primera página, a pesar de que el formato del archivo subyacente .xml esta vez es diferente.
Pasos siguientes
En este tutorial sólo se han explicado las bases para trabajar con un documento XML y con transformaciones. En una aplicación real, probablemente necesitará trabajar con el documento XML en mayor profundidad. A continuación se muestran algunas sugerencias para una mayor investigación:
Crear transformaciones más sofisticadas. En este tutorial, solo ha visto un ejemplo de cómo se pueden utilizar las transformaciones. XSL es un lenguaje eficaz, con una compatibilidad sofisticada que le permite no sólo crear páginas HTML sino también realizar cualquier tipo de transformación virtual de XML a otra estructura.
Escribir documentos XML (en lugar de solo leerlos). El control Xml hace que sea fácil ver el contenido de un archivo XML en una página Web ASP.NET. Sin embargo, es posible que desee crear o modificar archivos XML. Para obtener información detallada, vea Documentos y datos XML. Para obtener un ejemplo de cómo escribir un archivo XML, vea Tutorial: Mostrar y realizar un seguimiento de los anuncios con el control AdRotator.
Vea también
Tareas
Tutorial: Mostrar datos jerárquicos en un control TreeView
Tutorial: Crear una página Web básica en Visual Web Developer