.NET TIPS

[ASP.NET AJAX]Tabsコントロールで切り替え可能なタブ・パネルを定義するには?[2.0のみ、C#、VB]

山田 祥寛
2007/03/08

 TabContainer/TabPanelコントロール(以降は総称して「Tabsコントロール」)はASP.NET AJAX Control Toolkit(以降、「Control Toolkit」)で提供されるコントロールの1つで、ASP.NETページ上にタブ・パネルを生成する。

 これは、ASP.NET標準のサーバ・コントロールであるMultiView/Viewコントロールにも似ているが、MultiView/Viewコントロールが単なるマルチビューの管理のみを行うのに対して、Tabsコントロールはタブの見栄えを自動生成してくれるので、よりシンプルなコードでタブ・パネル式のページを作成することができる。

 以下は本稿で作成するサンプル・アプリケーションの実行例だ。

[コンテンツ2]のタブをクリック
サンプル・アプリケーション(タブ・パネル式のページ)の実行結果
[コンテンツ1][コンテンツ2]といったタブ・ヘッダをクリックすることで、タブ・コンテナ内のページが切り替わる。

 なお、本サンプルを動作させるに当たっては、「TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?」で紹介した手順に従って、Control Toolkitを利用可能な状態にしておく必要がある。

1. 新規のWebフォームを作成する

 新規のWebフォーム(Tabs.aspx)を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する。

Webフォーム(Tabs.aspx)のフォーム・レイアウト
複数のタブ・パネル(TabPanelコントロール)をまとめるコンテナとして、まずはタブ・コンテナ(TabContainerコントロール)を配置する。
  ScriptManagerコントロール(IDは「manager」)。
  TabContainerコントロール(IDは「tab」)。

 TabContainerコントロールは、その名のとおり、ひとまとまりのタブ・パネルを配置するためのコンテナ(置き場所)を表すコントロールだ。個々のタブ・パネル(TabPanelコントロール)は、必ずこのTabContainerコントロールの配下に配置する必要がある。

2. コンテナにタブ・パネルを追加する

 執筆時点(2007年2月)では、タブ・コンテナ(TabContainerコントロール)へのタブ・パネル(TabPanelコントロール)の追加は、フォーム・デザイナからは行えないようだ。タブ・パネルを追加するには、コード・エディタから直接にコード(タグ)を編集する必要がある。

 ここでは、以下のリストのように「コンテンツ1」「コンテンツ2」という2つのタブ・パネルを追加してみよう。

<ajaxToolkit:TabContainer ID="tab" runat="server">
  <ajaxToolkit:TabPanel runat="server" HeaderText="コンテンツ1">
    <ContentTemplate>
      ……任意のコンテンツ……
    </ContentTemplate>
  </ajaxToolkit:TabPanel>
  <ajaxToolkit:TabPanel runat="server" HeaderText="コンテンツ2">
    <ContentTemplate>
      ……任意のコンテンツ2……
    </ContentTemplate>
  </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
タブ・コンテナの配下にタブ・パネルを追加したコード(Tabs.aspx)

 個々のタブ・パネルを表すのは、<ajaxToolkit:TabPanel>要素の役割だ。<ajaxToolkit:TabContainer>要素の配下に、必要なタブ・パネルの数だけ列記できる。

 <ajaxToolkit:TabPanel>要素の配下には、それぞれヘッダ部分を表す<HeaderTemplate>要素、コンテンツ本体を表す<ContentTemplate>要素を指定することが可能だ。いずれのテンプレート要素にもプレーンなテキストはもちろん、任意のコントロールを配置することができる。ただし、ヘッダ部が単なるテキストであるならば、<HeaderTemplate>要素を使用するよりもHeaderText属性を使用した方がシンプルだろう。

 また、本サンプルでは、<ContentTemplate>要素の配下に直接コンテンツを記述しているが、コンテンツをフォーム・デザイナ上で編集できないという制限を考えれば、あまり複雑なコンテンツを直接タブ・パネルの配下に埋め込むのは好ましくない。タブ・パネル配下のコンテンツは、ユーザー・コントロールとして別に定義しておくことを強くお勧めしたい。

 以上を理解したら、さっそく作成したサンプル・アプリケーションを実行してみよう。冒頭の図のように、タブ・ヘッダをクリックすることで表示パネルが正しく切り替わることを確認してほしい。

 ちなみに、本稿で紹介したほかにも、Tabsコントロールでは多くのプロパティが公開されている。主要なものを以下の表にまとめておく。

コントロール プロパティ 概要
TabContainer ActiveTabChanged(イベント) 表示タブ変更時に発生するイベント
OnClientActiveTabChanged タブ変更時に呼び出されるクライアント側関数の名前
CssClass タブ・パネルの見栄えを規定するCSSクラス
ActiveTabIndex デフォルト表示するタブのインデックス番号
Height タブ・パネル本体の高さ(ヘッダ部を除く)
Width タブ・パネル本体の幅
ScrollBars タブ・コンテナにスクロールバーを表示するか(None|Horizontal|Vertical|Both|Auto)
TabPanel Enabled デフォルトでタブを表示するか
OnClientClick タブ・クリック時に呼び出されるクライアント側関数の名前
HeaderText タブ・ヘッダに表示するテキスト
HeaderTemplate タブ・ヘッダに適用するテンプレート
ContentTemplate タブ本体に適用するテンプレート
Tabsコントロール(TabContainer/TabPanelコントロール)の主なプロパティ/イベント

 なお、Tabsコントロールではクライアント側でJavaScriptによりタブの切り替えを行っているだけである。このためページを開いたときには、すべてのタブの内容が一度にサーバ側で処理されるため、レスポンスなどの点で実装には注意が必要だ。End of Article

利用可能バージョン:.NET Framework 2.0のみ
カテゴリ:Webフォーム 処理対象:ASP.NET AJAX
使用ライブラリ:TabContainerコントロール
使用ライブラリ: TabPanelコントロール
関連TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?

この記事と関連性の高い別の.NET TIPS
[ASP.NET AJAX]Accordionコントロールで伸縮自在のマルチペインを生成するには?
[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?
[ASP.NET AJAX]DragPanelコントロールでドラッグ可能なパネルを定義するには?
[ASP.NET AJAX]AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには?
[ASP.NET AJAX]CollapsiblePanelコントロールで伸縮自在のマルチペインを生成するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間