.NET TIPS [ASP.NET]Webフォームでウィザード形式のページを作成するには?[2.0のみ、C#、VB]山田 祥寛2006/03/17 |
![]() |
|
Webアプリケーションを構築するうえで必ずといってよいほど問題となるのが、ウィザードのように複数ページが論理的に一連の機能を提供するような局面だろう。これは、何もASP.NETに限定された話ではない。
いまさら特筆するまでもないかもしれないが、Webアプリケーションが採用するHTTPはステートレス(状態を持たない)なプロトコルだ。つまり、いくら論理的に関連したページであろうとも、異なる2つのページで発生したそれぞれのリクエストは互いに何ら関係のない「独立した」処理であると見なされる。
ASP.NETでは、こうしたHTTPの「制約」を補うために、ビュー・ステートやセッションといった仕組みを提供することで、疑似的に複数のページを1つの「アプリケーション」としてまとめている。もっとも、これはあくまで疑似的な仕掛けにすぎない。例えば、ウィザード形式のページ群において、もしもエンド・ユーザーが途中のページに直接アクセスしてきたとしても、これを防ぐのは容易でない。「TIPS:[ASP.NET]途中ページへの直接アクセスを防ぐには?」でも紹介したようなコードを別に用意する必要があるのだ。つまり、開発者はHTTPの「ステートレス」であるが故の制約からはなかなか逃れることができなかった。
しかし、Webがよりアプリケーション・プラットフォームとして利用される機会が多くなったことで、ウィザード形式のページ構築の必要性も高まってきた。そして、ウィザード・ページが必要になるたびに同じようなコードを記述しなければならないのは、(当然のことながら)うれしいことではない。
ASP.NET 2.0のWizardコントロール
ASP.NET 2.0ではウィザード・ページを作成するためのサーバ・コントロールとして「Wizardコントロール」が新たに用意されている。Wizardコントロールを利用することで、論理的にまとまりのある一連のページ群を1つの.aspxファイルで管理できる。開発者は複数ページであることを意識する必要もなく、ページ遷移の管理はすべてASP.NETに委ねられるというわけだ。
前置きが長くなってしまったが、論より証拠、本稿ではWizardコントロールを使って、簡単なウィザード・ページを作成してみよう。出来上がりは以下のような実行イメージになる。
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Wizardコントロールで作成したウィザード・ページ |
各ページで順に[名前][E-Mail][趣味]を入力し、最後に[完了]をクリックすると、すべての情報が(ラベル上に)テキスト表示される。 |
それではさっそく、具体的な構築の手順をVisual Studio 2005(以降、VS 2005)環境を前提に見ていくことにしよう。
1. Wizardコントロールを配置する
まずは、フォーム・デザイナでWebフォーム上にWizardコントロールを配置してみよう。
フォーマットの選択やウィザード・ステップ(ウィザードの各ページ)の追加/削除など、基本的な設定はコントロール右上から[Wizardタスク]メニューを選択することで行える。
![]() |
Webフォーム(C#:wizard_cs.aspx/VB:wizard_vb.aspx)のデザイン |
コントロール右上の[Wizardタスク]メニューからはフォーマットの選択やウィザード・ステップの編集を行うことができる。ここでは、オートフォーマットのスキームとして[クラシック]を選択した。 |
2. ウィザード・ステップを追加する
VS 2005ではデフォルトで2つのウィザード・ステップを生成するが、本稿ではこれに2つステップを加え、合計で4つのウィザード・ステップを持つウィザード・ページを作成してみよう。
ステップの追加/削除を行うには、[Wizardタスク]から[WizardStep の追加と削除]を選択すればよい。[WizardStep コレクション エディタ]ダイアログが表示されるので、ここからウィザード・ステップに必要な基本情報を入力できる。
![]() |
[WizardStepコレクション エディタ]ダイアログ |
ウィザード・ステップに関する設定は、[WizardStepコレクション エディタ]から行うことが可能だ。 |
ウィザード・ステップを追加/削除したい場合には、ダイアログ左部の[追加]/[削除]ボタンをクリックする。また、ステップの順序は[↑]/[↓]ボタンで変更可能だ。それぞれのウィザード・ステップに対して設定可能な主なプロパティは以下のとおり。
プロパティ | 概要 | ||||||||||||
Title | ステップのタイトル | ||||||||||||
AllowReturn | 以降のステップから現在のステップに戻ることを許すかどうか | ||||||||||||
StepType | ステップの種類
|
||||||||||||
![]() |
|||||||||||||
ウィザード・ステップの主なプロパティ |
ここでは、以下の表の要領で、それぞれのウィザード・ステップを定義しておこう。明記していない個所は、デフォルト値のままとする。
ステップ | プロパティ | 設定値 |
ステップ1 | StepType | Start |
Title | 基本情報 | |
ステップ2 | StepType | Step |
Title | 拡張情報 | |
ステップ3 | StepType | Finish |
Title | 完了 | |
ステップ4 | StepType | Complete |
Title | 結果 | |
![]() |
||
ウィザード・ステップの具体的なプロパティ設定 |
3. ウィザード・ステップを編集する
ウィザード・ステップのレイアウトは、フォーム・デザイナ上で編集することができる。編集したいステップを切り替えたい場合には、Wizardコントロール左部のリンクをクリックするか、[Wizardタスク]メニューの[ステップ]一覧から編集したいステップを選択すればよい。
ここでは、それぞれのステップに「txtName」「txtEmail」「txtHobby」という名前のTextBoxコントロールを、そして、最終ステップにはそれぞれの入力内容を表示するためのLabelコントロールを「lblName」「lblEmail」「lblHobby」という名前で、配置してみよう。
![]() |
||||||||||||||||||
![]() |
||||||||||||||||||
![]() |
||||||||||||||||||
![]() |
||||||||||||||||||
![]() |
||||||||||||||||||
![]() |
||||||||||||||||||
![]() |
||||||||||||||||||
ウィザード・ステップごとのフォーム・デザイン | ||||||||||||||||||
編集したいステップを切り替えて、それぞれのステップのページにコントロールを配置しているところ。 | ||||||||||||||||||
|
なお、編集が完了したら、必ず表示を先頭ページに戻すか、プロパティ・シートからWizardコントロールのActiveStepIndexプロパティを0に設定しておくこと。さもないと、最後に編集したページがデフォルトで表示されてしまうので、注意が必要だ。
これで、ウィザードの外観にかかわる設定は完了だ。ここで参考までにVS 2005によって自動生成されたコードを引用しておく(ただし、<%--〜--%>は筆者によるコメント)。
|
|
Webフォーム(wizard_cs.aspx/wizard_vb.aspx)のソース・コード(抜粋) | |
ウィザードの外観にかかわる設定を行った後、VS 2005によって自動生成されたコードを引用したもの。なお、<%--〜--%>は筆者によるコメント。 |
4. [完了]ボタン・クリック時の挙動を定義する
もっとも、これだけではウィザード・ページが表示されるだけなので、最後に[完了]ボタンがクリックされたタイミングで、結果表示を行うコードを記述してみよう。FinishButtonClickイベントは、その名のとおり、[完了]ボタンをクリックしたタイミングで発生するイベントだ。
本稿では割愛するが、Wizardコントロールには、そのほかにもActiveStepChanged(ステップの変更時)、CancelButtonClick([キャンセル]ボタンをクリックしたとき)、NextButtonClick([次へ]ボタンをクリックしたとき)、PreviousButtonClick([前へ]ボタンをクリックしたとき)、SideBarButtonClick(サイトバーのボタンをクリックしたとき)などのイベントが用意されており、ウィザード内の各タイミングにおける挙動を制御することができる。
|
||
[完了]ボタンをクリックした場合の動作(上:wizard_cs.aspx.cs/下:wizard_vb.aspx.vb) |
コードの中身は取り立てて解説する必要もないほどシンプルなものだ。が、このシンプルである、という点に注目していただきたい。というのも、Wizardコントロール上の各ステップで入力された内容は、1つのWebフォーム上に複数のサーバ・コントロールを直接に配置した場合とまったく同じ要領で取得できるのだ。
なお、ここでは単にウィザード上での入力値をブラウザ上に表示しているだけであるが、もちろん、実際のアプリケーションでは、このタイミングでデータベースに入力内容を登録するなどの処理が発生するはずだ。
以上を理解できたら、Webフォーム(C#:wizard_cs.aspx/VB:wizard_vb.aspx)を実行してみよう。冒頭に挙げたような結果が得られれば成功だ。
利用可能バージョン:.NET Framework 2.0のみ カテゴリ:Webフォーム 処理対象:Wizardコントロール 使用ライブラリ:Wizardコントロール |
![]() |
「.NET TIPS」 |
- 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
![]() |
|
|
|
![]() |