.png)
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コントロールを提供しています。各コントロールの詳細はリンクを参照してください。
（コントロール一覧は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などのデスクトップアプリケーションでおなじみです。ユーザーが慣れ親しんだメニューを提供することでシステムのナビゲーションしやすいものにでき、ユーザー エクスペリエンス向上に役立てることができます。
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項目の名前が表示されるのみで実際の項目データは表示されません。各項目にデータを表示させるにはデータバインディングの設定を行います。
データバインディングの設定はスマートタグの [DataBindingの編集] より行います。WebDataMenuデザイナにて各Xmlノードのどの属性が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>
