折りたたみ式のフィルタリングユーザーインターフェース
本稿のサンプルダウンロードファイルには、フィルタリングインターフェースを備えた、単純で分かりやすいデータ駆動式のレポートが含まれています。このページの下部に配置されているGridViewには、NorthwindデータベースのProductsテーブルに対してクエリを行うSqlDataSourceコントロールのクエリ結果が表示されます。このページには次のようなフィルタリングコントロールも含まれています。
- DropDownList:リストされた製品の中から特定のカテゴリに属している製品だけをユーザーが絞り込めます。
- CheckBox:生産停止された製品をレポートに含めるかどうかをユーザーが指定できます。
- TextBox:ユーザーが最低価格を入力できます。最低価格以上の製品だけが返されます。
次のスクリーンショットは、このフィルタリングユーザーインターフェースと結果のGridViewを示しています。
フィルタリングオプションの数が増えるにつれて、画面領域のかなりの部分をフィルタリングインターフェースが占めるようになります。フィルタリングインターフェースを折りたたんで、ユーザーが明示的に展開しない限り表示しないようにすれば、この領域を他の用途に振り向けることができます。特に、フィルタリングを利用しないユーザーの方が多数派の場合には、折りたたみ式にすることをお勧めします。そうしたユーザーにとっては、画面がすっきりして、レポートデータの表示領域が増えた方が嬉しいからです。フィルタリングを利用するユーザーも、シングルクリックで表示を切り替えられるので不便は感じないでしょう。
以降では、Web FormsアプリケーションでjQueryを使って折りたたみ式のフィルタリングインターフェースを実装する方法を説明します(ただし、基本的な考え方はASP.NET MVCアプリケーションにも当てはまります)。なお、本稿ではデータベースから取得した結果セットの表示方法とフィルタリング方法については説明しません。こうしたトピックの詳細については、「Accessing and Updating Data in ASP.NET」の一連の記事を参照ください。
ASP.NET AJAX Control ToolkitにはCollapsiblePanelコントロールが含まれています。このコントロールは、今回のテーマである、クライアントサイドスクリプトを使って画面上の領域を展開したり折りたたんだりする方法を提供するものです。ASP.NET AJAX Control Toolkitを使用することの利点は、JavaScriptをまったく書かなくて済むことです。目的のページにエクステンダを追加し、若干のプロパティを設定するだけでよいのです。
筆者も自分のプロジェクトでAJAX Control Toolkitを使おうかと考えましたが、いくつかの理由で取りやめることにしました。第1に、チームの他の開発者は既にJavaScriptとjQueryに精通していて、クライアントサイドスクリプトを書き慣れていましたが、AJAX Control Toolkitの使用経験はありませんでした。また、いずれjQueryに適した機能を追加するつもりがあったので、今がjQueryをサイトに統合する絶好の機会だと思いました。そして、このプロジェクトには関係ないのですが、jQueryはASP.NET 1.xアプリケーションで使用できるのに対し、ASP.NET AJAXフレームワークとASP.NET AJAX Control Toolkitは使用できません。しかし、決め手になったのは技術的なことでもビジネス上のことでもなく、個人的な理由でした。筆者はCollapsiblePanelを以前のプロジェクトで使ったことがありましたが、jQueryを実際のプロジェクトで使ったことがなかったので、この機会に経験したいと思ったのです。NIH主義(Not Invented Here effect:自前主義)の逆というわけです。
フィルタリングユーザーインターフェースのHTML
このフィルタリングユーザーインターフェースは、DropDownList、CheckBox、TextBox、Buttonという4つのWebコントロールからなっており、これらはすべて2列の<table>
内に配置されています。この<table>
は、id
属性がfilterUI
に設定された<div>
要素の中に収められています。また、id
がfilterUItitle
になっている<div>
もあり、これで「Filter Product Listing」というタイトルを表示します。この<div>
はfilterUI <div>
の直前に置かれていて、CSSクラスexpandIcon
が割り当てられています(これについては後ほど説明します)。この2つの<div>
(filterUItitle
とfilterUI
)は、class
属性がfilterBox
に設定された<div>
の中に収められています。
これらの<div>
のマークアップを以下に示します。
<div class="filterBox"> <div id="filterUItitle" class="expandIcon">Filter Product Listing</div> <div id="filterUI"> <table> <tr> <td class="filterHeader"> Category: </td> <td> <asp:DropDownList ID="ddlCategories" ...> </asp:DropDownList> </td> </tr> ... </table> </div> </div>