« ASP.NETとAtlasでAjax | トップページ | ASP.NETのTreeViewにXMLをバインドする その2 »

2006年10月16日 (月)

ASP.NETのTreeViewにXMLをバインドする

ASP.NETのTreeViewにXMLをバインドする サーバーコントロールにXMLデータをバインドする際は、XmlDataSourceコントロールを併用します。

例えば、次のようなXMLデータがあるとします。
<?xml version="1.0" encoding="utf-8" ?>
<data>
  <WebSites>
    <WebSite name="Microsoft" url="http://www.microsoft.com/japan/">
      <Contents title="MSDN" url="http://www.microsoft.com/japan/msdn/" />
      <Contents title="Visual Studio"
        url="http://www.microsoft.com/japan/msdn/vstudio/" />
    </WebSite>
    <WebSite name="Google" url="http://www.microsoft.com/japan/">
      <Contents title="Google Map" url="http://maps.google.co.jp/" />
      <Contents title="Google Calendar" url="http://www.google.com/calendar/" />
    </WebSite>
    <WebSite name="Yahoo! Japan" url="http://www.yahoo.co.jp/">
      <Contents title="Yahoo! Developer Network" url="http://developer.yahoo.co.jp/" />
    </WebSite>
  </WebSites>
</data>
これをTreeViewにバインドする場合、ASPXファイルは以下のような記述となります。
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>TreeView Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TreeView ID="siteTree" DataSourceID="siteDataSource" runat="server">
            <DataBindings>
                <asp:TreeNodeBinding DataMember="WebSite"
                    TextField="name" ValueField="url" />
                <asp:TreeNodeBinding DataMember="Contents"
                    TextField="title" ValueField="url" />
            </DataBindings>
        </asp:TreeView>
    </div>
    
    <asp:XmlDataSource ID="siteDataSource" 
        DataFile="~/Data.xml"
        XPath="/data/WebSites/WebSite"
        runat="server"></asp:XmlDataSource>
    </form>
</body>
</html>
まずXmlDataSourceの方では、DataFileプロパティにデータへのパスを設定します。
また、XPathプロパティには、データ内のバインドする部分を取得するXPathを設定します。

TreeViewの方では、DataSourceIDプロパティにXmlDataSourceのIDを設定し、DataBindingsプロパティに 画面に表示する部分とクリック時にサーバーに送信される値の部分を指定します。
asp:TreeNodeBindingの指定方法は、DataMemberにはタグ名、TextFieldにはツリーの項目として表示される文字を持つ属性、 ValueFieldにはサーバーに送信する値を持つ属性といった具合です。

今回の場合では、
  • WebSiteというタグの場合は、name属性を表示しurl属性をサーバーへ送信する値に設定
  • Contentsというタグの場合は、name属性を表示しurl属性をサーバーへ送信する値に設定
という感じになっています。


以上で、TreeViewにXMLデータをバインドできるようになります。
ただ、XMLが名前空間で修飾されている場合は、うまくいきません。
それについては、また後日メモしたいと思います。

|

« ASP.NETとAtlasでAjax | トップページ | ASP.NETのTreeViewにXMLをバインドする その2 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/12304899

この記事へのトラックバック一覧です: ASP.NETのTreeViewにXMLをバインドする:

« ASP.NETとAtlasでAjax | トップページ | ASP.NETのTreeViewにXMLをバインドする その2 »