| |
|
.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コントロールの嬉しいところだ。
ここでは、各ビューの内容を単にブラウザ上に出力する、最も単純なコードを記述したが、もちろん、本来のアプリケーションでは、このタイミングでデータベースに入力内容を登録するなどの処理が発生するはずだ。
以上が理解できたら、さっそくサンプル・プログラムを動かして、その動作を実際に試してみよう。冒頭のような結果を得られれば成功だ。実際に画面に触れて、タブ選択によってビューが切り替わることも確認してほしい。
カテゴリ：Webフォーム 処理対象：IE WebBrowserコントロール
使用ライブラリ：TabStripコントロール（Microsoft.Web.UI.WebControls名前空間）
使用ライブラリ：MultiPageコントロール（Microsoft.Web.UI.WebControls名前空間）
関連TIPS：［ASP.NET］TreeViewコントロールでツリー・メニューを作成するには？ |
|
|
generated by
|
|
