.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 ステップの種類
設定値 概要
Auto 自動判別(デフォルト)
Complete 最後に表示されるステップ(結果表示などに使用)
Finish 入力の最終ページ([完了]ボタンを含む)
Start 入力の開始ページ
Step 開始〜完了ページに挟まれる途中ページ
ウィザード・ステップの主なプロパティ

 ここでは、以下の表の要領で、それぞれのウィザード・ステップを定義しておこう。明記していない個所は、デフォルト値のままとする。

ステップ プロパティ 設定値
ステップ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」という名前で、配置してみよう。

ウィザード・ステップごとのフォーム・デザイン
編集したいステップを切り替えて、それぞれのステップのページにコントロールを配置しているところ。
  TextBoxコントロール(IDは「txtName」)。
  TextBoxコントロール(txtEmail)。
  TextBoxコントロール(txtHobby)。
  Labelコントロール(lblName)。
  Labelコントロール(lblEmail)。
  Labelコントロール(lblHobby)。

 なお、編集が完了したら、必ず表示を先頭ページに戻すか、プロパティ・シートからWizardコントロールのActiveStepIndexプロパティを0に設定しておくこと。さもないと、最後に編集したページがデフォルトで表示されてしまうので、注意が必要だ。

 これで、ウィザードの外観にかかわる設定は完了だ。ここで参考までにVS 2005によって自動生成されたコードを引用しておく(ただし、<%--〜--%>は筆者によるコメント)。

<form id="form1" runat="server">
<div>
<asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0"
  BackColor="#EFF3FB" BorderColor="#B5C7DE" BorderWidth="1px"
  Font-Names="Verdana" Font-Size="0.8em" Height="106px" Width="325px">
  <%--ステップ、サイトバー、ボタンなどのスタイルを設定--%>
  <StepStyle Font-Size="0.8em" ForeColor="#333333" />
  <SideBarStyle BackColor="#507CD1" Font-Size="0.9em" VerticalAlign="Top" />
  <NavigationButtonStyle BackColor="White"
    BorderColor="#507CD1" BorderStyle="Solid"
    BorderWidth="1px" Font-Names="Verdana"
    Font-Size="0.8em" ForeColor="#284E98" />
  <%--ウィザード・ステップ(<asp:WizardStep>)を定義--%>
  <WizardSteps>
    <asp:WizardStep runat="server" StepType="Start" Title="基本情報">
      名前:<asp:TextBox ID="txtName" runat="server" Width="175px">
        </asp:TextBox>
    </asp:WizardStep>
    <asp:WizardStep runat="server" StepType="Step" Title="拡張情報">
      E-Maiアドレス:<asp:TextBox ID="txtEmail" runat="server" Width="176px">
        </asp:TextBox>
    </asp:WizardStep>
    <asp:WizardStep runat="server" StepType="Finish" Title="完了">
      趣味:<asp:TextBox ID="txtHobby" runat="server" Width="200px">
        </asp:TextBox>
    </asp:WizardStep>
    <asp:WizardStep runat="server" StepType="Complete" Title="結果">
      名前:<asp:Label ID="lblName" runat="server" Width="210px"></asp:Label>
      <br />
      E-Mail:<asp:Label ID="lblEmail" runat="server" Width="209px"></asp:Label>
      <br />
      趣味:<asp:Label ID="lblHobby" runat="server" Width="216px"></asp:Label>
    </asp:WizardStep>
  </WizardSteps>
  <%--サイトバーボタン、ヘッダのスタイルを設定--%>
  <SideBarButtonStyle BackColor="#507CD1" Font-Names="Verdana"
    ForeColor="White" />
  <HeaderStyle BackColor="#284E98" BorderColor="#EFF3FB"
    BorderStyle="Solid" BorderWidth="2px" Font-Bold="True"
    Font-Size="0.9em" ForeColor="White" HorizontalAlign="Center" />
</asp:Wizard>
</div>
</form>
Webフォーム(wizard_cs.aspx/wizard_vb.aspx)のソース・コード(抜粋)
ウィザードの外観にかかわる設定を行った後、VS 2005によって自動生成されたコードを引用したもの。なお、<%--〜--%>は筆者によるコメント。

4. [完了]ボタン・クリック時の挙動を定義する

 もっとも、これだけではウィザード・ページが表示されるだけなので、最後に[完了]ボタンがクリックされたタイミングで、結果表示を行うコードを記述してみよう。FinishButtonClickイベントは、その名のとおり、[完了]ボタンをクリックしたタイミングで発生するイベントだ。

 本稿では割愛するが、Wizardコントロールには、そのほかにもActiveStepChanged(ステップの変更時)、CancelButtonClick([キャンセル]ボタンをクリックしたとき)、NextButtonClick([次へ]ボタンをクリックしたとき)、PreviousButtonClick([前へ]ボタンをクリックしたとき)、SideBarButtonClick(サイトバーのボタンをクリックしたとき)などのイベントが用意されており、ウィザード内の各タイミングにおける挙動を制御することができる。

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class wizard_cs : System.Web.UI.Page
{
  protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
  {
    lblName.Text=txtName.Text;
    lblEmail.Text=txtEmail.Text;
    lblHobby.Text = txtHobby.Text;
  }
}
Partial Class wizard_vb
  Inherits System.Web.UI.Page

  Protected Sub Wizard1_FinishButtonClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) Handles Wizard1.FinishButtonClick
    lblName.Text = txtName.Text
    lblEmail.Text = txtEmail.Text
    lblHobby.Text = txtHobby.Text
  End Sub
End Class
[完了]ボタンをクリックした場合の動作(上:wizard_cs.aspx.cs/下:wizard_vb.aspx.vb)

 コードの中身は取り立てて解説する必要もないほどシンプルなものだ。が、このシンプルである、という点に注目していただきたい。というのも、Wizardコントロール上の各ステップで入力された内容は、1つのWebフォーム上に複数のサーバ・コントロールを直接に配置した場合とまったく同じ要領で取得できるのだ。

 なお、ここでは単にウィザード上での入力値をブラウザ上に表示しているだけであるが、もちろん、実際のアプリケーションでは、このタイミングでデータベースに入力内容を登録するなどの処理が発生するはずだ。

 以上を理解できたら、Webフォーム(C#:wizard_cs.aspx/VB:wizard_vb.aspx)を実行してみよう。冒頭に挙げたような結果が得られれば成功だ。End of Article

利用可能バージョン:.NET Framework 2.0のみ
カテゴリ:Webフォーム 処理対象:Wizardコントロール
使用ライブラリ:Wizardコントロール
 
この記事と関連性の高い別の.NET TIPS
[ASP.NET]ポストとポストバックの違いは?
[ASP.NET]ビューステートに保存されるものは?
[ASP.NET]DataGridコントロールの削除ボタンで確認メッセージを表示するには?
[ASP.NET]DataGridコントロールで編集を可能にするには?
[ASP.NET]WebPartsコントロールでパーソナライズ・ページを構築するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム 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メールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH