.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ファイルのコード(抜粋)

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

利用可能バージョン:.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」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間