.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）を実行してみよう。冒頭に挙げたような結果が得られれば成功だ。

利用可能バージョン：.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」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）