はじめに
ASP.NET AJAXの登場によりサーバーコントロールを用いたASP.NETアプリケーションにインタラクティブな機能を実装させることが可能になりました。しかし、高度なフィードバック アニメーションなどのUI処理とAjax処理を制御するにはクライアント側JavaScriptを構築することも必要となり、一般的なASP.NET開発領域からはみ出してしまうこともしばしばです。
NetAdvantage ASP.NETのASP.NET AJAXコントロールはサーバーコントロールを使う感覚でASP.NET AJAXアプリケーション開発を可能にします。
対象読者
ASP.NETおよびASP.NET AJAXを使用するWebデベロッパー。
必要環境
- マイクロソフトVisual Studio 2008あるいはVisual Web Developer 2008 Express Edition
- Infragistics NetAdvantage ASP.NET 2009 Vol. 1 CLR 3.5
（NetAdvantage Web Client/Select/.NET パッケージに含まれます）
本稿ではCLR 3.5をターゲットとするWebサイトを想定していますが、CLR 2.0ターゲット上でもASP.NET 2.0 AJAX Extensionを併用することでASP.NET AJAXを使用することが可能です。CLR 2.0ターゲットを使用する場合にはNetAdvantage ASP.NET 2009 Vol. 1 CLR 2.0を使用してください。また執筆時には上記の環境をWindows 7 RC版で動作させていますが、Windows XPあるいは Windows Vistaでもかまいません。
コンポーネントのインストール
Visual Studio上で NetAdvantage ASP.NETを使用するには、まずインフラジスティックス社のサイトよりインストーラを入手し、実行します。インストーラを実行するとプロダクトキーの入力画面が表示されますが、キーを入力せずにインストーラを続行することでトライアル版として使用することが可能です。なお、期限付き（20日間）のトライアル版では有償の製品版とまったく同じ機能が使用できます。詳細については同梱されているリリースノートを参照してください。
ASP.NET AJAXのおさらい
ASP.NET AJAX Webサイト
ASP.NET AJAXを構成するフレームワークASP.NET AJAXサイトの構築手順などは他の記事でも紹介されているため本記事では省略しますが、ASP.NET AJAXを使用するWebサイトには基本的に以下に挙げるものが必要となります。
- web.configファイル
- .aspxページ
ASP.NET AJAXライブラリ参照（System.Web.Extensions）と、ScriptHandlerの定義。
ScriptManagerの配置。
ASP.NET AJAXに必要なweb.configの参照設定はVisual StudioでCLR 3.5をターゲットとするWebサイト（あるいはCLR 2.0ターゲットのAjax-Enabled Webサイト）を作成した時には自動的に追加されます。また、ScriptManagerも自動的に配置されます。
この中で、Ajaxを使用するデータ連携などはMicrosoft Ajaxライブラリを介して行われます。
NetAdvantage ASP.NETとASP.NET AJAX
NetAdvantage ASP.NETでは2008 Vol.1リリースよりASP.NET AJAXのフレームワークを活用したコントロールが提供されていますが、従来のリリースにおいてもAjax機能は提供されていました。
NetAdvantageの従来のコントロールでのAjax機能
従来のコントロールではインフラジスティックス独自のAjaxエンジンが搭載され、Ajax処理を行うスクリプトを生成・管理していました。配置されたコントロールのポストバックをAjax化するコンテナであるWebAsyncRefreshPanelをはじめ、各コントロールでのロードオンデマンド機能などがこのエンジンを使用して提供されています。
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>
WebDataMenuの項目テンプレート
前項のデータバインディングの際にお気づきかもしれませんが、データバインド可能なプロパティにはImageUrlやNavigateUrlがあります。データバインディングのみでもアイコンの表示をさせることは可能ですが、メニュー内にはユーザーに便利な機能を提供する際に必要な、もっと複雑な項目として表示させることも可能です。
スマートタグ上には［テンプレート コレクションの編集］という項目がありますが、ここをクリックすることによりメニュー上で使用されるテンプレートを追加することができます。
ここで設定されるTemplateIDプロパティの値が実際にメニュー項目のTemplateIDプロパティに設定する値になります。
テンプレートコレクションにテンプレートを追加し、スマートタグより［テンプレートの編集］をクリックします。スマートタグ上にテンプレートのドロップダウンが表示されます。先ほど追加したテンプレートの中身を作成してみましょう。
任意のコントロールをテンプレート内に配置します。ここではシンプルなボタンを配置しました。
さらに、テンプレート内の各コントロールのデータバインディングの設定を行います。
カスタムバインディングにはASP.NETのDataBinderを使用しますが、実際のデータのContainerオブジェクトはInfragistics.Web.UI.TemplateContainerオブジェクトにキャストをしたうえで使用します。カスタムバインディングで使用する式は次のようになります。
DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)Container).DataItem, "MenuName")
これでテンプレートの定義および中身の作成が完了しました。後はこのテンプレートを適用する項目のTemplateIDプロパティを設定することでテンプレートが有効化されます。
ページを実行すると先ほど作成したテキスト項目だけのメニューが、フォーマットを施した項目表示に変わります。
テンプレートは一つ一つの項目に設定することも可能ですし、項目のグループごとに設定することでサブメニューのルックアンドフィールや機能を統一させることも可能です。
WebDataMenuのその他の機能
WebDataMenuには今回紹介した機能だけでなく、縦・横表示や場所による項目展開表示調整、さらにコンテキストメニューとしての使用などの機能が含まれています。
WebDropDownを使う
コントロール概要
データ入力や項目選択時に複数の項目をコンパクトに表示させるドロップダウン ボックスはGUIの始まりの時代から親しまれてきたUX（ユーザー エクスペリエンス） パターンですが、WebDropDownにはドロップダウンをさらに便利にする機能が組み込まれています。
WebDropDownの拡張機能
WebDataMenuの項でとりあげたデータバインディングやテンプレート機能は ほぼすべてのNetAdvantage ASP.NETの各コントロールに共通して装備されている機能です。そのため、WebDropDownでのバインドの設定方法やテンプレートの構築方法はWebDataMenuの方法を流用することが可能です。
WebDropDownには以下の拡張機能が搭載されています。
- ページング機能
- 自動フィルタ機能
- 自動コンプリート機能
WebDropDownロードオンデマンドとページング機能
ドロップダウンボックスは画面の広い領域を占領しないためよく使用されますが、標準でAjax化されているWebDropDownではロードオンデマンド機能が使用される（オン・オフ制御可能）ため、長いリストもユーザーがドロップダウンの内容をスクロールするにつれてオンデマンド読み込みされます。
しかし、都道府県の選択や製品選択など、時としてドロップダウンにとてつもなく長いリストが表示されるときがあります。そんなときに役に立つのがページング機能です。
大量のデータを扱うグリッドなどによくある機能ですが、ドロップダウン上使用することにより画面に長いリストを表示させずにユーザーはドロップダウンをナビゲートすることができます。
使い方はEnablePagingプロパティとPageSizeプロパティを設定するだけです。
その他、ページャーに表示されるリンクの詳細設定も可能です。
オートコンプリート機能と自動フィルタ
たくさんのWebサイトで目にする検索機能は便利なものですが、検索結果表示のために画面が切り替わってしまったりして使いづらい場合もあります。GoogleやYouTubeでは検索条件の入力を補助してくれるオートコンプリート機能が提供されますが、WebDropDownでも似たような機能を使用することが可能です。
オートコンプリート機能を追加するには、EnableAutoCompleteFirstMatchプロパティをTrueに設定するだけで、ユーザーが入力し始めると同時にドロップダウンリストから入力された部分的なテキストにマッチする項目がドロップダウンに表示されます。
また、ユーザーの入力と同時にドロップダウンの内容をフィルタするオートフィルタリング機能は、オートコンプリート機能と同様、容易に設定をすることが可能です。
オート フィルタリング機能を使用するにはまずEnableAutoFilteringプロパティを以下のうちのいずれかに設定します。フィルタリングは完全にAjax化されています。
- Off――最初の一致を見つけ出す、選択する、アクティブ化する、スクロールすることだけが実行されます。
- Client――ポストバックは一切発生することなく、クライアント側項目コレクションコンテンツのみでフィルタリングが実行されます。
- Server――Ajaxコールバックを行うことによって、サーバーでドロップダウン リスト内のすべての項目でフィルタリングが実行されます。
必要であれば、AutoFilterQueryTypeプロパティを以下のいずれかのオプションに設定することでフィルタ方法を指定することも可能です。
- StartsWith
- EndsWith
- Contains
- DoesNotContain
- Equals
- DoesNotEqual
このように、WebDropDownではオートフィルタリングやオートコンプリート機能を簡単に使用することが可能なため、既存のドロップダウンボックスの使い勝手を手軽に向上することができると言えます。
WebDataMenuの項目に検索WebDropDownを埋め込む
WebDataMenuのテンプレート構築の際に画像やラベルコントロールを配置しましたが、ASP.NET AJAXコントロールのテンプレートにはさらに他のコントロールを追加することも可能です。
例として、先ほど作成したWebDataMenu中に項目として前項で作成したWebDropDownを埋め込むには、以下の手順で可能です。
まずWebDataMenu新しいテンプレートを追加し、テンプレートの中身の編集を行います。テンプレートに先ほど作成したWebDropDownコントロールをドラッグして配置します（あるいは<Template></Template>タグ内にWebDropDownコントロールのタグ全体をコピー＆ペーストします）。
メニュー項目のサブメニューにこのテンプレートを設定し、ページを実行すると、「ヘルプ」項目クリック時に先ほどの検索用WebDropDownが表示されます。WebDropDownの機能は損なわれることなく使用することができます。
まとめ
今回の記事ではNetAdvantage ASP.NET AJAXコントロールを使った画面構築の一例を紹介しました。さまざまな機能やデータに対応したメニューやドロップダウンボックスは Webアプリケーションに便利な機能を追加するのに手軽に活用できます。NetAdvantage ASP.NETに含まれるコントロールは他にもたくさんありますので、組み合わせることで非常に多くのシーンに対応することが可能と言えるでしょう。皆さまの普段のアプリケーションのユーザーエクスペリエンスを向上させる手段として、ぜひ試してみてはいかがでしょうか。
