Compartir a través de

Tutorial: Mostrar un documento XML en una página de formularios Web Forms mediante transformaciones

  • Artículo

Actualización: noviembre 2007

En este tutorial se explica cómo mostrar en una página Web la información de un documento XML. En el tutorial, se creará un archivo XML simple. A continuación, se utilizará un control de servidor ASP.NET y una transformación XSLT para mostrar el contenido del archivo XML en la página web.

Nota:

También puede utilizar un archivo XML como origen de datos y mostrar su contenido utilizando, por ejemplo, el control GridView. Para obtener información detallada, vea Tutorial: Crear una página Web para mostrar datos XML.

Para mostrar información XML en una página web, deberá proporcionar información de formato y presentación. Por ejemplo, debe indicar los elementos table, p o cualquier elemento que desee usar para mostrar la información. También debe incluir instrucciones que indiquen cómo los datos del archivo XML llenan estas etiquetas. Por ejemplo, podría decidir mostrar cada elemento del archivo XML como una fila de tabla.

Una forma de indicar estas instrucciones es utilizar código en una página ASP.NET para analizar el archivo XML y colocar los datos en las etiquetas HTML adecuadas. Este enfoque puede tardar mucho tiempo y resultar difícil de mantener, pero también es un método eficaz que ofrece un control de programación preciso sobre el archivo XML.

Es mejor utilizar el lenguaje de transformación XSL y crear transformaciones, o archivos XSL. Una transformación XSL contiene la siguiente información:

  • Una plantilla, que es similar a una página HTML. La plantilla especifica cómo se debería mostrar la información XML.

  • Instrucciones de procesamiento XSL, que especifican cómo ajustar la información del archivo XML en la plantilla.

Puede definir varias transformaciones y aplicarlas al mismo archivo XML. Así puede utilizar la información XML de distintas maneras, mostrarla de manera diferente, seleccionar distintos datos del archivo XML, etc.

Después de haber creado las transformaciones XSL, debe aplicarlas al archivo XML. Es decir, procese el archivo XML transformándolo de acuerdo a uno de los archivos XSL. El resultado es un nuevo archivo que tiene la información XML con un formato conforme al archivo de transformación.

Este proceso también se puede realizar mediante programación. No obstante, también puede obtener buenos resultados con el control de servidor Xml. (Para obtener información general, vea XML (Control de servidor Web, Visual Studio)). Este control funciona como un marcador de posición en la página web ASP.NET. Puede establecer sus propiedades en un archivo XML y transformación de XSL específicos. Cuando se procesa la página, el control lee el código XML, aplica la transformación y muestra los resultados.

Para obtener más información sobre XSL, vea Transformaciones XSLT con la clase XslTransform.

En este tutorial se explica cómo utilizar el control de servidor Xml para mostrar información XML mediante transformaciones XSL. En este escenario, tendrá lo siguiente:

  • Un archivo XML que contiene varios mensajes de correo electrónico ficticios.

  • Dos transformaciones XSL. Una muestra sólo la fecha, el remitente y el asunto del mensaje de correo. La otra muestra el mensaje de correo electrónico completo.

    Nota:

    Todos estos archivos forman parte del tutorial.

Creará una página web que permita a los usuarios mostrar la información XML de dos maneras diferentes. La página contiene una casilla Sólo encabezados que está activada de forma predeterminada. Por consiguiente, la transformación predeterminada es la que sólo muestra los encabezados de mensaje de correo electrónico. Si el usuario desactiva la casilla, se vuelve a mostrar la información XML con los mensajes de correo completos.

Requisitos previos

Para poder completar este tutorial, necesitará:

  • Visual Studio 2008 o Visual Web Developer.

También debería tener un conocimiento general sobre el trabajo en Visual Web Developer. Para obtener una introducción a Visual Web Developer, vea Tutorial: Crear una página Web básica en Visual Web Developer.

Crear un sitio y una página Web

En esta parte del tutorial va a crear un sitio Web y a agregarle una nueva página. Para este tutorial, creará un sitio Web de sistema de archivos que no le exige trabajar con Microsoft Internet Information Services (IIS). En lugar de ello, creará y ejecutará la página en el sistema de archivos local.

Para crear un sitio Web del sistema de archivos

  1. Abra Visual Web Developer.

  2. En el menú Archivo, haga clic en Nuevo sitio Web.

  3. En Plantillas instaladas de Visual Studio, seleccione Sitio Web ASP.NET.

  4. En el cuadro Ubicación, seleccione Sistema de archivos y escriba el nombre de la carpeta donde desee conservar las páginas del sitio web.

    Por ejemplo, escriba el nombre de carpeta C:\WebSites.

  5. En la lista Lenguaje, haga clic en Visual Basic o en Visual C#.

  6. Haga clic en Aceptar.

Agregar el archivo XML y las transformaciones XSL

En esta parte del tutorial, creará un archivo XML y dos archivos XSLT.

Para agregar el archivo XML al proyecto

  1. En el Explorador de soluciones, haga clic con el botón secundario en la carpeta App_Data y, a continuación, haga clic en Agregarnuevo elemento.

    Nota:

    Al poner el archivo XML en la carpeta App_Data, recibe automáticamente los permisos correctos para que ASP.NET pueda leer y escribir en el archivo en tiempo de ejecución. Además, impide que el archivo se pueda ver en un explorador, porque la carpeta App_Data está marcada de forma que no se puede examinar.

  2. En Plantillas instaladas de Visual Studio, haga clic en Archivo XML.

  3. En el cuadro Nombre, escriba Emails.xml.

  4. Haga clic en Agregar.

    Se crea un nuevo archivo XML que sólo contiene la directiva XML.

  5. Copie los siguientes datos XML y después péguelos en el archivo, sobrescribiendo toda la información existente.

    <?xml version="1.0" ?>
  <messages>
    <message id="101">
      <to>JoannaF</to>
      <from>LindaB</from>
      <date>04 September 2007</date>
      <subject>Meeting tomorrow</subject>
      <body>Can you tell me what room where the committee meeting will be in?</body>
   </message>
   <message id="109">
      <to>JoannaF</to>
      <from>JohnH</from>
      <date>04 September 2007</date>
      <subject>I updated the site</subject>
      <body>I posted the latest updates to our internal Web site, as you requested. Let me know if you have any comments or questions. -- John
      </body>
   </message>
   <message id="123">
      <to>JoannaF</to>
      <from>LindaB</from>
      <date>05 September 2007</date>
      <subject>re: Meeting tomorrow</subject>
      <body>Thanks. By the way, do not forget to bring your notes from the conference. See you later!</body>
   </message>
</messages>

  6. Guarde el archivo y ciérrelo.

A continuación, agregará dos transformaciones XSL al proyecto.

Para agregar las transformaciones XSL al proyecto

  1. En el Explorador de soluciones, haga clic con el botón secundario en la carpeta App_Data y, a continuación, haga clic en Agregarnuevo elemento.

  2. En Plantillas instaladas de Visual Studio, haga clic en Archivo de texto.

    No hay ninguna plantilla para un archivo de transformación. Por consiguiente, puede crearlo como un archivo de texto que tenga la extensión correcta.

  3. En el cuadro Nombre, escriba Email_headers.xslt.

    Nota:

    Asegúrese de que utiliza la extensión .xslt.

  4. Haga clic en Agregar.

    Se crea un nuevo archivo en blanco.

  5. Copie el código de ejemplo siguiente y péguelo en el archivo.

    <?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    version="1.0">
<xsl:template match="/">
<html>
<body>
<table cellspacing="3" cellpadding="8">
   <tr bgcolor="#AAAAAA">
      <td class="heading"><strong>Date</strong></td>
      <td class="heading"><strong>From</strong></td>
      <td class="heading"><strong>Subject</strong></td>
   </tr>
   <xsl:for-each select="messages/message">
   <tr bgcolor="#DDDDDD">
       <td width="25%" valign="top">
         <xsl:value-of select="date"/>
       </td>
      <td width="20%" valign="top">
         <xsl:value-of select="from"/>
      </td>
       <td width="55%" valign="top">
         <strong><xsl:value-of select="subject"/></strong>
      </td>
   </tr>
   </xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
    Nota:

    Puede ajustar la plantilla como desee; por ejemplo, puede cambiar los colores, el tamaño de fuente, los estilos y otras características.

  6. Guarde el archivo y ciérrelo.

  7. Repita los pasos que van del 1 al 4, pero en este caso póngale por nombre al archivo Email_all.xslt.

  8. Pegue el código de ejemplo siguiente en el archivo Email_all.xslt.

    <?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    version="1.0">
<xsl:template match="/">
<html>
<body>
<table cellspacing="10" cellpadding="4">
  <xsl:for-each select="messages/message">
  <tr bgcolor="#CCCCCC">
  <td class="info">
    Date: <strong><xsl:value-of select="date"/></strong>
       <br /><br />
    To: <strong><xsl:value-of select="to"/></strong>
       <br /><br />
    From: <strong><xsl:value-of select="from"/></strong>
       <br /><br />
    Subject: <strong><xsl:value-of select="subject"/></strong>
       <br /><br />
    <br /><br />
    <xsl:value-of select="body"/>
  </td>
  </tr>
  </xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

  9. Guarde el archivo y ciérrelo.

Agregar el control XML a la página

Ahora que ya tiene un archivo XML y dos transformaciones, puede utilizarlos para mostrar información en una página Web. Para ello utilizará un control de servidor Xml.

Para agregar un control XML

  1. Abra o cambie a la página Default.aspx.

  2. Cambie a la vista Diseño.

  3. Desde la ficha Estándar del Cuadro de herramientas, arrastre un control Xml a la página.

    Se agrega a la página un cuadro deshabilitado que representa el control Xml.

  4. En la ventana Propiedades, seleccione el control y establezca las propiedades siguientes.

    Propiedad

    Valor

    DocumentSource

    ~/App_Data/Emails.xml

    TransformSource

    ~/App_Data/Email_headers.xslt

    Esto hace que el control Xml muestre sólo los encabezados de los mensajes de correo electrónico de manera predeterminada.

Agregar controles para cambiar las transformaciones

En esta parte del tutorial, utilizará una casilla que permita a los usuarios cambiar entre transformaciones. El control Xml, actualmente, aplica una transformación que sólo muestra los encabezados de los mensajes de correo.

Para agregar una casilla para aplicar otra transformación

  1. Coloque el cursor delante del control Xml y, a continuación, presione ENTRAR varias veces para conseguir espacio encima del control Xml.

  2. Desde la ficha Estándar del Cuadro de herramientas, arrastre un control CheckBox a la página, por encima del control Xml.

  3. Establezca las siguientes propiedades del control CheckBox:

    Propiedad

    Valor

    Text

    Sólo encabezados

    Checked

    True

    AutoPostBack

    TrueAsí el formulario se envía y procesa tan pronto como el usuario hace clic en la casilla.

  4. Haga doble clic en el control CheckBox.

    El editor de código se abre con un controlador del evento CheckChanged del control CheckBox denominado CheckBox1_CheckedChanged.

  5. Agregue código que cambie entre las transformaciones Email_headers.xslt y Email_all.xslt dependiendo del estado de la casilla.

    El ejemplo de código siguiente muestra la apariencia que tendrá el controlador CheckChanged completo.

    Protected Sub CheckBox1_CheckedChanged(ByVal sender As _
      System.Object, ByVal e As System.EventArgs) _      Handles CheckBox1.CheckedChanged
    If CheckBox1.Checked Then
        Xml1.TransformSource = "~/App_Data/email_headers.xslt"
    Else
        Xml1.TransformSource = "~/App_Data/email_all.xslt"
    End If
End Sub

    protected void CheckBox1_CheckedChanged(object sender, 
        System.EventArgs e)
{
    if (CheckBox1.Checked)
    {
        Xml1.TransformSource = "~/App_Data/email_headers.xslt";
    }
     else
    {
        Xml1.TransformSource = "~/App_Data/email_all.xslt";
    }
}

Pruebas

Ahora puede ver las transformaciones en ejecución.

Para probar las transformaciones

  1. Presione CTRL+F5 para ejecutar la página.

    De manera predeterminada, verá la fecha, el remitente y la línea de asunto de los mensajes de correo.

  2. Desactive la casilla Sólo encabezados.

    Se vuelven a mostrar los mensajes de correo, pero esta vez con un diseño diferente y con el texto completo.

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 deberá trabajar con el documento XML con mayor detalle. A continuación se muestran algunas sugerencias para realizar más investigaciones:

  • Cree transformaciones más complejas. En este tutorial, se ha descrito sólo uno 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 casi cualquier tipo de transformación virtual de XML a otra estructura.

  • Aplique transformaciones mediante programación. En este tutorial, ha utilizado el control de servidor Web Xml para realizar el trabajo de aplicar las transformaciones a los datos XML sin formato. Puede encontrar de utilidad para su aplicación realizar este trabajo, por ejemplo si resulta poco práctico en la aplicación utilizar un control Xml). Para obtener información detallada, vea Transformaciones XSLT con la clase XslTransform.

  • Escriba documentos XML, en lugar de sólo leerlos. El control Xml hace que resulte fácil mostrar 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

Otros recursos

XML (Control de servidor Web, Visual Studio)