.NET TIPS ［ASP.NET］任意のXMLファイルからサイト・メニューを作成するには？［2.0のみ、C#、VB］ 山田 祥寛 2006/03/03

　「TIPS：［ASP.NET］Webフォーム上でサイト・メニュー／サイト・パスを作成するには？」でも紹介したように、ASP.NET 2.0ではナビゲーション・コントロールとサイトマップ・ファイル（web.sitemap）を組み合わせることで、ツリー・メニューやパンくずリストなどのナビゲートUI（ユーザー・インターフェイス）をプログラムレスで作成できる。前掲のTIPSでも示したように、サイトマップ・ファイル自体は実にシンプルな構造を持ったXMLファイルであるので、サイトマップ情報の記述を苦痛に感じることはほとんどないはずだ。

　しかし、すでにサイトマップ・ファイルに相当する情報を、異なる形式のXMLファイルで管理していた場合はどうだろう。その場合も、あらためてサイトマップ・ファイルの形式にのっとってXMLデータを作り直さなければならないのだろうか。いやいや、そのようなことはない。

　ASP.NET 2.0では汎用的なXML形式のデータソースを読み込むためのXmlDataSourceコントロールが提供されている。前掲のTIPSで紹介したSiteMapDataSourceコントロール（System.Web.UI.WebControls名前空間）の代わりに、XmlDataSourceコントロール（System.Web.UI.WebControls名前空間）を利用することで、独自のXMLデータをナビゲーション・コントロールにバインドすることが可能になる。

　本稿では、サイトマップ・ファイルの代わりに、以下のようなXML文書があらかじめ用意されているものと仮定して、これをナビゲーション・コントロールにバインドする方法を紹介する。

<?xml version="1.0" encoding="UTF-8" ?> <book name="Smarty入門">   <chapter url="sec0.aspx" name="イントロダクション">     <section url="sec01.aspx" name="What is PHP?" />     <section url="sec02.aspx" name="テンプレートエンジンSmartyを理解する" />     <section url="sec03.aspx" name="PHP＋Smarty利用のための基本環境設定" />   </chapter>   <chapter url="sec1.aspx" name="Smartyの基本を学ぼう">     <section url="sec11.aspx" name="PHP 5で学ぶアプリ開発 基本のキ" />     <section url="sec12.aspx" name="Smartyはどのようにして動くのか？" />     <section url="sec13.aspx" name="Smartyの拡張セットアップ" />     <section url="sec14.aspx" name="Smartyテンプレートの構成要素" />   </chapter>   <chapter url="sec2.aspx" name="テンプレートファイルの構成要素を理解する">     <section url="sec21.aspx" name="変数の使い方" />     <section url="sec22.aspx" name="修飾子逆引きリファレンス" />     <section url="sec23.aspx" name="関数逆引きリファレンス" />     <section url="sec24.aspx" name="コメントの使い方" />   </chapter> </book>

メニュー情報を示したXML文書（structure.xml）

　このXML文書に記述されている<chapter>要素はコンテンツの章に当たる情報を、<section>要素は節に当たる情報をそれぞれ表しており、それぞれの章（節）名はname属性、章（節）のURLはurl属性で表すものと仮定する。

　それでは、具体的なバインドの手順をVisual Studio 2005（以降、VS 2005）環境を使用することを前提に見ていくことにしよう。

1. データソースを設定する

　まず、Webフォーム・デザイナ上にTreeViewコントロールを配置すると表示される［TreeViewタスク］メニュー（アクション・ウィンドウ）の［データソースの選択］コンボボックスから［<新しいデータソース...>］を選択する（コントロール右上の三角マーク からも選択可能）。

　これにより、次に示す［データソース構成ウィザード］ダイアログが表示される。

［データ ソース構成ウィザード］ダイアログ（データソースの種類）

ここではデータソースとして「XML ファイル」を選択し、データソースIDとして「xmlds」を入力して、［OK］ボタンをクリックする。

　ここでは［アプリケーションがデータを取得する場所］の一覧から「XML ファイル」を選択しておこう（標準的なサイトマップ・ファイルを使用するならば、ここで「サイト マップ」を選択すればよい）。さらに［データ ソースに ID を指定します:］の欄に「xmlds」を入力して、［OK］ボタンをクリックする。

　それにより、次に示す［データソースの構成］ダイアログが開かれるので、バインドするXMLファイルの情報を指定する。

［データ ソースの構成］ダイアログ（データ・ファイルの選択）

本稿のように、用意したXMLファイルをそのままバインドするならば、［データファイル］だけを指定すればよい。

コントロールにバインドするXMLファイル（.xmlファイル）を指定する。ここでは、先ほどのメニュー情報を示したXML文書「~/structure.xml」を指定している。 　 XMLファイルをスタイル変換するXSLTスタイルシート・ファイルを指定する。 　 XMLファイルから一部のノード・ツリーを取り出すXPath式を入力する。

　用意したXMLファイルをそのままバインドするならば、［データファイル］だけを指定すればよい。XMLファイルをXSLT変換したうえでバインドしたい、あるいは、XMLファイルの一部だけをバインドしたいという場合にのみ、［変換ファイル］［XPath式］を指定すればよい。

　［データ ソースの構成］ダイアログの［OK］ボタンをクリックしてデータソースの構成を完了させて、次の画面のように、TreeViewコントロールの下部にグレーのXmlDataSourceコントロールが表示されれば成功だ。

XMLファイルのデータソース構成が完了したxml.aspxのフォーム・デザイン

TreeViewコントロールの下部にグレーのXmlDataSourceコントロールが表示されれば、データソースの構成は成功だ。

2. データ・バインディングの設定を行う

　もっとも、手順1の画面を見ても分かるように、XmlDataSourceコントロールを使用する場合、これだけでは不十分だ。デフォルトでそれぞれの要素名がTreeViewコントロールにバインドされているだけなので、これでは意味がない。そこで、次にTreeViewコントロール中のノードとXMLファイル中のノードとの関連付けを行う必要がある。

　TreeViewコントロールの［TreeViewタスク］メニューから［TreeNode DataBindings の編集...］を選択してほしい。以下のような［TreeView DataBindings エディタ］が起動するはずだ。

［TreeView DataBindings エディタ］ダイアログ

［使用できるデータ バインド］欄からそれぞれ<book>、<chapter>、<section>の各要素を選択し［追加］ボタンをクリックして選択したうえで、それぞれの要素に関して［データバインドのプロパティ］を設定しているところ。

　［使用できるデータ バインド］欄からそれぞれ<book>、<chapter>、<section>の各要素を選択し［追加］ボタンをクリックして選択したうえで、それぞれの要素に関して［データ バインドのプロパティ］を設定すればよい。

　それぞれの要素に関する設定項目は、以下のとおりだ（デフォルトで設定されている内容は省略している）。

要素	プロパティ	設定値
book	TextField	name
chapter	NavigateUrlField	url
	TextField	name
section	NavigateUrlField	url
	TextField	name
データ・バインドのプロパティ設定

　TextFieldプロパティにはツリー・ノードのテキストとして割り当てる属性名を、NavigateUrlFieldプロパティにはツリー・ノードのリンク先として割り当てる属性名を、それぞれ指定する。ほかにも割り当て可能なプロパティはいくつか用意されているが、詳細はMSDNのTreeNodeBindingクラス（System.Web.UI.WebControls）をご参照いただきたい。

　以上で一連の設定は完了だ。完成した.aspxファイルをブラウザから確認してみよう。以下のようにXMLファイルに基づいたツリー・メニューが生成され、かつ、それぞれのノードから正しいコンテンツへリンクできていれば成功だ。

xml.aspxの実行結果

　最後に、VS 2005によって生成されたコードを掲載しておく（<%--〜--%>は筆者によるコメント）。

<form id="form1" runat="server"> <div> <asp:TreeView ID="TreeView1" runat="server"   DataSourceID="xmlds" ShowLines="True">   <%--XMLデータとノードとの関連付けを設定--%>   <DataBindings>     <asp:TreeNodeBinding DataMember="book" TextField="name" />     <asp:TreeNodeBinding DataMember="section"       NavigateUrlField="url" TextField="name" />     <asp:TreeNodeBinding DataMember="chapter"       NavigateUrlField="url" TextField="name" />   </DataBindings> </asp:TreeView> <%--XMLデータソースの設定--%> <asp:XmlDataSource ID="xmlds" runat="server"   DataFile="~/structure.xml"></asp:XmlDataSource> </div> </form>

VS 2005によって自動生成されたxml.aspxファイルのコード（抜粋）

　それぞれの属性に関する詳細は割愛するが、ウィザードやエディタから設定した内容と照らし合わせることで、内容は容易に理解できるはずだ。参考にしていただきたい。

利用可能バージョン：.NET Framework 2.0のみ カテゴリ：Webフォーム　処理対象：ナビゲーション 使用ライブラリ：SqlDataSourceクラス（System.Web.UI.WebControls名前空間） 使用ライブラリ：XmlDataSourceクラス（System.Web.UI.WebControls名前空間） 関連TIPS：［ASP.NET］Webフォーム上でサイト・メニュー／サイト・パスを作成するには？

この記事と関連性の高い別の.NET TIPS ［ASP.NET］データベースからツリー・メニューを作成するには？ ［ASP.NET］Webフォーム上でサイト・メニュー／サイト・パスを作成するには？ ［ASP.NET］サイトマップ・データを非階層コントロールに表示するには？ ［ASP.NET］TreeViewコントロールでツリー・メニューを作成するには？ ［ASP.NET］サイトマップ・ファイルをローカライズするには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）