Demonstra Passo a passo: Criando um página da Web para exibir dados XML
Frequentemente dados se tornam disponíveis para aplicativos da Web em formato XML.Entretanto, dados XML são inerentemente hierárquicos, e talvez você queira ser capaz de usar os dados XML em controles baseados em lista, como os controles GridView ou DropDownList.Esta explicação passo a passo mostra como trabalhar com dados XML como se fossem em um tabela de banco de dados tabular.
Durante este explicação passo a passo, você aprenderá como:
Utilizar um controle de fonte de dados para ler dados XML e torná-lo disponível controles de lista.
Criar uma página mestre-detalhe que exibe dados XML logicamente relacionados.
Aplicar uma transformação a um arquivo .xml para tornar o arquivo utilizável como dados tabulares.
.gif "Observação") Observação: |
|---|
Você pode também trabalhar com XML na forma hierárquica.Para obter detalhes, consulte:Demonstra Passo a passo: Exibindo dados hierárquicos em um controle TreeView. |
Pré-requisitos
A fim de concluir este explicação passo a passo, será necessário:
O Visual Web Developer Microsoft
O .NET Framework
Esta explicação passo a passo supõe que você sabe como usar o Visual Web Developer.
Criando um site da Web
Se você já tiver criado um site no Visual Web Developer (por exemplo, seguindo as etapas em Demonstra Passo a passo: Criando um Basic página da Web no Visual Web Developer), você pode usar esse site e pular para a próxima seção.Caso contrário, crie um site e uma página novos, seguindo estas etapas.
Para criar um site do sistema de arquivos
Abra o Visual Web Developer.
No menu File, aponte para New Web Site.
The Novo site caixa de diálogo é exibida.
Em O Visual Studio installed templates, clicar Site da Web do ASP.NET.
Na caixa Location, clique em File System e insira o nome da pasta onde você deseja manter seu site.
Por exemplo, digite o nome de pasta C:\WebSites\XMLWalkthrough.
Na lista Language, clique a linguagem de programação na qual você prefere trabalhar, como Visual Basic. ou Visual C#.
A linguagem de programação que você escolher será o padrão para o site, mas você pode definir a linguagem de programação para cada página individualmente.
Clique em OK.
Visual Web Developer cria a pasta e uma nova página chamada Default.aspx.
Criando um arquivo.xml para dados
Para ter dados XML para trabalhar, crie um arquivo.xml no site
Para criar o arquivo.xml
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, o arquivo .xml tem as permissões corretas para permitir ao ASP.NET ler e gravar o arquivo em em tempo de execução.Além disso, manter arquivos na pasta App_Data protege-os de serem visualizados em um navegador, porque a pasta App_Data está marcada como não navegável.
Em Modelos Instalados do Visual Studio, clique em Arquivo XML.
No Nome caixa, digite Bookstore.XML.
Clique em Adicionar.
Um novo arquivo.xml é criado contendo somente a diretiva XML.
Copie os seguinte dados XML e cole-os para o arquivo, sobrescrevendo o que já estiver no arquivo.
<?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>O arquivo Bookstore.xml contém informações sobre livros que podem estar disponíveis numa livraria on-line.Observe o seguinte sobre o arquivo.xml:
Os valores propriedade para elementos são todos expressos como atributos.
O arquivo contém uma estrutura aninhada— cada livro pode conter seus valores de propriedade, assim como um ou mais comentários como elementos separados.
Salvar o arquivo Bookstore.xml, e feche-o.
Exibir Dados XML em um Controle de Lista
Para tornar dados disponíveis aos controles em um página da Web do ASP.NET, você usa um controle da fonte de dados.
Para configurar o acesso a dados para o arquivo.xml
Abra o arquivo Default.aspx, e alterne para modo Design.
Na Toolbox, a partir do grupoData, arraste um controle XmlDataSource para a página.
No menu XmlDataSourceTasks, clique em Configure Data Source.
A caixa de diálogo Configure Data Source<DataSourceName> aparece.
No Arquivo de dados caixa, digite ~ / Bookstore.XML.
Clique em OK.
O controle XmlDataSource disponibiliza os dados no arquivo .xml para controles que estejam na página.Os dados estão disponível em dois formatos: hierárquico e tabulares.Controles que se vinculam ao controle XmlDataSource podem obter os dados no formato que funciona para eles.
Nesse caso, a hierarquia do arquivo Bookstore.xml se presta bem para uma interpretação relacional.Os dois níveis do arquivo (livros e comentários) podem ser pensados como duas tabelas relacionadas.
Agora você pode exibir os dados XML em um controle de listagem.Para começar, exiba alguns dos dados XML em um controle GridView.
Para usar um controle GridView para a exibição básica de dados XML
Na Caixa de Ferramentas, do grupo Dados, arraste um controle GridView para a página.
No menu GridView Tasks, na Choose Data Source list, clique em XmlDataSource1.
Pressione CTRL+F5 para executar a página.
A página exibe o dados XML em uma grade.
Os dados exibidos no controle GridView ilustram os seguintes pontos sobre como os dados XML são interpretados:
Quando os dados XML são representados como um registro de dados, por padrão, as colunas são criadas a partir de atributos (como ISBN).
Elementos-filho são tratados como parte de uma tabela relacionada separada.Para esse exemplo, o controle GridView não se vincula aos elementos comments no arquivo.
Filtragem de Dados XML Usando uma Expressão XPath
Na primeira parte desta explicação passo a passo, você dependia do comportamento padrão dos controles XmlDataSource e GridView para extrair informações do arquivo .xml.Entretanto, o controle exibe somente alguns dos o dados XML.
Nesta parte da explicação, você irá adicionar um segundo controle GridView e usá-lo para mostrar informações mestre-detalhe.Os usuários poderão selecionar um livro individual no primeiro controle GridView, e o segundo controle GridView exibirá os comentários de usuário relacionados, se houverem, para esse livro.Para exibir os comentários, você usará uma expressão XPath, que permite que você especifique que nível do arquivo de dados XML que se deseja extrair.Já que você deseja exibir comentários apenas para um livro específico, você criará a expressão XPath dinamicamente, dependendo de que livro o usuário tiver selecionado.
Para começar, você irá adicionar um segundo controle GridView à página, e em seguida, configurar o controle GridView para que ele exiba comentários do usuário.
Para adicionar um controle GridView para exibir comentários do usuário
Alternar para modo Design.
Na Toolbox, a partir do grupo Data, arraste um controle GridView para a página e coloque-o abaixo do primeiro controle GridView.
O menu GridView Tasks é exibido.
Na caixa Choose Data Source, clique em New data source.
O Data Source Configuration Wizard aparece.
Clique em XML File como a fonte de dados.
Na caixa Specify an ID for the data source, deixe o padrão, XmlDataSource2.
Clique em OK.
A caixa de diálogo Configure Data Source aparece.
No Arquivo de dados caixa, digite ~ / Bookstore.XML.
Você usará o mesmo arquivo .xml que você usou anteriormente nesta explicação, mas você extrairá diferentes informações a partir dele para o segundo controle GridView.
Na caixa XPath Expression, digite o seguinte expressão:
/bookstore/book/comments/userComment
Posteriormente, você irá alterar a propriedade XPath dinamicamente no código.Entretanto, definindo uma expressão XPath para a fonte de dados agora, você ajudará as ferramentas do Visual Web Designer a determinar quais informações serão ser exibidas no controle.
Clique em OK.
O segundo controle GridView aparece, mostrando classificações e comentários de usuário como dados de exemplo.
Selecione o controle GridView2, e em Propriedades, defina Visible como False.
O segundo controle GridView aparecerá apenas quando o usuário tiver selecionado um livro no primeiro controle GridView.
Agora você pode configurar o primeiro controle GridView para permitir que os usuários selecionem um livro.Você também irá adicionar código que cria uma expressão XPath com base na seleção do usuário e a atribui ao controle XmlDataSource2.O resultado final é que o segundo controle GridView exibirá os comentários do usuário para o livro selecionado.
Para configurar o controle GridView para seleção
Alterne para o modo Design, e em seguida, selecione o primeiro controle GridView .
No menu GridView Tasks, selecione Enable Selection.
Uma nova coluna será adicionada ao controle GridView contendo um botão de link com o texto Selecionar.
Em Propriedades, defina DataKeyNames como ISBN.
Você pode clicar para na caixa propriedade selecionar o valor .
Isso configura o controle GridView para tratar a propriedade ISBN como a chave primária para cada elemento nos dados XML.
Clique no controle GridView.Na janela Properties, selecione Events da lista suspensa na parte superior da janela Properties.Isso exibirá todos os eventos associados com o controle.
Clique duas vezes na caixa do evento SelectedIndexChanged.
Isto o leva ao editor de códigos e cria um esqueleto de manipulador para o evento SelectedIndexChanged.
Adicione o seguinte código destacado para o manipulador.
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; }O código faz o seguinte:
Ele usa a propriedade SelectedIndex (do controle GridView) para indexar o vetor das chaves de dados, e então retornar a chave primária da linha selecionada.Anteriormente, você definiu a propriedade DataKeyNames para conter números ISBN.
Ele cria uma nova expressão XPath que inclui o ISBN selecionado.
Ele atribui a nova expressão XPath à propriedade XPath (do controle XmlDataSource2).Atribuir uma nova expressão XPath à propriedade XPath faz com que o controle XmlDataSource reavalie os dados que ele retorna.O controle GridView, por sua vez, revincula-se aos dados.
Ele define a propriedade Visible para true, o que faz com que o segundo controle GridView seja exibido.Você declarativamente definiu a visibilidade para false quando você criou o segundo controle GridView , assim, ele não aparece até que o usuário selecione um livro.
Agora você pode testar a página.
Para testar a filtragem com a expressão XPath
Exiba a página Default.aspx e pressione CTRL+F5 para executar a página.
A página é exibida com uma grade de informações sobre livros.
Clique no link Select próximo ao primeiro livro.
Os comentários sobre esse livro são exibidos numa segunda grade.
Clique no link Select próximo ao último livro.
Nenhum comentário é exibido, porque não há nenhum para este catálogo.
Exibindo Dados XML com um Layout Personalizado
Para criar um layout personalizado para dados, você pode usar um controle DataList.No controle DataList, você pode definir um ou mais modelos.Cada modelo contém uma combinação de texto estático e controles que você pode organizar em qualquer layout que você desejar.
Nesta parte da explicação passo a passo, você usará um controle DataList para exibir as mesmas informações que você exibiu anteriormente usando o controle GridView2.Entretanto, você será capaz para criar um layout personalizado para os comentários do usuário.
Para exibir dados XML com um layout personalizado
Alternar para modo o Design, clique no controle GridView2, e pressione DELETE para removê-lo da página.
NaToolbox a partir do grupoData, arraste um controle DataList para a página.
No menu DataList Tasks, na Choose Data Source list, clique em XmlDataSource2.
Você usará a mesma fonte de dados para o controle DataList que você usou para o controle GridView2.
Em Propriedades, defina Visible como false.
Se a marca inteligente não for exibida, clique com o botão direito do mouse no controle DataList e, em seguida, clique em Show Smart Tag
No menu DataList Tasks, clique em Edit Templates e em seguida, na caixa Display, clique em Item Template
O controle DataList aparece com uma região editável para o modelo do item.O modelo contém um layout padrão que consiste em texto estático e controles Label que estejam acoplados às colunas Rating e Comment no registro de dados.(O controle DataList é capaz de inferir a estrutura dos dados que ele exibirá porque você definiu uma expressão estática XPath para o controle XmlDataSource2 anteriormente nesta explicação.)
Na região editável, altere a primeiro legenda para Nota do usuário:.
Altere a legenda comment para Comentário:.
Clique com o botão direito do mouse a barra de título do controle DataList, aponte para Edit Template, e clique em Separator Template.
Outra região editável é exibida no controle DataList, esta para definir o layout dos elementos que irão aparecer entre cada registro de dados.
Na Toolbox, a partir do grupoHTML, arraste um controle Horizontal Rule para a área editável.
Clique com o botão direito do mouse no controle DataList e clique em End Template Editing.
Clique a página com o botão direito do mouse, e clique em View Code para alternar para o código da página.
No manipulador GridView1_SelectedIndexChanged, altere a linha a seguir:
GridView2.Visible = TrueGridView2.Visible = true;Para o seguinte:
DataList1.Visible = TrueDataList1.Visible = true;
Agora você pode testar o layout personalizado.
Para testar o layout personalizado
Exiba a página Default.aspx e pressione CTRL+F5 para executar a página.
A página é exibida com uma grade de informações sobre livros.
Clique no link Select próximo ao primeiro livro.
Os comentários sobre o primeiro livro são exibidos em uma lista.
Clique no link Select próximo ao último livro.
Nenhum comentário é exibido, porque não há nenhum para este catálogo.
Usando Transformações Para Reestruturar Dados XML
O arquivo .xml que você tiver usado nesta explicação é estruturado de tal maneira que as propriedades de cada elemento são expressas como atributos.Em muitos casos, os arquivos .xml com os quais você trabalha são estruturados de forma diferente.Com frequência, por exemplo, valores em um arquivo .xml são criados como elementos com texto interno.
Se você tiver um arquivo .xml no qual os valores de propriedades são expressos em um formato diferente dos atributos, você pode criar um arquivo de transformação (.xslt) que pode dinamicamente reformatar o arquivo .xml para que ele seja compatível com o controle XmlDataSource.
Nesta parte da explicação, você trabalhará com um arquivo .xml que contém os mesmos dados que o arquivo Bookstore.xml que você utilizou anteriormente.Entretanto, os dados serão estruturados de forma diferente do que eram no arquivo Bookstore.xml, portanto, você usará uma transformação para reformatá-los dinamicamente.
Para começar nesta seção, você criará um segundo arquivo.xml.
Para criar o segundo arquivo.xml
No Solution Explorer, clique com o botão direito do mouse na pasta App_Data e clique em AddNew Item.
Em Modelos Instalados do Visual Studio, clique em Arquivo XML.
No Nome caixa, digite Bookstore2.XML.
Clique em Adicionar.
Um novo arquivo.xml é criado contendo somente a diretiva XML.
Copie os seguinte dados XML e cole-os para o arquivo, sobrescrevendo o que já estiver no arquivo.
<?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>Salve o arquivo Bookstore2.xml, e feche-o.
Agora você precisa de um arquivo de transformação que irá converter os dados no arquivo Bookstore2.xml para o formato baseado em atributos que é usado pelo controle XmlDataSource.
Para criar o arquivo de transformação
No Solution Explorer, clique com o botão direito do mouse na pasta App_Data e clique em AddNew Item.
Em Visual Studio installed templates, clique em Text File.
Não há nenhum modelo para um arquivo de transformação, para que você pode criar ele como um arquivo de texto com a extensão correta.
No Nome caixa, digite Bookstore2.xsl.
Observação:Certifique-se de usar a extensão XSL.
Clique em Adicionar.
Um novo arquivo em branco é criado.
Copie o seguinte código de transformação, e cole-o para o arquivo.
<?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>Salve o arquivo Bookstore2.xsl, e feche-o.
A partir deste ponto, trabalhar com os dados XML é muito semelhante ao que você fez anteriormente nesta explicação passo a passo, exceto que você pode especificar o arquivo de transformação quando você configura o controle XmlDataSource.Para a última parte desta explicação, você irá criar uma nova página, e repetir algumas das etapas da primeira parte desta explicaçã.No entanto, neste momento você mostrará os dados do arquivo Bookstore2.xml.
Para configurar o acesso a dados para o arquivo.xml
No Solution Explorer, clique com o botão direito no nome do seu site e, em seguida, em AddNew Item.
Em Visual Studio installed templates, clique em Web Form.
No Nome caixa, digite Bookstore2.aspx.
Clique em Adicionar.
Alternar para modo Design.
Na Toolbox, a partir do grupoData, arraste um controle XmlDataSource para a página.
No menu XmlDataSourceTasks, clique em Configure Data Source.
A caixa de diálogo Configure Data Sourceaparece.
No Arquivo de dados caixa, digite ~ / Bookstore2.XML.
No Transformar o arquivo caixa, digite ~ / Bookstore2.xsl.
Clique em OK.
Na Caixa de Ferramentas, do grupo Dados, arraste um controle GridView para a página.
Sobre o GridView Tasks menu, no escolher a fonte de dados lista, clicar XmlDataSource1.
Pressione CTRL+F5 para executar a página.
A página exibe o dados XML em uma grade.Os dados aparecerão na grade do mesmo jeito da primeira página, mesmo que o formato da base o arquivo.xml seja diferente desta vez.
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:
Criando 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.
Escrevendo documentos XML (em vez de simplesmente 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
Tarefas
Demonstra Passo a passo: Exibindo dados hierárquicos em um controle TreeView
Demonstra Passo a passo: Criando um Basic página da Web no Visual Web Developer