Demonstra Passo a passo: Exibindo um documento XML em uma página de Web Forms usando transformações

  • Artigo

Esta explicação passo a passo ilustra como exibir informações sobre uma página da Web de um documento XML.Nessa explicação passo a passo, você criará um arquivo XML simples.Você, em seguida, usará um controle de servidor ASP.NET e uma transformação XSLT para exibir o conteúdo do arquivo XML na página da Web.

Observação:

Você também pode usar um arquivo XML como uma fonte de dados e exibir seu conteúdo usando controles como o controle GridView.Para obter detalhes, consulte:Demonstra Passo a passo: Criando um página da Web para exibir dados XML.

Para exibir informações XML em um página da Web, você deve fornecer a formatação e exibir informações.Por exemplo, você deve fornecer os elementos table, elementos p, ou o que você deseja usar para exibir as informações.Além disso, você deve fornecer instruções sobre como os dados do arquivo XML se encaixam nessas marcas.Por exemplo, você pode decidir exibir cada elemento do arquivo XML como uma linha da tabela.

Uma maneira de fornecer essas instruções é usar código em uma página da Web do ASP.NET para analisar o arquivo XML e preencher os dados nas marcas HTML apropriadas.Essa abordagem pode ser demorado e difícil manter, mas também é uma maneira eficiente que te fornece controle programático preciso sobre o arquivo XML.

Uma maneira melhor é utilizar a linguagem de transformação XSL e criar transformações ou arquivos XSL.Uma transformação XSL contém as seguintes informações:

  • Um modelo, que é semelhante a uma página HTML.O modelo especifica como as informações XML devem ser exibidas.

  • Instruções de processamento XSL, que especificam exatamente como as informações do arquivo XML se encaixam no modelo.

Você pode definir múltiplas transformações e aplicá-las ao mesmo arquivo XML.Ao fazer isso, você pode usar as informações em XML de diferentes maneiras, exibindo-as de forma diferente, selecionando diferentes dados do arquivo XML e assim por diante.

Depois de criar transformações XSL, você precisa aplicá-las para o arquivo XML.Ou seja, você processar o arquivo XML transformando-o de acordo com um dos arquivos XSL.A saída é um novo arquivo com as informações em XML formatadas de acordo com o arquivo de transformação.

Novamente, isso é um processo que você pode executar programaticamente.Entretanto, você também pode se aproveitar do controle de servidor Xml.(Para obter uma visão geral, consulte Controle de servidor Web XML (Visual Studio).) Esse controle funciona como um espaço reservado em sua página ASP.NETVocê pode definir suas propriedades para um arquivo específico XML e transformação XSL.Quando a página é processada, o controle lê o XML, aplica a transformação e exibe os resultados.

Para obter mais informações sobre o XSL, consulte Transformations XSLT com the Classe XslTransform.

Esta explicação passo a passo irá ilustrar como usar o controle de servidor Xml para exibir informações XML usando transformações XSL.Nesse cenário, você terá o seguinte:

  • Um arquivo XML contendo várias mensagens de email fictícias.

  • Duas transformações XSL.Uma exibe somente a data, remetente e assunto das mensagens de email.O outro exibe a mensagem de email inteira.

    Observação:

    Todos esses arquivos são fornecidos como parte da explicação passo a passo.

Você criará uma página da Web que permite aos usuários exibir as informações em XML de duas maneiras.A página contém um caixa de seleção Somente Cabeçalhos que é selecionada por padrão.Portanto, a transformação padrão é aquela que exibe somente os cabeçalhos das mensagem de email.Se os usuários desmarcarem a caixa de seleção, as informações em XML são reexibidas com as mensagens de email por completo.

Pré-requisitos

A fim de concluir este explicação passo a passo, será necessário:

  • Visual Studio 2008 ou Visual Web Developer.

Você também deve ter um conhecimento geral sobre trabalhar no Visual Web Developer.Para obter uma introdução ao Visual Web Developer, consulte Demonstra Passo a passo: Criando um Basic página da Web no Visual Web Developer.

Criando um Site e Página da da Web

Nesta parte da explicação passo a passo, você irá criar um site e adicionar uma nova página a ele.Para esta explicação passo a passo, você criará um site no sistema de arquivos que não requer que você trabalhe com os Serviços de Informações da Internet (IIS) da Microsoft.Em vez disso, você irá criar e executar sua página no sistema de arquivos local.

Para criar um site do sistema de arquivos

  1. Abra Visual Web Developer.

  2. No menu Arquivo, clique em Novo Site.

  3. Em Modelos Instalados do Visual Studio, selecione ASP.NET Web Site.

  4. Na caixa Local, selecione Sistema de Arquivos e digite o nome da pasta onde você deseja manter as páginas do seu site.

    Por exemplo, digite o nome da pasta C:\WebSites.

  5. Na lista Language, clique em Visual Basic ou Visual C#.

  6. Clique em OK.

Adicionando o arquivo XML e as transformações XSL

Nesta parte da explicação passo a passo, você irá criar um arquivo XML e dois arquivos XSLT.

Para adicionar o arquivo XML ao seu projeto

  1. No Solution Explorer, clique com o botão direito do mouse na pasta App_Data e clique em AddNew Item.

    Observação:

    Quando você coloca o arquivo XML na pasta App_Data, ela automaticamente passa a possuir as permissões corretas para permitir que o ASP.NET leia e escreva no arquivo em tempo de execução.Além disso, ela protege o arquivo de ser visualizado em um navegador, porque a pasta App_Data é marcada como não navegável.

  2. Em Modelos Instalados do Visual Studio, clique em Arquivo XML.

  3. Na caixa Name, digite Emails.xml.

  4. Clique em Adicionar.

    Um novo arquivo XML é criado contendo somente a diretiva XML.

  5. Copie os seguinte dados XML e cole-os para o arquivo, sobrescrevendo o que já estiver no arquivo.

    <?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. Salve o arquivo e feche-o.

Em seguida, você adicionará duas transformações XSL ao seu projeto.

Para adicionar transformações XSL ao seu projeto

  1. No Solution Explorer, clique com o botão direito do mouse na pasta App_Data e clique em AddNew Item.

  2. Em Visual Studio installed templates, clique em Text File.

    Não há nenhum modelo para um arquivo de transformação.Portanto, você pode criá-lo como um arquivo de texto que possui a extensão correta.

  3. Na caixa Name, digite Email_headers.xslt.

    Observação:

    Certifique-se que você usa a extensão .xslt.

  4. Clique em Adicionar.

    Um novo arquivo em branco é criado.

  5. Copie o código de exemplo a seguir e cole-o no arquivo.

    <?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>
    Observação:

    Você pode ajustar esse modelo como você desejar; por exemplo, você pode alterar cores, tamanhos de fonte, estilos ou outros recursos.

  6. Salve o arquivo e feche-o.

  7. Repita as etapas 1 a 4, mas agora nomeie o arquivo como Email_all.xslt.

  8. Cole o código de exemplo a seguir para o arquivo 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. Salve o arquivo e feche-o.

Adicionando o controle XML à página

Agora que você tem um arquivo XML e duas transformações, você pode usá-las para exibir informações em uma página da Web.Você faz isso usando um controle de servidor Xml.

Para adicionar um controle XML

  1. Abra ou alterne para a página Default.aspx.

  2. Alternar para modo Design.

  3. A partir da guia Standard da Caixa de Ferramentas, arraste um controle Xml para a página.

    Uma caixa cinza que representa o controle Xml é adicionada à página.

  4. Selecione o controle e, na janela Propriedades, defina as propriedades a seguir.

    Propriedade

    Configuração

    DocumentSource

    ~/App_Data/Emails.xml

    TransformSource

    ~/App_Data/Email_headers.xslt

    Isso fará o controle Xml exibir somente os cabeçalhos das mensagens de email por padrão.

Adicionando controles para alterar as transformações

Nesta parte da explicação passo a passo, você usará uma caixa de seleção para permitir que os usuários alternem entre as transformações.O controle Xml atualmente aplica uma transformação que exibe somente os cabeçalhos das mensagens de email.

Para adicionar uma caixa de seleção para aplicar uma transformação diferente

  1. Mova o cursor na frente do controle Xml e pressione ENTER algumas vezes para criar espaço acima do controle Xml.

  2. A partir da guia Padrão da Caixa de Ferramentas, arraste um controle CheckBox para o formulário acima do controle Xml.

  3. Defina as seguintes propriedades do controle CheckBox.

    Propriedade

    Configuração

    Text

    Somente os cabeçalhos

    Checked

    True

    AutoPostBack

    True Isso faz com que o formulário seja postado e processado assim que o usuário clicar na caixa de seleção.

  4. Clique duas vezes no controle CheckBox.

    O editor de códigos abre com um manipulador para o evento CheckBox do controle CheckChanged chamado CheckBox1_CheckedChanged.

  5. Adicione código que alterna as transformações entre Email_headers.xslt e Email_all.xslt, dependendo do estado da caixa de seleção.

    O exemplo de código a seguir mostra como o manipulador CheckChanged concluído se parecerá.

    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";
    }
}

Testando

Agora você pode ver as transformações em ação.

Para testar as transformações

  1. Pressione CTRL+F5 para executar a página.

    Por padrão, você verá a data, o remetente e a linha de assunto das mensagens de email.

  2. Desmarque a caixa de seleção Headers only.

    As mensagens de email são reexibidas, neste momento com um layout diferente e o texto completo.

Próximas etapas

Esta explicação passo a passo ilustrou somente as noções básicas de como trabalhar com um documento XML e transformações.Em um aplicativo real, você frequentemente precisará trabalhar com o documento XML em mais profundidade.Estas são sugestões para maiores investigações:

  • Criar transformações mais sofisticadas.Nesta explicação passo a passo, você viu somente um exemplo de como você pode usar transformações.XSL é uma linguagem poderosa, com suporte não apenas para criar páginas HTML, mas também para praticamente qualquer tipo de transformação de XML para outra estrutura sofisticada.

  • Aplicar transformações programaticamente.Nesta explicação passo a passo, você aproveitou o controle de servidor Web Xml para fazer o trabalho de aplicação de transformações a dados XML brutos.Você pode achar útil fazer esse trabalho por você mesmo em seu aplicativo se, por exemplo, em seu aplicativo for impraticável usar um controle Xml.Para obter detalhes, consulte Transformações em XSLT com a classe XslTransform.

  • Escreva documentos XML em vez de apenas lê-los.O controle Xml facilita a exibição do conteúdo de um arquivo XML em um página da Web do ASP.NET.No entanto, convém criar ou corrigir arquivos XML você mesmo.Para obter detalhes, consulte:Documentos XML e dados.Para obter um exemplo de gravar em um arquivo XML, consulte Demonstra Passo a passo: Exibindo e acompanhamento anúncios com o acompanhamento AdRotator.

Consulte também

Outros recursos

Controle de servidor Web XML (Visual Studio)