バージョン

WebDataTree を Xml データ ソースにバインド

始める前に

WebDataTree™ はコードを一切記述することなくツリー ノード構造を生成するために XML データ ソースへのバインディングをサポートします。データを XML ファイルから取得するには、データ バインディング エディターを使用してノードのためにデータ バインディングを指定する必要があります。

達成すること

WebDataTree を XML ファイルにバインドして階層的なノードのような構造でデータを表す方法を学習します。

次の手順を実行します

  1. ASP.NET Web ページを作成します。

  2. Microsoft® Visual Studio™ ツールボックスからページに ScriptManager コンポーネントをドラッグします。

  3. WebDataTree コントロールをページにドラッグします。

  4. XML ファイルをプロジェクトに追加し、Orders.xml と命名します。

  5. 以下のコードを Orders.xml に追加します:

<?xml version="1.0" encoding="utf-8" ?>
<Customers>
  <Customer CustomerID="ALFKI" CustomerName="Alfreds Futterkiste">
    <Order OrderID="1024">
      <OrderDetail ProductID="1" ProductName="Chocolate" Quantity="10" />
      <OrderDetail ProductID="2" ProductName="Apples" Quantity="20" />
      <OrderDetail ProductID="3" ProductName="Peanuts" Quantity="30" />
    </Order>
    <Order OrderID="1029">
      <OrderDetail ProductID="10" ProductName="Flour" Quantity="100" />
    </Order>
  </Customer>
  <Customer CustomerID="BLONP" CustomerName="Blondel père et fils">
    <Order OrderID="2021">
      <OrderDetail ProductID="4" ProductName="Rigatoni" Quantity="30" />
      <OrderDetail ProductID="5" ProductName="Ricotta" Quantity="10" />
    </Order>
  </Customer>
  <Customer CustomerID="WOLZA" CustomerName="Wolski Zajazd">
    <Order OrderID="2029">
      <OrderDetail ProductID="6" ProductName="Hot Dogs" Quantity="45" />
      <OrderDetail ProductID="7" ProductName="Brown Rice" Quantity="12" />
      <OrderDetail ProductID="8" ProductName="Ketchup" Quantity="100" />
      <OrderDetail ProductID="9" ProductName="Mustard" Quantity="100" />
    </Order>
  </Customer>
</Customers>
  1. XmlDataSource コンポーネントをページにドラッグします。

  2. XmlDataSource コンポーネントのスマートタグをクリックして、[データ ソースの構成] を選択します。[データ ソースの構成] ウィザードが表示します。

images\WebDataTree Binding WebDataTree to an%20Xml Data Source 01.png
  1. [参照…​]([データ ファイル] テキスト ボックスの隣り)をクリックして、バインドしたい XML データ ファイルを指定します。[XML ファイルの選択] ダイアログが表示します。

images\WebDataTree Binding WebDataTree to an%20Xml Data Source 02.png
  1. 使用したい XML ファイルを選択して [OK] をクリックします。この場合、Orders.xml です。

  2. WebDataTree の [プロパティ] ウィンドウで、XmlDataSource コンポーネントの ID となるように DataSourceID を設定します。

  3. この時点でアプリケーションを保存および実行する時に、WebDataTree は XML ファイルからノードを表示するだけでデータを表示しません。ノードを展開すると、WebForm は以下の画像のように表示されます:

images\WebDataTree Binding WebDataTree to an%20Xml Data Source 03.png
  1. データ バインディングを指定するには、WebDataTree コントロールのスマートタグから [DataBindings の編集] をクリックします。これによって、WebDataTree デザイナー ダイアログが開きます。

  2. Customer ノードを選択し、[データバインディングの追加] ボタンをクリックします。これによってノードが選択されたバインディング領域に追加されます。CategoryName がノードのテキストを表示するように [プロパティ] ウィンドウでドロップダウン コンボをクリックすることによって、 TextField プロパティを CategoryName に設定します。同様に、 ValueField プロパティを CustomerID に設定します。

注: CustomerName と CustomerID に加えて、ドロップダウンは XmlNode クラスの InnerText、Name および Value プロパティも表示して、選択オプションをさらに提供します。

  1. 上記の手順を繰り返して以下のデータ バインディングを Order および OrderDetail ノードを追加します:

Node TextField ValueField

Order

OrderID

OrderID

OrderDetail

ProductName

ProductID

  1. アプリケーションを保存して実行します。WebDataTree は以下の画像のようになります。

WebDataTree Binding WebDataTree to an%20Xml Data Source 05.png

プログラムで WebDataTree を XmlDataSource にバインド:

Visual Basic の場合:

' 新しい XmlDataSource を作成します。
Dim xmlDataSource1 As New XmlDataSource()
'ファイルが配置されているパスを提供します。
xmlDataSource1.DataFile = "~/Orders.Xml"
WebDataTree1.DataSourceID = "xmlDataSource1"
'Customer データ バインディングを作成します。
Dim customer As New DataTreeNodeBinding()
customer.DataMember = "Customer"
customer.TextField = "CustomerName"
customer.ValueField = "CustomerID"
'Order データ バインディングを作成します。
Dim orders As New DataTreeNodeBinding()
orders.DataMember = "Order"
orders.TextField = "OrderID"
orders.ValueField = "OrderID"
'OrderDetails データ バインディングを作成します。
Dim orderDetails As New DataTreeNodeBinding()
orderDetails.DataMember = "OrderDetail"
orderDetails.TextField = "ProductName"
orderDetails.ValueField = "ProductID"
'データ バインディングを WebDataTree に追加します
WebDataTree1.DataBindings.Add(customer)
WebDataTree1.DataBindings.Add(orders)
WebDataTree1.DataBindings.Add(orderDetails)
'データをツリーにバインドします。
'DataBind メソッドを呼び出すのは、必ずデータ バインディングを作成し追加した後にしてください。
WebDataTree1.DataBind()

C# の場合:

        //新しい XmlDataSource を作成します。
        XmlDataSource xmlDataSource1 = new XmlDataSource();
        //ファイルが配置されているパスを提供します。
        xmlDataSource1.DataFile = "~/Orders.Xml";
        WebDataTree1.DataSourceID = "xmlDataSource1";
        //Customer データ バインディングを作成します。
        DataTreeNodeBinding customer = new DataTreeNodeBinding();
        customer.DataMember = "Customer";
        customer.TextField = "CustomerName";
        customer.ValueField = "CustomerID";
        //Order データ バインディングを作成します。
        DataTreeNodeBinding orders = new DataTreeNodeBinding();
        orders.DataMember = "Order";
        orders.TextField = "OrderID";
        orders.ValueField = "OrderID";
        //OrderDetails データ バインディングを作成します。
        DataTreeNodeBinding orderDetails = new DataTreeNodeBinding();
        orderDetails.DataMember = "OrderDetail";
        orderDetails.TextField = "ProductName";
        orderDetails.ValueField = "ProductID";
        //データ バインディングを WebDataTree に追加します
        WebDataTree1.DataBindings.Add(customer);
        WebDataTree1.DataBindings.Add(orders);
        WebDataTree1.DataBindings.Add(orderDetails);
        //データをツリーにバインドします。
        //DataBind メソッドを呼び出すのは、必ずデータ バインディングを作成し追加した後にしてください。
        WebDataTree1.DataBind();