パワフルRIAを実現する「NetAdvantage ASP.NET AJAX」コントロールスイートを使おう

WebDataMenuとWebDropDownの利用

NetAdvantage ASP.NET AJAXコントロール

　Ajaxが開発者の間でポピュラーになり、当時はコードネームAtlasと呼ばれていたASP.NET AJAXがASP.NETの標準として採用されるようになると、NetAdvantage ASP.NETにおいても使用されるJavaScriptの管理などの面でASP.NET標準であるScriptManagerを採用するようになりました。このため、NetAdvantageのASP.NET AJAXコントロールではScriptManagerオブジェクトがページ上に配置されていることが必須となります。

　ASP.NET AJAXの採用によりASP.NET開発のスタンダードとなるフレームワークの採用に加え、ASP.NET AJAXをサポートする他のフレームワークとのコンポーネントの相互運用が可能になりました。

NetAdvantage ASP.NET AJAXコントロール

　本記事の執筆時点では、NetAdvantage ASP.NETは以下のASP.NET AJAXコントロールを提供しています。各コントロールの詳細はリンクを参照してください。

表1　NetAdvantage ASP.NET AJAXコントロール一覧
（コントロール一覧は2009 Vol. 1リリース時のものです）

コントロール名	機能
WebDialogWindow	ポップアップブロッカーなどに左右されないデスクトップライクなダイアログ
WebImageViewer	画像コレクションをスムーズにナビゲート
WebSlider	数値を直観的にコントロールするスライダー式入力コントロール
WebSplitter	ユーザーに自由な画面構成を提供
WebDataGrid	基幹アプリには欠かせない集計機能やフィルタ機能を含むグリッド
WebDataTree	フレキシブルなAjaxツリー
WebDropDown	オートコンプリート、オートフィルタ機能も備えたドロップダウン
WebProgressBar	さまざまなアニメーションを制御可能なプログレスバー
WebHierarchicalDataSource	既存のデータソースを組み合わせて一つのデータソースとして使用可能
ドラッグ＆ドロップ フレームワーク	クライアント側でドラッグ＆ドロップのサポートを追加

　このように最新版のNetAdvantage ASP.NETではさまざまなアプリケーションで使えるASP.NET AJAXコントロールが揃っています。

NetAdvantage ASP.NET AJAXコントロールを使ってみよう

　それでは実際にNetAdvantage ASP.NET AJAXコントロールを使ってみましょう。前出のリストのように使えるコントロールの数が多いため、ここでは基幹アプリでよく必要とされるメニューと簡易検索機能に絞ったコントロールを使ってみることにします。

WebDataMenuを使う

コントロール概要

　作業画面の上部に表示されるメニューはMicrosoft Officeなどのデスクトップアプリケーションでおなじみです。ユーザーが慣れ親しんだメニューを提供することでシステムのナビゲーションしやすいものにでき、ユーザー エクスペリエンス向上に役立てることができます。

図2　WebDataMenuコントロール

　WebDataMenuではデータバインディングによる項目の自動作成、またテンプレート化を使用した項目のカスタマイズが可能です。

WebDataMenuのデータバインディング

　メニュー項目はデザイナあるいは直接タグを追加していくことで設定可能ですが、各メニュー項目は階層構造として扱われるため、DataSet、カスタムオブジェクト、ObjectDataSourceなど、階層構造をサポートするデータソースを使用することも可能です。ログインしているユーザーやコンテキストによってメニューに表示される項目を動的に変更する場合など、画面を再構築することなくデータソース上でクエリの変更などを行うだけで表示項目を動的に変更することができるため、非常に便利です。

　ここでは、下記のようなXMLファイルをプロジェクトに用意し、XmlDataSourceとして使用します。

<?xml version="1.0" encoding="utf-8" ?>
<Menu>
  <MenuItem MenuID="1" MenuName="文書">
    <SubMenuGroup GroupID="1" MenuName="新規">
      <SubMenuItem MenuID="2" MenuName="上書き保存" />
      <SubMenuItem MenuID="3" MenuName="名前を付けて保存" />
      <SubMenuItem MenuID="4" MenuName="インポート" />
    </SubMenuGroup>
    <SubMenuGroup GroupID="2" MenuName="印刷">
      <SubMenuItem MenuID="5" MenuName="設定" />
    </SubMenuGroup>
  </MenuItem>
  <MenuItem MenuID="2" MenuName="編集">
    <SubMenuGroup GroupID="3" MenuName="ブックマーク">
      <SubMenuItem MenuID="6" MenuName="アウトライン" />
      <SubMenuItem MenuID="7" MenuName="入力補助" />
    </SubMenuGroup>
</MenuItem>
  <MenuItem MenuID="3" MenuName="ツール">
    <SubMenuGroup GroupID="4" MenuName="外部エディタ" >
      <SubMenuItem MenuID="8" MenuName="データベース" />
      <SubMenuItem MenuID="9" MenuName="ツールボックスの編集..." />
      <SubMenuItem MenuID="10" MenuName="カスタマイズ..." />
      <SubMenuItem MenuID="11" MenuName="オプション設定" />
    </SubMenuGroup>
  </MenuItem>
</Menu>

　WebDataMenuを画面に配置し、プロパティ ウィンドウよりDataSourceIDプロパティに上のXmlDataSourceを指定します。この状態でサイトをビルドすると、メニューには下記のスクリーンショットのように各Xml項目の名前が表示されるのみで実際の項目データは表示されません。各項目にデータを表示させるにはデータバインディングの設定を行います。

図3　XmlDataSourceにバインドさせたWebDataMenu

　データバインディングの設定はスマートタグの [DataBindingの編集] より行います。WebDataMenuデザイナにて各Xmlノードのどの属性がWebDataMenuの項目プロパティに適用されるかを指定します。

図4　WebDataMenu のデータバインディング編集ウィンドウ

　ここで行ったデータバインディングの設定は次のようにタグ内に記述されます。

<ig:WebDataMenu ID="WebDataMenu1" runat="server" DataSourceID="XmlDataSource1"
    Width="353px">
    <GroupSettings Orientation="Horizontal" />
    <DataBindings>
        <ig:DataMenuItemBinding DataMember="MenuItem" KeyField="MenuID"
            TextField="MenuName" />
        <ig:DataMenuItemBinding DataMember="SubMenuGroup" KeyField="GroupID"
            TextField="MenuName" />
        <ig:DataMenuItemBinding DataMember="SubMenuItem" KeyField="MenuID"
            TextField="MenuName" />
    </DataBindings>
</ig:WebDataMenu>