展開・折りたたみブロックでWebアプリケーションをすっきりしたデザインにする

はじめに

　前回の記事「Accessデータを集計するWebアプリケーションを作る」で、GridView for ASP.NETコントロールを使って、インタラクティブにデータを操作できるWebページを作成しました。

　この時、データ操作にASP.NET標準のラジオボタンやボタンを使いましたが、操作系コントロールがむき出しになって、少しデザイン的に見栄えが悪く感じます。

　ComponentOne Studio Enterprise 2010JのExpander for ASP.NETコントロールは、折りたたみ・展開可能な情報ブロックを簡単に作成できるコントロールです。今回は、操作系コントロールを、このExpander for ASP.NETコントロールを使って普段は見えないようにし、使うときだけ表示させるようにしてみました。

前回作成したWebページは操作系コントロールがむき出しになっている

折りたたみ・展開可能なパネル系コントロールで普段は見えないようにする

ラベルをクリックすると操作系コントロールが表示される

対象読者

　Visual Basic/ Visual C# 2008を使ってプログラムを作ったことのある人

必要な環境

　Visual Basic 2008、Visual C# 2008、Visual Studio 2008でプログラムが作れる環境。なお、本プログラムはWindows Vista上で動作するVisual Studio 2008を使用して作成し、動作確認を行っています。
.NET Framework 3.5から追加されたクラスやメンバを使用しているので、.NET Framework 3.5がインストールされていることが必須条件です。

コンポーネントのインストール

　はじめてExpander for ASP.NETコンポーネントを使用する方は、Visual Studio、Visual Basic、Visual C#の開発環境にComponentOne Studio Enterprise 2010Jをインストールする必要があります。

　インストーラは、グレープシティのWebページからダウンロードできます。製品ページの［申込フォーム］をクリックし、グレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールの追加

　ComponentOne Studio Enterprise 2010Jをインストールしたら、ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、アセンブリ名が「C1.Web.UI.Controls.3」の「C1Expander」コントロールです。

アセンブリ名が「C1.Web.UI.Controls.3」の「C1Expander」コントロールを選択する

　なお、ツールボックスにコンポーネントを追加しただけでは、プロジェクトにコンポーネントを追加したことにはなりません。本コントロールを使用するには、共通アセンブリの「C1.Web.UI.3.dll」への参照設定も必要となります。設定手順については、前回の記事「Accessデータを集計するWebアプリケーションを作る」を参照ください。