SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

japan.internet.com翻訳記事

jQueryでWeb Formsアプリケーションのフィルタリングユーザーインターフェイスを作成する(前編)

ユーザーごとに折りたたみ/展開の状態を記憶させる方法

  • X ポスト
  • このエントリーをはてなブックマークに追加

折りたたみ式のフィルタリングユーザーインターフェース

 本稿のサンプルダウンロードファイルには、フィルタリングインターフェースを備えた、単純で分かりやすいデータ駆動式のレポートが含まれています。このページの下部に配置されているGridViewには、NorthwindデータベースのProductsテーブルに対してクエリを行うSqlDataSourceコントロールのクエリ結果が表示されます。このページには次のようなフィルタリングコントロールも含まれています。

  • DropDownList:リストされた製品の中から特定のカテゴリに属している製品だけをユーザーが絞り込めます。
  • CheckBox:生産停止された製品をレポートに含めるかどうかをユーザーが指定できます。
  • TextBox:ユーザーが最低価格を入力できます。最低価格以上の製品だけが返されます。

 次のスクリーンショットは、このフィルタリングユーザーインターフェースと結果のGridViewを示しています。

 フィルタリングオプションの数が増えるにつれて、画面領域のかなりの部分をフィルタリングインターフェースが占めるようになります。フィルタリングインターフェースを折りたたんで、ユーザーが明示的に展開しない限り表示しないようにすれば、この領域を他の用途に振り向けることができます。特に、フィルタリングを利用しないユーザーの方が多数派の場合には、折りたたみ式にすることをお勧めします。そうしたユーザーにとっては、画面がすっきりして、レポートデータの表示領域が増えた方が嬉しいからです。フィルタリングを利用するユーザーも、シングルクリックで表示を切り替えられるので不便は感じないでしょう。

 以降では、Web FormsアプリケーションでjQueryを使って折りたたみ式のフィルタリングインターフェースを実装する方法を説明します(ただし、基本的な考え方はASP.NET MVCアプリケーションにも当てはまります)。なお、本稿ではデータベースから取得した結果セットの表示方法とフィルタリング方法については説明しません。こうしたトピックの詳細については、「Accessing and Updating Data in ASP.NET」の一連の記事を参照ください。

CollapsiblePanelコントロールについて

 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>要素の中に収められています。また、idfilterUItitleになっている<div>もあり、これで「Filter Product Listing」というタイトルを表示します。この<div>filterUI <div>の直前に置かれていて、CSSクラスexpandIconが割り当てられています(これについては後ほど説明します)。この2つの<div>filterUItitlefilterUI)は、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> 

次のページ
フィルタリングユーザーインターフェースのCSSクラス

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
japan.internet.com翻訳記事連載記事一覧

もっと読む

この記事の著者

japan.internet.com(ジャパンインターネットコム)

japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.comEarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Scott Mitchell(Scott Mitchell)

http://www.4guysfromrolla.com/ScottMitchell.shtml

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4604 2009/12/14 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング