Menu for ASP.NET Web Forms
C1Menu への XML の移植
タスク別ヘルプ > C1Menu への XML の移植

このチュートリアルでは、テンプレートをインストールし、XML データソースコンポーネントを Web サイトに追加して、それを C1Menu コントロールに割り当てた後、C1Menu の連結を設定する方法を学びます。

以下の手順を実行します。

  1. ツールボックスから、C1Menu アイコンをダブルクリックして、このコントロールをプロジェクトに追加します。
  2. 次の手順を実行して、XML ファイルを作成して準備します。
  3. ソリューションエクスプローラで、App_Data を右クリックし、[新しい項目の追加]を選択します。[新しい項目の追加]ダイアログボックスが表示されます。
    1. XML ファイルを選択し、その名前を Menu_Hierarchy.xml に変更します。XML ファイルが開きます。
    2. XML ビューで、次のデータを Menu_Hierarchy.xml ドキュメントに追加します。
    ソースビュー
    コードのコピー
    <?xml version="1.0" encoding="utf-8" ?>
    <root>
      <MenuItem Text="ホーム">
        <MenuItem Text="会社概要"></MenuItem>
        <MenuItem Text="ご挨拶"></MenuItem>
        <MenuItem Text="国内拠点"></MenuItem>
      </MenuItem>
      <MenuItem Text="製品">
        <MenuItem Text="ハードウェア"></MenuItem>
        <MenuItem Text="ソフトウェア"></MenuItem>
      </MenuItem>
      <MenuItem Text="サービス">
        <MenuItem Text="トレーニング"></MenuItem>
        <MenuItem Text="コンサルティング"></MenuItem>
      </MenuItem>
    </root>
  4. .aspx ページ のデザインビューに戻り、次の手順を実行して、新しいデータソースを作成します。
    1. C1Menu のスマートタグをクリックして、[C1Menu タスク]メニューを開いた後、[データソースの選択]のドロップダウンリストから、[新しいデータソース]を選択します。
    2. データソース構成ウィザード]ダイアログボックスが開きます。
    3. XML ファイル]を選択して、〈OK〉をクリックします。
      XmlDataSource1 がプロジェクトに追加されます。
  5. 次の手順を実行して、データソースを設定します。
    1. C1Menu のスマートタグをクリックして、[C1Menu タスク]メニューを開き、[データソースの構成]をクリックします。
      データソースの構成]ダイアログボックスが開きます。
    2. [XPath 式]テキストフィールドに、root/MenuItem を入力します。これによって、ルートの子であるすべての MenuItems が選択されて、Web ページ上の最上位となります。
    3. データファイル]テキストフィールドの横の〈参照〉をクリックして、[XML ファイルの選択]ダイアログボックスを開きます。
    4. App_Data プロジェクトフォルダを選択してから、[フォルダの内容]ペインから Menu_Hierarchy.xml を選択します。
    5. OK〉をクリックして、[XML ファイルの選択]ダイアログボックスを閉じます。
    6. OK〉をクリックして、[データソースの構成]ダイアログボックスを閉じます。
  6. 以下の手順を実行して、XML タグを C1MenuItems に連結します。
    1. C1Menu のスマートタグをクリックして、[C1Menu タスク]メニューを開き、[メニューのデータバインディングの編集]をクリックします。
      バインディングコレクションエディタ]ダイアログボックスが開きます。
    2. 〈追加〉をクリックして、空の連結をプロジェクトに追加します。
    3. 連結のプロパティを次のように設定します。
      • DataMember プロパティを MenuItem に設定します。
      • TextField プロパティを Text に設定します。
    4. OK〉をクリックして、バインディングコレクションエディタを閉じます。
  7. [F5]を押して、プロジェクトを実行します。

このトピックは、次のことを示します。

プロジェクトの実行中、メニューをクリックして、Menu_Hierarchy.xml ファイルのデータが C1Menu コントロールに反映されていることを確認します。