チュートリアル : 変換による Web フォームページへの XML ドキュメントの表示

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

このチュートリアルでは、XML ドキュメントを Web ページに表示する方法について説明します。このチュートリアルでは、簡単な XML ファイルを作成します。次に、ASP.NET サーバーコントロールと XSLT 変換を使用して、XML ファイルの内容を Web ページに表示します。

メモ :
XML ファイルをデータソースとして使用し、そのコンテンツを GridView などのコントロールを使用して表示することもできます。詳細については、「チュートリアル : XML データを表示する Web ページの作成」を参照してください。

XML 情報を Web ページで表示するには、書式情報と表示情報を用意する必要があります。たとえば、table 要素、p 要素など、情報を表示するために必要なタグをすべて提供する必要があります。また、XML ファイルのデータをこれらのタグに組み込む方法を指示する必要もあります。たとえば、XML ファイルの各要素をテーブルの行として表示するかどうかを指示します。

このような指示を行う方法の 1 つとして、ASP.NET Web ページでコードを使って XML ファイルを解析し、適切な HTML タグにデータを読み込む方法があります。この方法は時間がかかり、管理が困難な場合もありますが、XML ファイルに対して正確なプログラミングによる制御ができるので強力な方法と言えます。

それよりも優れた方法が、XSL 変換言語を使用して変換、つまり XSL ファイルを作成する方法です。XSL 変換には、次の情報が含まれます。

HTML ページに似たテンプレート。このテンプレートは、XML 情報の表示方法を指定します。
XSL 処理の指示。XML ファイルからの情報をテンプレートに読み込む方法を厳密に指定します。

複数の変換を定義して、同じ XML ファイルに適用できます。これにより、XML 情報を異なる方法で使ったり、異なる方法で表示したりできます。また、XML ファイルから異なるデータを選択することもできます。

XSL 変換を作成した後は、それを XML ファイルに適用する必要があります。つまり、いずれかの XSL ファイルに従って変換することにより、XML ファイルを処理します。出力は、変換ファイルに従って書式設定された XML 情報を含む新しいファイルです。

このプロセスも、プログラムで実行できます。ただし、Xml サーバーコントロールを利用することもできます。概要については、「XML Web サーバーコントロール (Visual Studio)」を参照してください。このコントロールは、ASP.NET Web ページ上のプレースホルダとして機能します。このコントロールのプロパティには、特定の XML ファイルと XSL 変換を設定できます。ページの処理時に、コントロールは XML を読み取り、変換を適用し、結果を表示します。

XSL の詳細については、「XslTransform クラスを使用した XSLT 変換」を参照してください。

このチュートリアルでは、Xml サーバーコントロールにより XSL 変換を使用して XML 情報を表示する方法を示します。このシナリオには、次のものが含まれます。

いくつかの仮想的な電子メールメッセージを含む XML ファイル。
2 つの XSL 変換。1 つは、電子メールメッセージの日付、差出人、および件名だけを表示します。もう 1 つは、電子メール全体を表示します。

メモ :

これらのファイルは、すべてチュートリアルの一部として提供されます。

メモ :
これらのファイルは、すべてチュートリアルの一部として提供されます。

ユーザーが XML 情報を 2 つの異なる方法で表示できる Web ページを作成します。このページには、既定でオンになっている [ヘッダーのみ] チェックボックスがあります。したがって、既定の変換では、電子メールメッセージのヘッダーだけが表示されます。ユーザーがチェックボックスをオフにすると、電子メールメッセージ全体が再表示されます。

前提条件

このチュートリアルを実行するための要件は次のとおりです。

Visual Studio 2008 または Visual Web Developer

Visual Web Developer の基本的な操作方法を理解していることも必要です。Visual Web Developer については、「チュートリアル : Visual Web Developer での基本的な Web ページの作成」を参照してください。

Web サイトおよびページの作成

チュートリアルのこの部分では、Web サイトを作成し、そこに新しいページを追加します。このチュートリアルでは、ファイルシステム Web サイトを作成しますが、Microsoft Internet Information Services (IIS) は使用しません。その代わりに、ローカルファイルシステムでページを作成し、実行します。

ファイルシステム Web サイトを作成するには

Visual Web Developer を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスで、[ファイルシステム] をクリックし、Web サイトのページを格納するフォルダの名前を入力します。

たとえば、フォルダ名として「C:\WebSites」と入力します。
[言語] ボックスの [Visual Basic] または [Visual C#] をクリックします。
[OK] をクリックします。

XML ファイルと XSL 変換の追加

ここでは、1 つの XML ファイルと 2 つの XSLT ファイルを作成します。

プロジェクトに XML ファイルを追加するには

ソリューションエクスプローラで、App_Data フォルダを右クリックし、次に [新しい項目の追加] をクリックします。

メモ :
App_Data フォルダにこの XML ファイルを格納すると、実行時に ASP.NET でこのファイルを読み書きするための正しいアクセス許可がこのファイルに設定されます。また、App_Data フォルダはブラウザで表示不可とマークされるので、ファイルがブラウザで表示されるのを防止できます。

[Visual Studio にインストールされたテンプレート] の [XML ファイル] をクリックします。
[名前] ボックスに「Emails.xml」と入力します。
[追加] をクリックします。

XML ディレクティブだけを含む新しい XML ファイルが作成されます。

次の XML データをコピーし、ファイルに貼り付けて、そのファイルの内容を上書きします。

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

ファイルを保存して閉じます。

次に、2 つの XSL 変換をプロジェクトに追加します。

プロジェクトに XSL 変換を追加するには

ソリューションエクスプローラで、App_Data フォルダを右クリックし、次に [新しい項目の追加] をクリックします。
[Visual Studio にインストールされたテンプレート] の [テキストファイル] をクリックします。

変換ファイルのテンプレートはありません。そのため、変換ファイルをテキストファイルを作成し、正しい拡張子を指定します。
[名前] ボックスに「Email_headers.xslt」と入力します。

メモ :

拡張子は、必ず .xslt としてください。
[追加] をクリックします。

新しい空のファイルが作成されます。

メモ :
拡張子は、必ず .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="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>

メモ :
このテンプレートは、必要に応じて編集できます。たとえば、色、フォントサイズ、スタイルなどを変更できます。

ファイルを保存して閉じます。
Email_all.xslt というファイル名で手順 1. ～ 4. を繰り返します。

次のプログラム例を 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>

ファイルを保存して閉じます。

Xml コントロールのページへの追加

1 つの XML ファイルと 2 つの変換が追加され、これらのファイルを使用して Web ページで情報を表示できるようになりました。これには、Xml サーバーコントロールを使います。

Xml コントロールを追加するには

Default.aspx ページを開くか、そのページに切り替えます。
デザインビューに切り替えます。
ツールボックスの [標準] タブから、Xml コントロールをページにドラッグします。

Xml コントロールを表す灰色のボックスがページに追加されます。
このコントロールを選択し、[プロパティ] ウィンドウで次のプロパティを設定します。

プロパティ

設定

DocumentSource

~/App_Data/Emails.xml

TransformSource

~/App_Data/Email_headers.xslt

これにより、Xml コントロールには、既定で電子メールメッセージのヘッダーだけが表示されます。

プロパティ	設定
DocumentSource	~/App_Data/Emails.xml
TransformSource	~/App_Data/Email_headers.xslt

変換を変更するコントロールの追加

ここでは、チェックボックスを使用してユーザーが変換を切り替えることができるようにします。Xml コントロールは、現在、電子メールメッセージのヘッダーだけを表示する変換を適用します。

異なる変換を適用するチェックボックスを追加するには

カーソルを Xml コントロールの前に移動し、Enter キーを数回押すと、Xml コントロールの上に空間ができます。
ツールボックスの [標準] タブから CheckBox コントロールをページの Xml コントロールの上にドラッグします。

CheckBox コントロールの次のプロパティを設定します。

プロパティ	設定
Text	ヘッダーのみ
Checked	True
AutoPostBack	True。ユーザーがチェックボックスをクリックするとすぐにフォームがポストされて処理されます。

CheckBox コントロールをダブルクリックします。

コードエディタが開き、CheckBox1_CheckedChanged という名前の CheckBox コントロールの CheckChanged イベントのハンドラが表示されます。

チェックボックスの状態に応じて、変換を「Email_headers.xslt」と「Email_all.xslt」の間で切り替えるコードを追加します。

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

テスト

ここで、変換の動作を確認できます。

変換をテストするには

Ctrl キーを押しながら F5 キーを押してページを実行します。

既定では、電子メールメッセージの日付、差出人、および件名が表示されます。
[ヘッダーのみ] チェックボックスをオフにします。

電子メールメッセージが再表示されます。レイアウトが変わり、今回はテキスト全体が表示されます。

次の手順

このチュートリアルでは、XML ドキュメントおよび変換方法の基本だけを示しています。実際のアプリケーションでは、多くの場合、より詳細な XML ドキュメントの操作を行います。たとえば、次のような操作についても調べてみてください。

さらに高度な変換を作成します。このチュートリアルで説明した変換の使用方法は 1 種類だけです。XSL は強力な言語で、HTML ページの作成だけでなく、XML から他の構造へのほとんどすべての種類の変換に対しても、洗練されたサポートが用意されています。
プログラムによって変換を適用します。このチュートリアルでは、Xml Web サーバーコントロールを利用して、生の XML データに変換を適用しました。実際のアプリケーションでは、Xml コントロールを使用できない場合などに、この作業を自分で行った方が便利な場合もあります。詳細については、「XslTransform クラスを使用した XSLT 変換」を参照してください。
XML ドキュメントを単に読み込むのではなく作成します。Xml コントロールを使用すると、XML ファイルのコンテンツを容易に ASP.NET Web ページに表示できます。ただし、XML ファイルを自分で作成したり修正したりすることが必要になる場合もあります。詳細については、「XML ドキュメントと XML データ」を参照してください。XML ファイルを記述する方法の例については、「チュートリアル : AdRotator コントロールを使用した広告の表示と追跡」を参照してください。

参照

その他の技術情報

XML Web サーバーコントロール (Visual Studio)

次の方法で共有

チュートリアル : 変換による Web フォームページへの XML ドキュメントの表示

前提条件

Web サイトおよびページの作成

ファイルシステム Web サイトを作成するには

XML ファイルと XSL 変換の追加

プロジェクトに XML ファイルを追加するには

プロジェクトに XSL 変換を追加するには

Xml コントロールのページへの追加

Xml コントロールを追加するには

変換を変更するコントロールの追加

異なる変換を適用するチェックボックスを追加するには

テスト

変換をテストするには

次の手順

参照

その他の技術情報

その他のリソース

次の方法で共有

チュートリアル : 変換による Web フォーム ページへの XML ドキュメントの表示

前提条件

Web サイトおよびページの作成

ファイル システム Web サイトを作成するには

XML ファイルと XSL 変換の追加

プロジェクトに XML ファイルを追加するには

プロジェクトに XSL 変換を追加するには

Xml コントロールのページへの追加

Xml コントロールを追加するには

変換を変更するコントロールの追加

異なる変換を適用するチェック ボックスを追加するには

テスト

変換をテストするには

次の手順

参照

その他の技術情報

その他のリソース

チュートリアル : 変換による Web フォームページへの XML ドキュメントの表示

ファイルシステム Web サイトを作成するには

異なる変換を適用するチェックボックスを追加するには