Condividi tramite

Procedura dettagliata: visualizzazione di un documento XML in una pagina Web Form mediante trasformazioni

  • Articolo

Aggiornamento: novembre 2007

In questa procedura dettagliata viene illustrato come visualizzare le informazioni di un documento XML in una pagina Web. Nella procedura dettagliata verrà creato un file XML semplice. Verrà quindi utilizzato un controllo server ASP.NET e una trasformazione XSLT per visualizzare il contenuto del file XML nella pagina Web.

Nota:

È anche possibile utilizzare un file XML come origine dati e visualizzarne il contenuto mediante controlli quali il controllo GridView. Per informazioni dettagliate, vedere Procedura dettagliata: creazione di una pagina Web per visualizzare dati XML.

Per visualizzare le informazioni XML in una pagina Web, è necessario fornire le informazioni sulla visualizzazione e sulla formattazione, ad esempio gli elementi table, gli elementi p o qualsiasi altro elemento che si desideri utilizzare per visualizzare le informazioni. Inoltre, è necessario fornire istruzioni su come inserire i dati del file XML in questi tag, Ad esempio, è possibile decidere di visualizzare ogni elemento del file XML come una riga di tabella.

Un metodo per fornire queste istruzioni consiste nell'utilizzare il codice in una pagina ASP.NET per analizzare il file XML e inserire i dati nei tag HTML appropriati. Sebbene si tratti di un'operazione dispendiosa in termini di tempo e di difficile gestione, è un metodo efficace che fornisce un controllo preciso sul file XML a livello di codice.

Un metodo più efficace consiste nell'utilizzare il linguaggio di trasformazione XSL e creare trasformazioni o file XSL. Una trasformazione XSL contiene le seguenti informazioni:

  • Un modello, simile a una pagina HTML. Il modello consente di specificare la quantità di informazioni XML da visualizzare.

  • Le istruzioni di elaborazione XSL, nelle quali viene specificato come inserire le informazioni del file XML nel modello.

È possibile definire più trasformazioni e applicarle allo stesso file XML. Pertanto, è possibile utilizzare le informazioni XML in diversi modi, ad esempio visualizzandole in modalità differenti, selezionando dati differenti dal file XML e così via.

Dopo avere creato le trasformazioni XSL, è necessario applicarle al file XML, ovvero il file XML viene elaborato e trasformato in base a uno dei file XSL. L'output è un nuovo file contenente informazioni XML formattate in base al file di trasformazione.

È possibile eseguire anche questo processo a livello di codice. Tuttavia, è anche possibile utilizzare il controllo server Xml XML. Per informazioni generali, vedere Controllo server Web XML (Visual Studio). Questo controllo funge da segnaposto nella pagina Web ASP.NET. È possibile impostarne le proprietà su un file XML e una trasformazione XSL specifici. Durante l'elaborazione della pagina, il controllo legge il file XML, applica la trasformazione e visualizza i risultati.

Per ulteriori informazioni su XSL, vedere Trasformazioni XSLT con la classe XslTransform.

In questa procedura dettagliata verrà illustrato come utilizzare il controllo server Xml per visualizzare le informazioni XML mediante le trasformazioni XSL. In questo scenario saranno disponibili i seguenti elementi:

  • Un file XML contenente diversi messaggi di posta elettronica fittizi.

  • Due trasformazioni XSL. In una vengono visualizzati la data, il mittente e l'oggetto dei messaggi di posta elettronica, mentre nell'altra viene visualizzato l'intero messaggio di posta elettronica.

    Nota:

    Tutti questi file vengono forniti come parte della procedura dettagliata.

Verrà creata una pagina Web che consente agli utenti di visualizzare le informazioni XML in due diverse modalità. Nella pagina è presente una casella di controllo Solo intestazioni selezionata per impostazione predefinita. Pertanto, la trasformazione predefinita è quella in cui vengono visualizzate solo le intestazioni dei messaggi di posta elettronica. Se la casella di controllo viene deselezionata, le informazioni XML vengono visualizzate di nuovo con i messaggi di posta elettronica completi.

Prerequisiti

Per completare questa procedura dettagliata è necessario:

  • Visual Studio 2008 o Visual Web Developer.

È inoltre necessario avere una conoscenza generale dell'utilizzo di Visual Web Developer. Per un'introduzione a Visual Web Developer, vedere Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer.

Creazione di un sito e di una pagina Web

In questa parte della procedura dettagliata, sarà creato un sito Web a cui sarà aggiunta una pagina. Per questa procedura dettagliata, sarà creato sito Web di file system in cui non è richiesto l'utilizzo di Microsoft Internet Information Services (IIS). La pagina sarà invece creata ed eseguita nel file system locale.

Per creare un sito Web di file system

  1. Aprire Visual Web Developer.

  2. Scegliere Nuovo sito Web dal menu File.

  3. In Modelli Visual Studio installati fare clic su Sito Web ASP.NET.

  4. Nella casella Percorso selezionare File system e immettere il nome della cartella in cui salvare le pagine del sito Web.

    Digitare, ad esempio, il nome cartella C:\WebSites.

  5. Nell'elenco Linguaggio, fare clic su Visual Basic oppure su Visual C#.

  6. Scegliere OK.

Aggiunta del file XML e delle trasformazioni XSL

In questa parte della procedura dettagliata, saranno creati un file XML e due file XSLT.

Per aggiungere il file XML al progetto

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella App_Data e scegliere Aggiungi nuovo elemento.

    Nota:

    Quando viene inserito nella cartella App_Data, il file XML dispone dei diritti utente corretti per consentire ad ASP.NET la lettura e la scrittura del file in fase di esecuzione. Inoltre, in questo modo il file viene protetto dalla visualizzazione in un browser, in quanto la cartella App_Data viene contrassegnata come non visualizzabile mediante browser.

  2. In Modelli Visual Studio installati fare clic su File XML.

  3. Nella casella Nome, digitare Emails.xml.

  4. Fare clic su Aggiungi.

    Viene creato un nuovo file XML contenente solo la direttiva XML.

  5. Copiare i dati XML riportati di seguito e incollarli nel file sovrascrivendo il contenuto presente nel file.

    <?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. Salvare e chiudere il file.

Successivamente, verranno aggiunte due trasformazioni XSL al progetto.

Per aggiungere trasformazioni XSL al progetto

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella App_Data e scegliere Aggiungi nuovo elemento.

  2. In Modelli Visual Studio installati fare clic su File di testo.

    Non è presente alcun modello per un file della trasformazione. Pertanto, è possibile crearlo come file di testo con l'estensione appropriata.

  3. Nella casella Nome, digitare Email_headers.xslt.

    Nota:

    Accertarsi di utilizzare l'estensione xslt.

  4. Fare clic su Aggiungi.

    Viene creato un nuovo file vuoto.

  5. Copiare il codice di esempio riportato di seguito e incollarlo nel file.

    <?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:

    È possibile modificare questo modello nel modo desiderato, cambiando ad esempio i colori, le dimensioni del carattere, gli stili o altre caratteristiche.

  6. Salvare e chiudere il file.

  7. Ripetere i passaggi da 1 a 4, ma questa volta denominare il file Email_all.xslt.

  8. Incollare il codice di esempio riportato di seguito nel file 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. Salvare e chiudere il file.

Aggiunta del controllo XML alla pagina

A questo punto, si dispone di un file XML e due trasformazioni, che possono essere utilizzati per visualizzare le informazioni in una pagina Web. Tale operazione viene eseguita utilizzando un controllo server Xml.

Per aggiungere un controllo XML

  1. Aprire la pagina Default.aspx oppure passare a questa pagina.

  2. Passare alla visualizzazione Progettazione.

  3. Dalla scheda Standard della Casella degli strumenti, trascinare un controllo XML nella pagina.

    Alla pagina viene aggiunta una casella grigia che rappresenta il controllo XML.

  4. Selezionare il controllo e, nella finestra Proprietà, impostare le proprietà riportate di seguito.

    Proprietà

    Impostazione

    DocumentSource

    ~/App_Data/Emails.xml

    TransformSource

    ~/App_Data/Email_headers.xslt

    In questo modo, nel controllo XML verranno visualizzate per impostazione predefinita solo le intestazioni dei messaggi di posta elettronica.

Aggiunta di controlli per la modifica delle trasformazioni

In questa parte della procedura dettagliata verrà utilizzata una casella di controllo per consentire agli utenti di passare da una trasformazione all'altra. Mediante il controllo Xml attualmente viene applicata una trasformazione che determina la visualizzazione solo delle intestazioni dei messaggi di posta elettronica.

Per aggiungere una casella di controllo per applicare una trasformazione differente

  1. Spostare il cursore davanti al controllo XML e premere alcune volte INVIO per creare spazio vuoto al di sopra del controllo Xml.

  2. Dalla scheda Standard della Casella degli strumenti trascinare un controllo CheckBox nella pagina al di sopra del controllo XML.

  3. Impostare le seguenti proprietà del controllo CheckBox.

    Proprietà

    Impostazione

    Text

    Headers only (Solo intestazioni)

    Checked

    True

    AutoPostBack

    TrueIn tal modo il form viene inviato ed elaborato non appena l'utente fa clic sulla casella di controllo.

  4. Fare doppio clic sul controllo CheckBox.

    Viene visualizzato l'editor del codice con un gestore per l'evento CheckChanged del controllo CheckBox denominato CheckBox1_CheckedChanged.

  5. Aggiungere il codice per il passaggio delle trasformazioni tra Email_headers.xslt e Email_all.xslt a seconda dello stato della casella di controllo.

    Nell'esempio di codice seguente viene illustrato l'aspetto dell'intero gestore CheckChanged.

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

Test

A questo punto, viene illustrata l'applicazione pratica delle trasformazioni.

Per eseguire il test delle trasformazioni

  1. Premere CTRL+F5 per eseguire la pagina.

    In base all'impostazione predefinita, verranno visualizzati la data, il mittente e l'oggetto dei messaggi di posta elettronica.

  2. Deselezionare la casella di controllo Headers only (Solo intestazioni).

    I messaggi di posta elettronica verranno visualizzati di nuovo, questa volta con un layout differente e il testo completo.

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 il documento XML verrà spesso utilizzato in modo più dettagliato. Di seguito vengono riportati alcuni suggerimenti utili per un'analisi più approfondita:

  • Creare 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 per qualsiasi tipo di trasformazione da XML a un'altra struttura.

  • Applicare le trasformazioni a livello di codice. In questa procedura dettagliata è stato utilizzato il controllo server Web Xml per applicare le trasformazioni ai dati XML non elaborati. Può risultare utile eseguire questa operazione autonomamente, ad esempio nel caso in cui non sia possibile utilizzare un controllo Xml nell'applicazione. Per ulteriori informazioni, vedere Trasformazioni XSLT mediante la classe XslTransform.

  • Scrivere documenti XML anziché eseguirne semplicemente la 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 scrittura di a un file XML, vedere Procedura dettagliata: visualizzazione e rilevamento di annunci pubblicitari con il controllo AdRotator.

Vedere anche

Altre risorse

Controllo server Web XML (Visual Studio)