.NET TIPS

[ASP.NET]TabStrip+MultiPageコントロールでマルチページを作成するには?

山田 祥寛
2005/09/02

 Webアプリケーションにおいて、入力項目数の多い業務エントリ画面で、入力項目を1ページに収めるために縦長のページを構築するのはうまいやり方ではない。というのも、多くの場合、すべての入力項目がすべてのユーザーにとって関係するとは限らないからだ。必要な項目を取捨選択しながら入力する作業は、ユーザーに少なからぬストレスを与えるのみならず、入力生産性を著しく損なう一因ともなる。

 もっとも、これを避けるために、入力画面を何ページかに分割するという方法もあるだろう。しかし、この方法を採用した場合、今度は各ページの入力値を保持するための仕組みをアプリケーション側で管理しなければならないため、コードが冗長化する原因となり、これまた好ましくない。

 そこで本稿では、「TIPS:[ASP.NET]TreeViewコントロールでツリー・メニューを作成するには?」でも紹介したInternet Explorer WebBrowserコントロールに含まれるTabStrip/MultiPageコントロールを利用して、ページ内のコンテンツを複数のビューに分割表示する方法を紹介する。

 入力項目を複数のビューに分割することで、エンド・ユーザーは必要なビューだけを参照すればよいので、入力生産性の向上が期待できる。のみならず、TabStrip/MultiPageコントロールで作成されたページは、あくまで1つのWebフォームであるので、ページそのものを分割した場合とは異なり、ビューごとの値の維持を意識する必要がないのも、大きなアドバンテージといえるだろう。

 本稿で紹介するサンプル・アプリケーションは、以下のようなユーザー・インターフェイスを持つものとする。「基本情報」と「拡張情報」と2つのビューを持ち、これをページ上部のタブで切り替えられる、そんなWebフォームだ。

本稿で紹介するサンプル・プログラムの実行結果
「基本情報」と「拡張情報」という2つのビューを持つWebフォーム。ページ上部のタブでビューを切り替えることができる。また、[登録]ボタンをクリックすることで、入力値をページ下部に表示する。

 なお、本稿のサンプル・プログラムを実行するには、前掲のTIPSの手順に従って、Internet Explorer WebBrowserコントロールをサーバ上に配置しておく必要がある。それでは、具体的なコードを見ていくことにしよう。

<%@ Page ContentType="text/html" Language="C#" %>
<%@ Register TagPrefix="ie" Namespace="Microsoft.Web.UI.WebControls"
  Assembly="Microsoft.Web.UI.WebControls" %>

<script runat="Server">
// タブ選択を変更したタイミングで、マルチページ上のビューを変更
void tab_changed(Object sender, EventArgs e) {
  mp.SelectedIndex = tab.SelectedIndex;
}

// [登録]ボタンをクリックしたタイミングで入力値をラベルに表示
void sbm_Click(Object sender, EventArgs e) {
  lname.Text = name.Text;
  lbirth.Text = birth.Text;
  laddress.Text = address.Text;
  lemail.Text = email.Text;
}
</script>

<html>
<head>
<title>TabStrip/MultiPageコントロールによるマルチページの作成</title>
</head>
<body>
<form runat="server">
<ie:TabStrip id="tab" runat="Server" AutoPostBack="true"
  TabDefaultStyle="background-color:#fffe00;color:#000000;width:80pt;"
  TabHoverStyle="background-color:#00ff00"
  TabSelectedStyle="background-color:#ffcc00;color:#000000;font-weight:bold"

  OnSelectedIndexChange="tab_changed">
  <ie:Tab Text="  基本情報  " />
  <ie:Tab Text="  拡張情報  " />
</ie:TabStrip>
<ie:MultiPage id="mp" SelectedIndex="0" runat="server">
  <ie:PageView>
    <table style="width:520px;" bordercolor="#ffcc00" cellspacing="1"
      bordercolordark="#ffcc00" cellpadding="1"
      bordercolorlight="#ffcc00" border="3">
      <tr>
        <th bgcolor="#ffcc00">基本情報</span></th>
      </tr>
      <tr><td>
        <table border="0">
          <tr>
            <th align="right">名前:</th>
            <td><asp:TextBox id="name" runat="Server" Columns="15" /></td>
          </tr>
          <tr>
            <th align="right">誕生日:</th>
            <td><asp:TextBox id="birth" runat="Server" Columns="10" /></td>
          </tr>
        </table>
      </td></tr>
    </table>
  </ie:PageView>
  <ie:PageView>
    <table style="width:520px;" bordercolor="#ffcc00" cellspacing="1"
      bordercolordark="#ffcc00" cellpadding="1"
      bordercolorlight="#ffcc00" border="3">
      <tr><th bgcolor="#ffcc00">拡張情報</span></th></tr>
      <tr><td>
        <table border="0">
          <tr>
            <th align="right">住所:</th>
            <td><asp:TextBox id="address" runat="Server" Columns="50" /></td>
          </tr>
          <tr>
            <th align="right">E-Mailアドレス:</th>
            <td><asp:TextBox id="email" runat="Server" Columns="40" /></td>
          </tr>
        </table>
      </td></tr>
    </table>
  </ie:PageView>
</ie:MultiPage>
<asp:Button id="sbm" runat="Server" Text="登録" OnClick="sbm_Click" />
</form>
<hr />
<table border="0">
  <tr>
    <th align="right">名前:</th>
    <td><asp:Label id="lname" runat="Server" /></td>
  </tr><tr>
    <th align="right">誕生日:</th>
    <td><asp:Label id="lbirth" runat="Server" /></td>
  </tr><tr>
    <th align="right">住所:</th>
    <td><asp:Label id="laddress" runat="Server" /></td>
  </tr><tr>
    <th align="right">E-Mailアドレス:</th>
    <td><asp:Label id="lemail" runat="Server" /></td>
  </tr>
</table>
</body>
</html>
TabStrip/MultiPageコントロールでマルチページ化されたWebフォーム(C#版:multipage_cs.aspx)
 
<%@ Page ContentType="text/html" Language="VB" %>
<%@ Register TagPrefix="ie" Namespace="Microsoft.Web.UI.WebControls"
  Assembly="Microsoft.Web.UI.WebControls" %>

<script runat="Server">
' タブ選択を変更したタイミングで、マルチページ上のビューを変更
Sub tab_changed(sender As Object, e As EventArgs)
  mp.SelectedIndex = tab.selectedIndex
End Sub

' [登録]ボタンをクリックしたタイミングで入力値をラベルに表示
Sub sbm_Click(sender As Object, e As EventArgs)
  lname.Text = name.Text
  lbirth.Text = birth.Text
  laddress.Text = address.Text
  lemail.Text = email.Text
End Sub
</script>

<html>
<head>
<title>TabStrip/MultiPageコントロールによるマルチページの作成</title>
</head>
<body>
<form runat="server">
<ie:TabStrip id="tab" runat="Server" AutoPostBack="true"
  TabDefaultStyle="background-color:#fffe00;color:#000000;width:80pt;"
  TabHoverStyle="background-color:#00ff00"
  TabSelectedStyle="background-color:#ffcc00;color:#000000;font-weight:bold"

  OnSelectedIndexChange="tab_changed">
  <ie:Tab Text="  基本情報  " />
  <ie:Tab Text="  拡張情報  " />
</ie:TabStrip>
<ie:MultiPage id="mp" SelectedIndex="0" runat="server">
  <ie:PageView>
    <table style="width:520px;" bordercolor="#ffcc00" cellspacing="1"
      bordercolordark="#ffcc00" cellpadding="1"
      bordercolorlight="#ffcc00" border="3">
      <tr>
        <th bgcolor="#ffcc00">基本情報</span></th>
      </tr>
      <tr><td>
        <table border="0">
          <tr>
            <th align="right">名前:</th>
            <td><asp:TextBox id="name" runat="Server" Columns="15" /></td>
          </tr>
          <tr>
            <th align="right">誕生日:</th>
            <td><asp:TextBox id="birth" runat="Server" Columns="10" /></td>
          </tr>
        </table>
      </td></tr>
    </table>
  </ie:PageView>
  <ie:PageView>
    <table style="width:520px;" bordercolor="#ffcc00" cellspacing="1"
      bordercolordark="#ffcc00" cellpadding="1"
      bordercolorlight="#ffcc00" border="3">
      <tr><th bgcolor="#ffcc00">拡張情報</span></th></tr>
      <tr><td>
        <table border="0">
          <tr>
            <th align="right">住所:</th>
            <td><asp:TextBox id="address" runat="Server" Columns="50" /></td>
          </tr>
          <tr>
            <th align="right">E-Mailアドレス:</th>
            <td><asp:TextBox id="email" runat="Server" Columns="40" /></td>
          </tr>
        </table>
      </td></tr>
    </table>
  </ie:PageView>
</ie:MultiPage>
<asp:Button id="sbm" runat="Server" Text="登録" OnClick="sbm_Click" />
</form>
<hr />
<table border="0">
  <tr>
    <th align="right">名前:</th>
    <td><asp:Label id="lname" runat="Server" /></td>
  </tr><tr>
    <th align="right">誕生日:</th>
    <td><asp:Label id="lbirth" runat="Server" /></td>
  </tr><tr>
    <th align="right">住所:</th>
    <td><asp:Label id="laddress" runat="Server" /></td>
  </tr><tr>
    <th align="right">E-Mailアドレス:</th>
    <td><asp:Label id="lemail" runat="Server" /></td>
  </tr>
</table>
</body>
</html>
TabStrip/MultiPageコントロールでマルチページ化されたWebフォーム(VB.NET版:multipage_vb.aspx)

 本稿のサンプル・プログラムで注目していただきたいのは、以下の3点だ。

1. TabStrip/Tabコントロールはセットで利用する

 TabStripコントロールは、タブ・バー全体を管理するためのコントロールだ。個々のタブ情報はTabコントロールで指定する必要がある。また、ここでは割愛しているが、TabStripコントロールの配下には、タブ間に仕切りを追加するためのTabSeparatorコントロールを追加することも可能だ。TabStrip/Tab/TabSeparatorコントロールが公開する属性の多くが、タブのデフォルト・スタイルを規定するための属性であり、詳細は「TABSTRIP Element」を参照していただきたい。

 ここでは、選択タブが変更されたタイミングで発生するSelectedIndexChangedイベントについてのみ特筆しておこう。本サンプルで、SelectedIndexChangedイベントに対応するイベント・ハンドラはtab_changedメソッドだ。

 tab_changedメソッドでは、TabStripコントロール上の選択インデックスを取得し、MultiPageコントロールのSelectedIndexプロパティ(選択ビューのインデックス)にセットしている。これによって、タブに連動したビューの切り替えが可能になる。

 なお、TabStripコントロールのAutoPostback属性は必ずtrueにセットしておくこと。デフォルトのfalse設定では、タブ変更のタイミングでポストバックが行われないので、注意が必要だ。

2. MultiPage/PageViewコントロールはセットで利用する

 TabStrip/Tabコントロールと同様、MultiPage/PageViewコントロールはセットで利用する必要がある。MultiPageコントロールはマルチページ全体を定義し、PageViewコントロールで個々のビューを管理する。PageViewコントロールの配下には、サーバ・コントロールを含む任意のコンテンツを配置することが可能だ。

 PageViewコントロールでは、必ずSelectedIndex属性で、デフォルトの表示ビュー(ビュー・インデックスは0始まり)をセットしておくこと。デフォルト値である-1のままでは、どのビューも表示されない。

3. MultiPage上の値取得に特別なコードは不要

 次に、[登録]ボタンをクリックしたタイミングで呼び出されるsbm_Clickメソッドに注目していただきたい。MultiPage配下の各ビューで入力された内容は、1つのWebフォーム上に複数のサーバ・コントロールを直接に配置した場合とまったく同じ要領で取得できる。それぞれのビューの状態を開発者がまったく意識することなく、サーバ・コントロールが肩代わりしてくれるというのが、MultiPageコントロールの嬉しいところだ。

 ここでは、各ビューの内容を単にブラウザ上に出力する、最も単純なコードを記述したが、もちろん、本来のアプリケーションでは、このタイミングでデータベースに入力内容を登録するなどの処理が発生するはずだ。

 以上が理解できたら、さっそくサンプル・プログラムを動かして、その動作を実際に試してみよう。冒頭のような結果を得られれば成功だ。実際に画面に触れて、タブ選択によってビューが切り替わることも確認してほしい。End of Article

カテゴリ:Webフォーム 処理対象:IE WebBrowserコントロール
使用ライブラリ:TabStripコントロール(Microsoft.Web.UI.WebControls名前空間)
使用ライブラリ:MultiPageコントロール(Microsoft.Web.UI.WebControls名前空間)
関連TIPS:[ASP.NET]TreeViewコントロールでツリー・メニューを作成するには?
 
この記事と関連性の高い別の.NET TIPS
[ASP.NET]MultiView/Viewコントロールでマルチビューのページを作成するには?
[ASP.NET]最初から[並べて表示]ビューで表示するには?
[ASP.NET]LoginViewコントロールでロール単位に表示を切り替えるには?
[ASP.NET]TreeViewコントロールでツリー・メニューを作成するには?
[ASP.NET][ソース]/[デザイン]ビューを左右に並べて表示するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム 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 記事ランキング

本日 月間