Procedura dettagliata: creazione di una pagina Web per visualizzare dati XML
Aggiornamento: novembre 2007
I dati sono spesso resi disponibili per le applicazioni Web in formato XML. I dati XML, tuttavia, sono per definizione gerarchici ed è possibile utilizzarli in controlli basati su elenchi, ad esempio il controllo GridView o DropDownList. In questa procedura dettagliata viene illustrato l'utilizzo dei dati XML come se fossero in una tabella di database tabulare.
In particolare, vengono illustrate le seguenti operazioni:
Utilizzo di un controllo di origine dati per leggere i dati XML e renderli disponibili ai controlli elenco.
Creazione di una pagina Master-Details che visualizza in maniera logica i dati XML correlati.
Applicazione di una trasformazione a un file xml per renderlo utilizzabile come dati tabulari.
.gif "Nota") Nota: |
|---|
È possibile anche utilizzare XML in forma gerarchica. Per informazioni dettagliate, vedere Procedura dettagliata: visualizzazione gerarchica dei dati in un controllo TreeView. |
Prerequisiti
Per completare questa procedura dettagliata è necessario:
Microsoft Visual Web Developer
.NET Framework
In questa procedura dettagliata si presume che l'utente sia in grado di utilizzare Visual Web Developer.
Creazione di un sito Web
Se un sito Web è già stato creato in Visual Web Developer (ad esempio seguendo le procedure di Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer), è possibile utilizzare quel sito Web e passare alla sezione successiva. In caso contrario, creare un sito e una pagina Web nuovi attenendosi alla procedura riportata di seguito.
Per creare un sito Web di file system
Aprire Visual Web Developer.
Dal menu File scegliere Nuovo sito Web.
Viene visualizzata la finestra di dialogo Nuovo sito Web.
In Modelli Visual Studio installati, fare clic su Sito Web ASP.NET.
Nella casella Percorso, scegliere File system e immettere il nome della cartella in cui salvare il sito Web.
Ad esempio, digitare il nome della cartella C:\WebSites\XMLWalkthrough.
Nell'elenco Linguaggio scegliere il linguaggio di programmazione, ad esempio Visual Basic o Visual C#.
Il linguaggio di programmazione scelto sarà il linguaggio predefinito per il sito Web; tuttavia, è possibile impostare il linguaggio di programmazione per ogni singola pagina.
Scegliere OK.
In Visual Web Developer vengono create la cartella e una nuova pagina denominata Default.aspx.
Creazione di un file xml per i dati
Per utilizzare i dati XML creare un file xml nel sito Web.
Per creare il file xml
In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella App_Data, quindi scegliere Aggiunginuovo elemento.
Nota:Quando viene inserito nella cartella App_Data il file xml dispone delle autorizzazioni corrette per consentire ad ASP.NET la lettura e la scrittura del file in fase di esecuzione. Inoltre, la memorizzazione dei file nella cartella App_Data li protegge da un'eventuale visualizzazione in un browser, poichè la cartella App_Data è contrassegnata come non visualizzabile.
In Modelli Visual Studio installati fare clic su File XML.
Nella casella Nome, digitare Bookstore.xml.
Fare clic su Add.
Viene creato un nuovo file xml contenente solo la direttiva XML.
Copiare i dati XML riportati di seguito e incollarli nel file sovrascrivendo il contenuto presente nel file.
<?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>Nel file Bookstore.xml sono contenute informazioni relative ai libri disponibili di una libreria in linea. Tenere presente le informazioni riportate di seguito sul file xml:
I valori delle proprietà per gli elementi vengono tutti espressi come attributi.
Il file contiene una struttura nidificata: ciascun libro può contenere i valori delle proprietà nonché uno o più commenti come elementi separati.
Salvare il file Bookstore.xml e chiuderlo.
Visualizzazione dei dati XML nel controllo elenco
Per rendere i dati disponibili ai controlli in una pagina ASP.NET, utilizzare un controllo di origine dati.
Per configurare l'accesso ai dati in un file xml
Aprire il file Default.aspx e passare alla visualizzazione Progettazione.
Trascinare un controllo XmlDataSource dal gruppo Dati della Casella degli strumenti alla pagina.
Dal menu AttivitàXmlDataSource menu, scegliere Configura origine dati.
Verrà visualizzata la finestra di dialogo Configura origine dati <DataSourceName>.
Nella casella File di dati digitare ~/App_Data/Bookstore.xml.
Scegliere OK.
Il controllo XmlDataSource rende i dati del file xml disponibili ai controlli presenti nella pagina. I dati sono disponibili in due formati: gerarchico e tabulare. I controlli associati al controllo XmlDataSource possono ottenere i dati nel formato più appropriato.
In questo caso la gerarchia del file Bookstore.xml si presta a un'interpretazione di tipo relazionale. I due livelli del file (libri e commenti) possono essere considerati come due tabelle correlate.
È possibile ora visualizzare i dati XML in un controllo elenco. Per iniziare, visualizzare alcuni dati XML in un controllo GridView.
Per utilizzare un controllo GridView relativamente a una visualizzazione di base dei dati XML
Trascinare un controllo GridView dal gruppo Dati della Casella degli strumenti alla pagina.
Nell'elenco Scegli origine dati del menu Attività GridView, fare clic su XmlDataSource1.
Premere CTRL+F5 per eseguire la pagina.
Nella pagina vengono visualizzati i dati XML in una griglia.
Con i dati visualizzati nel controllo GridView vengono illustrati i punti riportati di seguito sull'interpretazione dei dati XML:
Quando i dati XML vengono rappresentati come record di dati, per impostazione predefinita, le colonne vengono create da attributi (ad esempio ISBN).
Gli elementi figlio sono considerati come parte di una tabella correlata separata. Il controllo GridView ad esempio non viene associato agli elementi comments nel file.
Filtraggio dei dati XML mediante l'espressione XPath
Nella prima parte di questa procedura dettagliata l'utente si è basato sul comportamento predefinito dei controlli XmlDataSource e GridView per estrarre informazioni dal file xml. Nel controllo, tuttavia, vengono visualizzati solo alcuni dati XML.
In questa parte della procedura dettagliata verrà aggiunta un secondo controllo GridView utilizzandolo per la visualizzazione di informazioni Master-Details. Gli utenti potranno selezionare un libro singolo nel primo controllo GridView, mentre nel secondo controllo GridView verranno visualizzati, se presenti, i commenti dell'utente per quel libro specifico. Per visualizzare i commenti, verrà utilizzata un'espressione XPath che consente di specificare il livello del file di dati XML da estrarre. Dal momento che si intendono visualizzare i commenti solo per uno specifico libro, verrà creata l'espressione XPath in modo dinamico in base al libro selezionato dall'utente.
Per iniziare verrà aggiunto un secondo controllo GridView alla pagina, quindi verrà configurato il controllo GridView in modo da visualizzare i commenti dell'utente.
Per aggiungere un controllo GridView in modo da visualizzare i commenti dell'utente
Passare alla visualizzazione Progettazione.
Nella Casella degli strumenti , dal gruppo Dati, trascinare un controllo GridView nella pagina e posizionarlo nel controllo GridView sottostante.
Viene visualizzato il menu Attività GridView.
Scegliere New data source dalla casella Seleziona origine dati.
Viene visualizzata la Configurazione guidata origine dati.
Scegliere File XML come origine dati.
Nella casella Specificare l'ID dell'origine dati, lasciare l'impostazione predefinita, XmlDataSource2.
Scegliere OK.
Verrà visualizzata la finestra di dialogo Configura origine dati.
Nella casella File di dati digitare ~/App_Data/Bookstore.xml.
Sarà lo stesso file xml utilizzato precedentemente in questa procedura dettagliata, tuttavia verranno estratte informazioni diverse per il secondo controllo GridView.
Nella casella Espressione XPath digitare quanto segue:
/bookstore/book/comments/userComment
La proprietà XPath verrà successivamente modificata nel codice in modo dinamico. A questo punto, tuttavia, definendo un'espressione XPath per l'origine dati, con gli strumenti di Visual Web Designer verranno determinate le informazioni visualizzate nel controllo.
Scegliere OK.
Viene visualizzato il secondo controllo GridView con valutazioni e commenti dell'utente come dati di esempio.
Selezionare il controllo GridView2, quindi in Proprietà impostare Visibile su False.
Il secondo controllo GridView verrà visualizzato solo dopo aver selezionato un libro nel primo controllo GridView.
È possibile ora configurare il primo controllo GridView per consentire agli utenti di selezionare un libro. Verrà anche aggiunto il codice che crea un'espressione XPath basata sulla selezione dell'utente assegnandola al controllo XmlDataSource2. Come risultato finale, nel secondo controllo GridView verranno visualizzati i commenti utente relativi al libro selezionato.
Per configurare il controllo GridView per la selezione
Passare alla visualizzazione Progettazione, quindi selezionare il primo controllo GridView.
Scegliere Attiva selezione dal menu Attività GridView.
Viene aggiunta una nuova colonna al controllo GridView contenente un pulsante di collegamento con il testo Seleziona.
In Proprietà impostare DataKeyNames su ISBN.
È possibile scegliere la casella della proprietà per selezionare il valore.
Viene quindi configurato il controllo GridView per considerare la proprietà ISBN come chiave primaria per ciascun elemento dei dati XML.
Scegliere il controllo GridView. Nella finestra Proprietà selezionare Eventi dall'elenco a discesa nella parte superiore della finestra Proprietà. In questo modo verranno visualizzati tutti gli eventi associati al controllo.
Fare doppio clic sulla casella per l'evento SelectedIndexChanged.
Consente di passare all'editor di codice e di creare una struttura per il gestore relativamente all'evento SelectedIndexChanged.
Aggiungere il seguente codice evidenziato al gestore:
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; }Il codice consente di effettuare le seguenti operazioni:
Utilizza la proprietà SelectedIndex (del controllo GridView) per l'indicizzazione della matrice delle chiavi di dati, quindi per ritornare alla chiave primaria della riga selezionata. La proprietà DataKeyNames è stata precedentemente impostata per contenere i numeri ISBN.
Consente di creare una nuova espressione XPath, che include ISBN selezionato,
assegnandola alla proprietà XPath del controllo XmlDataSource2. L'assegnazione di una nuova espressione XPath alla proprietà XPath genera il controllo XmlDataSource per rivalutare i dati che restituisce. Il controllo GridView viene a sua volta associato di nuovo ai dati.
Consente di impostare la proprietà Visible su true, che genera il secondo controllo GridView da visualizzare. Occorre impostare in modo dichiarativo la visibilità su false dopo aver creato il secondo controlloGridView in modo che quest'ultimo non viene visualizzato fino alla selezione del libro.
È ora possibile eseguire il test della pagina.
Per eseguire il test del filtraggio con l'espressione XPath
Visualizzare la pagina Default.aspx e premere CTRL+F5 per eseguire la pagina.
Viene visualizzata la pagina con una griglia di informazioni sui libri.
Scegliere il collegamento Seleziona accanto al primo libro.
In una seconda griglia vengono visualizzati i commenti su quel libro specifico.
Scegliere il collegamento Seleziona accanto all'ultimo libro.
Non viene visualizzato alcun commento in quanto non presenti per questo libro.
Visualizzazione dei dati XML con un layout personalizzato
Per creare un un layout personalizzato dei dai, è possibile utilizzare un controllo DataList. Nel controllo DataList possono essere definiti uno o più modelli. Ciascun modello contiene una combinazione di testo statico e controlli che è possibile disporre in qualsiasi layout.
In questa parte della procedura dettagliata verrà utilizzato un controllo DataList per ottenere le stesse informazioni precedentemente visualizzate tramite il controllo GridView2. Sarà possibile, tuttavia, creare un layout personalizzato per i commenti dell'utente.
Per visualizzare i dati XML con un layout personalizzato
Passare alla visualizzazione Progettazione, scegliere il controllo GridView2, quindi premere CANC per rimuoverlo dalla pagina.
Trascinare un controllo DataList dal gruppo Dati della Casella degli strumenti alla pagina.
Nell'elenco Scegli origine dati del menu Attività DataList, scegliere XmlDataSource2.
Verrà utilizzata la stessa origine dati per il controllo DataList come per il controllo GridView2.
In Proprietà impostare Visibile su false.
Se lo smart tag non viene visualizzato, fare clic sul controllo DataList con il pulsante destro del mouse e scegliere Mostra smart tag.
Nel menu Attività DataList scegliere Modifica modelli, quindi nella casella Visualizzazione scegliere Item Template.
Nel controllo DataList viene visualizzata un'area modificabile per il modello dell'elemento. Il modello contiene un layout predefinito formato da testo statico e controlli Label associati alle colonne relative a valutazioni e commenti nel record di dati. Il controllo DataList può dedurre le struttura dei dati da visualizzare in quanto è stata definita un'espressione statica XPath per il controllo XmlDataSource2 precedentemente indicata in questa procedura dettagliata.
Nell'area modificabile, sostituire la prima didascalia con User rating:.
Modificare il commento della didascalia con Comment:.
Fare clic con il pulsante destro del mouse sul controllo DataList, scegliere Modifica modello, quindi fare clic su Modello di separatore.
Viene visualizzata un'altra area modificabile nel controllo DataList per la definizione del layout degli elementi da visualizzare tra ciascun record di dati.
Dal gruppo HTML della Casella degli strumenti, trascinare un controllo Righello orizzontale nell'area modificabile.
Fare clic con il pulsante destro del mouse sul controllo DataList, quindi scegliere Termina modifica modello.
Fare clic con il pulsante destro del mouse sulla pagina, quindi scegliere Visualizza codice per passare al codice della pagina.
Nel gestore GridView1_SelectedIndexChanged modificare la seguente riga:
GridView2.Visible = TrueGridView2.Visible = true;La riga risultante sarebbe:
DataList1.Visible = TrueDataList1.Visible = true;
È ora possibile eseguire il test del layout personalizzato.
Per eseguire il test del layout personalizzato
Visualizzare la pagina Default.aspx e premere CTRL+F5 per eseguire la pagina.
Viene visualizzata la pagina con una griglia di informazioni sui libri.
Scegliere il collegamento Seleziona accanto al primo libro.
In un elenco vengono visualizzati i commenti sul primo libro.
Scegliere il collegamento Seleziona accanto all'ultimo libro.
Non viene visualizzato alcun commento in quanto non presenti per questo libro.
Utilizzo di trasformazioni per ristrutturare i dati XML
Il file xml utilizzato in questa procedura dettagliata viene strutturato in modo tale che le proprietà di ciascun elemento vengano espresse sotto forma di attributi. In molti casi i file xml utilizzati presentano una struttura diversa; ad esempio, i valori di un file xml vengono spesso creati come elementi con testo interno.
Nel caso di un file xml in cui i valori della proprietà sono espressi in un formato diverso dagli attributi, è possibile creare un file di trasformazione (xslt) che consente di riformattare il file xml in modo da essere compatibile con il controllo XmlDataSource.
In questa parte della procedura dettagliata verrà utilizzato un file xml che contiene gli stessi dati del file Bookstore.xml utilizzato in precedenza. I dati saranno tuttavia strutturati in modo diverso rispetto al file Bookstore.xml, quindi verrà utilizzata una trasformazione per riformattarli dinamicamente.
Per iniziare questa sezione verrà creato un secondo file xml.
Per creare il secondo file xml
In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella App_Data, quindi scegliere Aggiunginuovo elemento.
In Modelli Visual Studio installati fare clic su File XML.
Nella casella Nome, digitare Bookstore2.xml.
Fare clic su Add.
Viene creato un nuovo file xml contenente solo la direttiva XML.
Copiare i dati XML riportati di seguito e incollarli nel file sovrascrivendo il contenuto presente nel file.
<?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>Salvare il file Bookstore2.xml e chiuderlo.
A questo punto è necessario un file di trasformazione che consentirà la conversione dei dati del file Bookstore2.xml file nel formato basato sugli attributi utilizzato dal controllo XmlDataSource.
Per creare il file di trasformazione
In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella App_Data, quindi scegliere Aggiunginuovo elemento.
In Modelli Visual Studio installati fare clic su File di testo.
Non è presente alcun modello per un file di trasformazione, quindi è possibile crearlo come file di testo con l'estensione appropriata.
Nella casella Nome, digitare Bookstore2.xml.
Nota:Accertarsi di utilizzare l'estensione xsl.
Fare clic su Add.
Viene creato un nuovo file vuoto.
Copiare il codice di trasformazione riportato di seguito e incollarlo nel file.
<?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:transform>Salvare il file Bookstore2.xml e chiuderlo.
Da questo punto il lavoro con i dati XML è molto simile a quello eseguito precedentemente in questa procedura dettagliata, a parte la possibilità di specificare il file di trasformazione quando si configura il controllo XmlDataSource. Per l'ultima parte di questa procedura dettagliata verrà creata una nuova pagina, quindi verranno ripetuti alcuni passaggi indicati nella prima parte di tale procedura. Al momento tuttavia verranno visualizzati i dati del file Bookstore2.xml.
Per configurare l'accesso ai dati in un file xml
In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito Web e scegliere Aggiunginuovo elemento.
In Modelli Visual Studio installati fare clic su Web Form.
Nella casella Nome, digitare Bookstore2.aspx.
Fare clic su Add.
Passare alla visualizzazione Progettazione.
Trascinare un controllo XmlDataSource dal gruppo Dati della Casella degli strumenti alla pagina.
Dal menu AttivitàXmlDataSource, scegliere Configura origine dati.
Verrà visualizzata la finestra di dialogo Configura origine dati .
Nella casella File di dati digitare ~/App_Data/Bookstore2.xml.
Nella casella File di trasformazione digitare ~/App_Data/Bookstore2.xml.
Scegliere OK.
Trascinare un controllo GridView dal gruppo Dati della Casella degli strumenti alla pagina.
Nell'elenco Scegli origine dati del menu Attività GridView, fare clic su XmlDataSource1.
Premere CTRL+F5 per eseguire la pagina.
Nella pagina vengono visualizzati i dati XML in una griglia. I dati visualizzati nella griglia saranno uguali a quelli presenti nella prima pagina, anche se questa volta il formato del file xml sottostante è diverso.
Passaggi successivi
In questa procedura dettagliata sono stati illustrati solo i concetti di base relativi all'utilizzo di un documento XML e delle trasformazioni. In un'applicazione reale accade di frequente che sia necessario utilizzare il documento XML in modo più approfondito. Di seguito vengono riportati alcuni suggerimenti utili per un'analisi più approfondita.
Creazione di trasformazioni più sofisticate. In questa procedura dettagliata è stato illustrato solo un esempio relativo all'utilizzo delle trasformazioni. XSL è un linguaggio efficace che fornisce supporto avanzato non solo per la creazione di pagine HTML ma praticamente per qualsiasi tipo di trasformazione da XML in un'altra struttura.
Scrittura di documenti XML (anziché esecuzione di una semplice lettura). Il controllo Xml consente di semplificare la visualizzazione del contenuto di un file XML in una pagina Web ASP.NET. È tuttavia possibile creare o correggere i file XML autonomamente. Per informazioni dettagliate, vedere Documenti e dati XML. Per un esempio di accesso a un file XML, vedere Procedura dettagliata: visualizzazione e rilevamento di annunci pubblicitari con il controllo AdRotator.
Vedere anche
Attività
Procedura dettagliata: visualizzazione gerarchica dei dati in un controllo TreeView
Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer