次の方法で共有


チュートリアル : XML データを表示する Web ページの作成

更新 : 2007 年 11 月

Web アプリケーションで使用するデータの多くは XML 形式で提供されます。XML データは本質的に階層構造を持ちますが、GridView コントロールや DropDownList コントロールなどのリストベースのコントロールで XML データを使用できるようにする必要が生じることがあります。このチュートリアルでは、XML データを表形式のデータベース テーブル内にあるかのように操作する方法について説明します。

このチュートリアルでは、次の作業を行う方法について説明します。

  • データ ソース コントロールを使用して XML データを読み取り、リスト コントロールで使用できるようにする。

  • GridView コントロールと DataList コントロールを XML データにバインドする。

  • 論理的に関連付けられた XML データを表示するマスター/詳細ページを作成する。

  • .xml ファイルに変換を適用し、そのファイルを表形式データとして使用できるようにする。

13ftcwy9.alert_note(ja-jp,VS.90).gifメモ :

XML を階層形式で使用することもできます。詳細については、「チュートリアル : TreeView コントロールでの階層データの表示」を参照してください。

前提条件

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

  • Microsoft Visual Web Developer

  • .NET Framework

このチュートリアルでは、Visual Web Developer の使用方法を理解していることを前提としています。

Web サイトの作成

チュートリアル : Visual Web Developer での基本的な Web ページの作成 の手順などを実行して Visual Web Developer で Web サイトを作成済みの場合は、その Web サイトを使用し、次のセクションに進むことができます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。

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

  1. Visual Web Developer を開きます。

  2. [ファイル] メニューの [新しい Web サイト] をクリックします。

    [新しい Web サイト] ダイアログ ボックスが表示されます。

  3. [Visual Studio にインストールされたテンプレート][ASP.NET Web サイト] をクリックします。

  4. [場所] ボックスで、[ファイル システム] をクリックし、Web サイトを格納するフォルダの名前を入力します。

    たとえば、「C:\WebSites\XMLWalkthrough」というフォルダ名を入力します。

  5. [言語] ボックス、作業に使用する [Visual Basic][Visual C#] などのプログラミング言語をクリックします。

    選択したプログラミング言語は Web サイトでの既定として設定されます。ただし、プログラミング言語をページごとに設定することもできます。

  6. [OK] をクリックします。

    Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。

データの .xml ファイルの作成

操作する XML データを用意するには、Web サイト内に .xml ファイルを作成します。

.xml ファイルを作成するには

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

    13ftcwy9.alert_note(ja-jp,VS.90).gifメモ :

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

  2. [Visual Studio にインストールされたテンプレート][XML ファイル] をクリックします。

  3. [名前] ボックスに「Bookstore.xml」と入力します。

  4. [追加] をクリックします。

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

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

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

    Bookstore.xml ファイルには、オンライン書店から入手できる書籍に関する情報が格納されます。.xml ファイルについては次の点に注意してください。

    • 要素のプロパティ値はすべて属性として表現されます。

    • ファイルには入れ子構造が格納されます。各ブックには、そのブックのプロパティ値、および別の要素として 1 つ以上のコメントが格納されます。

  6. Bookstore.xml ファイルを保存して閉じます。

リスト コントロールにおける XML データの表示

ASP.NET Web ページのコントロールでデータを使用できるようにするには、データ ソース コントロールを使用します。

.xml ファイルへのデータ アクセスを設定するには

  1. Default.aspx ファイルを開き、デザイン ビューに切り替えます。

  2. ツールボックス[データ] グループから、XmlDataSource コントロールをページにドラッグします。

  3. [XmlDataSource タスク] メニューの [データ ソースの構成] をクリックします。

    [データ ソースの構成 <DataSourceName>] ダイアログ ボックスが表示されます。

  4. [データ ファイル] ボックスに「~/App_Data/Bookstore.xml」を入力します。

  5. [OK] をクリックします。

XmlDataSource コントロールを使用すると、ページ上のコントロールで .xml ファイル内のデータを使用できるようになります。データは 2 つの形式 (階層形式と表形式) で使用できます。XmlDataSource コントロールにバインドされたコントロールは、それらのコントロールで機能する形式でデータを取得できます。

この場合、Bookstore.xml ファイルの階層構造は相対的に解釈されます。2 つのレベルのファイル (books と comments) は、2 つの関連するテーブルとして考えられます。

この段階では XML データをリスト コントロールとして表示できます。まず、GridView コントロールに XML データを表示します。

GridView コントロールを使用して XML データを基本的な方法で表示するには

  1. ツールボックス[データ] グループから、GridView コントロールをページにドラッグします。

  2. [GridView タスク] メニューの [データ ソースの選択] ボックスの [XmlDataSource1] をクリックします。

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

    このページのグリッド内に XML データが表示されます。

GridView コントロール内に表示されるデータによって、次のような XML データの解釈方法がわかります。

  • XML データをデータ レコードとして表す場合、既定では列が属性 (ISBN など) から作成されます。

  • 子要素は、別の関連テーブルの一部として処理されます。この例の場合は、GridView コントロールがファイル内の comments 要素にバインドされません。

XPath 式を使用した XML データのフィルタ処理

このチュートリアルの最初の部分では、XmlDataSource コントロールと GridView コントロールの既定の動作を使用して .xml ファイルから情報を抽出しました。ただし、これらのコントロールでは、XML データの一部しか表示されません。

チュートリアルのこのセクションでは、2 つ目の GridView コントロールを追加して、マスター/詳細情報の表示に使用します。ユーザーは、最初の GridView コントロールで 1 つの書籍を選択し、その書籍に関するユーザー コメントがある場合は 2 つ目の GridView コントロールでそのコメントを表示します。コメントを表示するには、抽出する XML データ ファイルのレベルを指定できる XPath 式を使用します。ここでは、特定の書籍だけについてコメントを表示するので、ユーザーが選択した書籍に基づいて XPath 式を動的に作成します。

まず、2 つ目の GridView コントロールをページに追加し、GridView コントロールでユーザー コメントを表示するように設定します。

GridView コントロールを追加してユーザー コメントを表示するには

  1. デザイン ビューに切り替えます。

  2. ツールボックス[データ] グループから、GridView コントロールをページにドラッグし、最初の GridView コントロールの下に配置します。

    [GridView タスク] メニューが表示されます。

  3. [データ ソースの選択] ボックスで、[新しいデータ ソース] をクリックします。

    データ ソース構成ウィザードが表示されます。

  4. データ ソースとして [XML ファイル] をクリックします。

  5. [データ ソースに ID を指定します] ボックスは、既定の XmlDataSource2 のままにします。

  6. [OK] をクリックします。

    [データ ソースの構成] ダイアログ ボックスが表示されます。

  7. [データ ファイル] ボックスに「~/App_Data/Bookstore.xml」を入力します。

    このチュートリアルで以前に使用した .xml ファイルを使用します。ただし、2 つ目の GridView コントロールに対しては、このファイルから別の情報を抽出します。

  8. [XPath 式] ボックスに、次の式を入力します。

    /bookstore/book/comments/userComment

    後でコード内で XPath プロパティを動的に変更します。ただし、ここでデータ ソースに対する XPath 式を定義すると、コントロールに最終的に表示する情報を Visual Web Designer のツールで判断しやすくなります。

  9. [OK] をクリックします。

    2 つ目の GridView コントロールが表示されます。このコントロール内に、サンプル データとして評価とユーザー コメントも表示されます。

  10. GridView2 コントロールを選択し、[プロパティ] で VisibleFalse に設定します。

    2 つ目の GridView コントロールは、ユーザーが最初の GridView コントロールで書籍を選択した場合だけに表示されます。

ここで、最初の GridView コントロールを設定し、ユーザーが書籍を選択できるようにします。ユーザーの選択に基づいて XPath 式を作成して XmlDataSource2 コントロールに割り当てるコードも追加します。最終的な結果として、2 つ目の GridView コントロールで、ユーザーが選択した書籍に対するユーザー コメントが表示されます。

選択項目に対して GridView コントロールを設定するには

  1. デザイン ビューに切り替え、最初の GridView コントロールを選択します。

  2. [GridView タスク] メニューの [選択を有効にする] をクリックします。

    Select」というテキストが表示されたリンク ボタンを含む GridView コントロールに新しい列が追加されます。

  3. [プロパティ] で DataKeyNamesISBN に設定します。

    プロパティ ボックスをクリックして値を選択できます。

    これにより、ISBN プロパティを XML データの各要素に対する主キーとして処理するように GridView コントロールが設定されます。

  4. GridView コントロールをクリックします。[プロパティ] ウィンドウで、[プロパティ] ウィンドウの最上部にあるボックスの [イベント] を選択します。このコントロールに関連付けられたすべてのイベントが表示されます。

  5. SelectedIndexChanged イベントのボックスをダブルクリックします。

    コード エディタに切り替わり、SelectedIndexChanged イベントのスケルトン ハンドラが作成されます。

  6. 次の強調表示されたコードをハンドラに追加します。

    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 Sub
    
    protected 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;
    }
    

    このコードでは、次の処理が実行されます。

    • GridView コントロールの SelectedIndex プロパティを使用して、データ キーの配列にインデックスを設定し、選択した行の主キーを返します。以前は、DataKeyNames プロパティを設定して ISBN 番号を含めていました。

    • 選択した ISBN を含む新しい XPath 式を作成します。

    • 新しい XPath 式を XmlDataSource2 コントロールの XPath プロパティに割り当てます。新しい XPath 式を XPath プロパティに割り当てると、XmlDataSource コントロールによって返されるデータが再評価されます。その後、GridView コントロールがデータに再バインドされます。

    • Visible プロパティを true に設定します。これらにより、2 つ目の GridView コントロールが表示されます。2 つ目の GridView コントロールを作成したときに、ユーザーが書籍を選択するまでこのコントロールを表示しないように、可視性を false として宣言的に設定しています。

ここでページをテストできます。

XPath 式を使用したフィルタ処理をテストするには

  1. Default.aspx ページを表示し、Ctrl キーを押しながら F5 キーを押して、ページを実行します。

    ページが書籍に関する情報のグリッドと共に表示されます。

  2. 最初の書籍の隣にある [選択] リンクをクリックします。

    書籍に関するコメントが 2 つ目のグリッドに表示されます。

  3. 最後の書籍の隣にある [選択] リンクをクリックします。

    この書籍に関するコメントはないため、コメントは表示されません。

カスタム レイアウトによる XML データの表示

データのカスタム レイアウトを作成するには、DataList コントロールを使用します。DataList コントロールには、1 つ以上のテンプレートを定義できます。各テンプレートには、任意のレイアウトで配置できる静的テキストとコントロールの組み合わせが格納されます。

チュートリアルのこのセクションでは、DataList コントロールを使用して、以前 GridView2 コントロールを使用して表示した情報を表示します。ただし、ユーザー コメントのカスタム レイアウトを作成できます。

カスタム レイアウトで XML データを表示するには

  1. デザイン ビューに切り替え、GridView2 コントロールをクリックし、Del キーを押して、ページからそのコントロールを削除します。

  2. ツールボックス[データ] グループから、DataList コントロールをページにドラッグします。

  3. [DataList タスク] メニューの [データ ソースの選択] ボックスの [XmlDataSource2] をクリックします。

    GridView2 コントロールに使用したデータ ソースを DataList コントロールにも使用します。

  4. [プロパティ] で VisibleFalse に設定します。

  5. スマート タグが表示されない場合は、DataList コントロールを右クリックし、[スマート タグの表示] をクリックします。

  6. [DataList タスク] メニューの [テンプレートの編集] をクリックし、[表示] ボックスの [項目テンプレート] をクリックします。

    DataList コントロールが項目テンプレートの編集可能領域と共に表示されます。テンプレートには、静的テキストおよびデータ レコードの Rating 列と Comment 列にバインドされた Label コントロールで構成される既定のレイアウトが格納されます (このチュートリアルで既に XmlDataSource2 コントロールに対して静的な XPath 式を定義しているので、DataList コントロールは表示するデータの構造を推測できます。)

  7. 編集可能領域では、最初のキャプションを User rating: に変更します。

  8. キャプション comment を Comment: に変更します。

  9. DataList コントロールのタイトル バーを右クリックし、[テンプレートの編集] をポイントして、[区切り記号テンプレート] をクリックします。

    DataList コントロールに別の編集可能領域が表示されます。この領域では、各データ レコードの間に表示される要素のレイアウトを定義します。

  10. ツールボックス[HTML] グループから編集可能領域に Horizontal Rule コントロールをドラッグします。

  11. DataList コントロールを右クリックし、[テンプレート編集の終了] をクリックします。

  12. ページを右クリックし、[コードの表示] をクリックして、ページのコードに切り替えます。

  13. GridView1_SelectedIndexChanged ハンドラで次の行を変更します。

    GridView2.Visible = True
    
    GridView2.Visible = true;
    

    このコードを次のように変更します。

    DataList1.Visible = True
    
    DataList1.Visible = true;
    

ここでカスタム レイアウトをテストできます。

カスタム レイアウトをテストするには

  1. Default.aspx ページを表示し、Ctrl キーを押しながら F5 キーを押して、ページを実行します。

    ページが書籍に関する情報のグリッドと共に表示されます。

  2. 最初の書籍の隣にある [選択] リンクをクリックします。

    最初の書籍のコメントがリストに表示されます。

  3. 最後の書籍の隣にある [選択] リンクをクリックします。

    この書籍に関するコメントはないため、コメントは表示されません。

変換による XML データの再構築

このチュートリアルで使用してきた .xml ファイルは、各要素のプロパティが属性として表現されるように構造化されています。多くの場合、操作する .xml ファイルの構造は異なります。たとえば、多くの場合、.xml ファイルの値は要素として内部テキストと共に作成されます。

プロパティ値が属性以外の形式で表現されている .xml ファイルについては、動的に .xml ファイルに再設定される変換ファイル (.xslt) を作成し、XmlDataSource コントロールとの互換性を確保します。

チュートリアルのこのセクションでは、前に使用した Bookstore.xml ファイルと同じデータを格納する .xml ファイルを操作します。ただし、このファイルのデータ構造は Bookstore.xml ファイルのデータ構造と異なります。そのため、変換を使用してファイルを動的に再設定します。

このセクションでは、まず、2 つ目の .xml ファイルを作成します。

2 つ目の .xml ファイルを作成するには

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

  2. [Visual Studio にインストールされたテンプレート][XML ファイル] をクリックします。

  3. [名前] ボックスに「Bookstore2.xml」と入力します。

  4. [追加] をクリックします。

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

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

    <?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>
    
  6. Bookstore2.xml ファイルを保存して閉じます。

ここで、Bookstore2.xml ファイル内のデータを XmlDataSource コントロールで使用する属性ベースの形式に変換する変換ファイルが必要になります。

変換ファイルを作成するには

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

  2. [Visual Studio にインストールされたテンプレート][テキスト ファイル] をクリックします。

    変換ファイルのテンプレートはありません。そのため、変換ファイルをテキスト ファイルとして作成し、正しい拡張子を指定します。

  3. [名前] ボックスに「Bookstore2.xsl」と入力します。

    13ftcwy9.alert_note(ja-jp,VS.90).gifメモ :

    必ず .xsl 拡張子を指定してください。

  4. [追加] をクリックします。

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

  5. 次の変換コードをコピーして、ファイルに貼り付けます。

    <?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>
    
  6. Bookstore2.xsl ファイルを保存して閉じます。

この後の XML データ操作は、このチュートリアルの前半で実行した操作とほぼ同じです。ただし、XmlDataSource コントロールを設定するときに変換ファイルを指定できる点が異なります。このチュートリアルの最後のセクションでは、新しいページを作成し、このチュートリアルの最初のセクションで実行した手順の一部を繰り返します。ただし、ここでは Bookstore2.xml ファイルのデータを表示します。

.xml ファイルへのデータ アクセスを設定するには

  1. ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。

  2. [Visual Studio にインストールされたテンプレート][Web フォーム] をクリックします。

  3. [名前] ボックスに「Bookstore2.aspx」と入力します。

  4. [追加] をクリックします。

  5. デザイン ビューに切り替えます。

  6. ツールボックス[データ] グループから、XmlDataSource コントロールをページにドラッグします。

  7. [XmlDataSource タスク] メニューの [データ ソースの構成] をクリックします。

    [データ ソースの構成] ダイアログ ボックスが表示されます。

  8. [データ ファイル] ボックスに「~/App_Data/Bookstore2.xml」を入力します。

  9. [変換ファイル] ボックスに「~/App_Data/Bookstore2.xsl」を入力します。

  10. [OK] をクリックします。

  11. ツールボックス[データ] グループから、GridView コントロールをページにドラッグします。

  12. [GridView タスク] メニューの [データ ソースの選択] ボックスの [XmlDataSource1] をクリックします。

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

    このページのグリッド内に XML データが表示されます。ここでは基になる .xml ファイルの形式が異なりますが、最初のページと同様にデータがグリッド内に表示されます。

次の手順

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

  • より高度な変換の作成。このチュートリアルで説明した変換の使用方法は 1 種類だけです。XSL は強力な言語で、HTML ページの作成だけでなく、XML から他の構造へのほとんどすべての種類の変換に対しても、洗練されたサポートが用意されています。

  • XML ドキュメントを読み取るだけでなく、作成する。Xml コントロールを使用すると、ASP.NET Web ページで XML ファイルの内容を表示しやすくなります。ただし、XML ファイルを自分で作成したり修正したりすることが必要になる場合もあります。詳細については、「XML ドキュメントと XML データ」を参照してください。XML ファイルの作成例については、「チュートリアル : AdRotator コントロールを使用した広告の表示と追跡」を参照してください。

参照

処理手順

チュートリアル : TreeView コントロールでの階層データの表示

チュートリアル : Visual Web Developer での基本的な Web ページの作成