チュートリアル : ASP.NET Wizard コントロールの高度な操作方法
更新 : 2007 年 11 月
ASP.NET の Wizard コントロールは、複数のフォームの作成およびユーザー入力の収集に関連する多くのタスクを簡略化します。このチュートリアルでは、Wizard コントロールを使用してユーザーの住所情報を収集するフォームを作成し、そのフォームに電子メールの更新を有効にするか無効にするかを選択する機能を設定し、次に、最後の確認段階でデータと選択内容をユーザーに返すように設定します。このチュートリアルでは、以下のタスクを行います。
ウィザードの手順のレイアウトを編集します。
カスタム ウィザード手順を追加します。
ウィザード イベントをプログラムによりキャプチャします。
ウィザードに、ユーザーの選択に応じて分岐する機能を設定します。
ユーザー データを最終手順で表示します。
前提条件
このチュートリアルを実行するための要件は次のとおりです。
Microsoft Visual Web Developer
.NET Framework
Web サイトの作成
Visual Web Developer で Web サイトを既に作成している場合 (「チュートリアル : Visual Web Developer での基本的な Web ページの作成」を使用した場合など) は、その Web サイトを使用して、このチュートリアルの後半の「ページへの Wizard コントロールの追加」にスキップできます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。
ファイル システム Web サイトを作成するには
Visual Web Developer を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします。
[新しい Web サイト] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスに、Web サイトのページを格納するフォルダの名前を入力します。
たとえば、フォルダ名として「C:\WebSites」と入力します。
[言語] ボックスの一覧で、作業に使用するプログラミング言語をクリックします。
[OK] をクリックします。
Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
ページへの Wizard コントロールの追加
ページに Wizard コントロールを追加するには
デザイン ビューに切り替えます。
ツールボックス の [標準] グループから、Wizard コントロールをページにドラッグします。
名前と住所情報の収集
次に、ウィザードに、ユーザー データの収集、電子メール アドレスを要求するプロンプト、最終手順での収集データの表示の各手順を設定します。
まず、ユーザーの名前、番地、市区町村、都道府県、郵便番号を収集します。
最初の手順を設定するには
Wizard コントロールのいずれかのハンドルをドラッグして、コントロールを既定のサイズの約 2 倍の大きさに拡大します。
Wizard コントロールの中の下線が引かれたテキスト [Step 1] をクリックし、次に Wizard コントロール内の [Step 1] の右側にある編集領域をクリックします。
手順 1. の表示領域を編集できます。
「Name」と入力します。
ツールボックス の [標準] グループから、[TextBox] コントロールをテキストにドラッグします。
[プロパティ] ウィンドウで [TextBox] コントロールの [ID] を TextBox1 から Name に変更します。
この手順を繰り返して、以下の情報を収集するためのキャプションと TextBox コントロールを追加します (このコントロールは後で参照する必要があるので、名前を付けるのを忘れないようにします)。
Address
City
State
PostalCode
ファイルを保存します。
電子メール更新オプションの追加
このチュートリアルでは、ユーザーが電子メールの更新を受け取るかどうかを選択できるように設定します。
電子メール更新オプションを追加するには
[Step 2] をクリックします。
[Step 2] の右側の編集領域をクリックし、「Would you like to receive e-mail updates?」と入力します。
質問の下に「Yes」と入力します。
[ツールボックス] の [標準] グループから、[RadioButton] コントロールを Yes の横にドラッグします。
「No」と入力します。
[ツールボックス] から別の [RadioButton] を No の横にドラッグします。
電子メール アドレスを収集するためのカスタム手順の追加
このセクションでは、ユーザーの電子メール アドレスを収集するためのカスタム手順をウィザードに追加します。後で、ユーザーが電子メールの更新を受け付けない場合に、この手順をスキップするためのコードを追加します。
ユーザーの電子メールを収集するためのカスタム手順の追加
Wizard コントロールの編集領域以外の場所を右クリックして、次に [スマート タグの表示] をクリックします。
[Wizard タスク] ダイアログ ボックスの [WizardSteps の追加と削除] をクリックします。
[WizardStep コレクション エディタ] が表示されます。
[追加] ボタンの [追加] ドロップダウン リストの [WizardStep] をクリックします。
[OK] をクリックします。
[Wizard] コントロールに新しい手順が表示されます。
新しい手順をクリックして、編集モードに切り替えます。
編集可能領域に「E-mail address」と入力します。
[ツールボックス] の [標準] グループから、[TextBox] コントロールを E-mail address の横のコントロールにドラッグします。
後でコードの中で参照する必要があるので、[プロパティ] の [TextBox] コントロールの ID を EmailAddress に変更します。
最終手順の追加
ここで、ユーザーのデータをユーザーに返すための最終手順を追加します。
最終手順を追加するには
Wizard コントロールを右クリックし、[スマート タグの表示] をクリックします。
このコントロールの [Wizard タスク] メニューの [WizardSteps の追加と削除] をクリックします。
[WizardStep コレクション エディタ] が表示されます。
[追加] ボックスの一覧の [WizardStep] をクリックします。
プロパティ領域に新しい手順の属性が表示されます。
[プロパティ] ウィンドウで、[StepType] を [Complete] に設定します。
[OK] をクリックします。
Wizard コントロールに新しい手順が追加されます。
このコントロールの新しい手順をクリックし、次にその右側の編集可能領域をクリックします。
ツールボックス の [標準] グループから、[ラベル] コントロールを新しい手順にドラッグします。
Enter キーを押して新しい行を作成します。
次のように ラベル コントロールが合計 6 個あるので、手順 7. をさらに 5 回繰り返します。
Name
Address
City
Region or State
Postal Code
E-mail Address
ファイルを保存します。
ウィザードを実行する前に、最終手順のラベルに、ユーザーが最初の 3 つのウィザード手順で指定した値を割り当てる必要があります。
最終手順のコードの追加
このチュートリアルでは、最終手順でユーザーのデータを表示します。データが確実に表示されるように、最終手順のラベルをプログラムで割り当てます。データを表示するには、ページの Load イベントのコードを記述します。
コードを追加するには
Default.aspx に切り替えて、デザイン ビューのデザイン サーフェイスをダブルクリックします。
ページのコード エディタが開き、スケルトン Page_Load メソッドが作成されます。
次の強調表示されたコードを追加して、最終手順に割り当てます。
Private Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Load Label1.Text = Name.Text Label2.Text = Address.Text Label3.Text = City.Text Label4.Text = State.Text Label5.Text = PostalCode.Text Label6.Text = EmailAddress.Text End Subvoid Page_Load(object sender, EventArgs e) { Label1.Text = Name.Text; Label2.Text = Address.Text; Label3.Text = City.Text; Label4.Text = State.Text; Label5.Text = PostalCode.Text; Label6.Text = EmailAddress.Text; }ファイルを保存します。
Wizard コントロールのテスト
Wizard コントロールをテストするには
デザイン ビューに Default.aspx を表示します。
コントロールの [Wizard タスク] メニューを開き、[ステップ] ドロップダウン リストの [Step 1] をクリックします。
Ctrl キーを押しながら F5 キーを押してページを実行します。
.gif "メモ")
メモ :デザイン ビューからページを実行している場合は、ブラウザは、現在アクティブなウィザード手順から開始されることもあり、必ずしも最初の手順から開始されるとは限りません。ページを実行する前に、[プロパティ] ウィンドウで、ウィザードの ActiveStepIndex プロパティが 0 に設定されていることを確認します。
名前と住所情報を入力します。
[次へ] をクリックします。
電子メールのいずれかのオプションを選択します。
このチュートリアルで、後で電子メールを処理するコードを記述します。
電子メール アドレスを入力します。
[完了] をクリックします。
入力したデータがページに表示されます。
次のセクションでは、ユーザーが電子メール アドレスを提供しない選択をしたときに、電子メールを収集する 3 番目の手順をスキップするためのコードを追加します。
電子メールの手順をスキップするコードの追加
ウィザードのデータ収集とレイアウト部分の手順を完成したので、次に、ユーザーが電子メールの更新を受け取らない選択をしたときに、ユーザーが電子メールを収集する手順をスキップできるようにするロジックを追加します。そのためには、Wizard コントロールの NextButtonClick イベントを処理する必要があります。イベントを処理するときに、まず、ウィザードが現在、ユーザーが選択を行う手順にあるかどうかを確認します。そのような手順では、どちらの RadioButton コントロールが選択されるかをチェックします。ユーザーが [いいえ] を選択した場合は、Wizard コントロールの ActiveStepIndex プロパティを、ユーザーの電子メール アドレスを要求する手順をスキップするように設定します。
3 番目の手順をスキップするコードを追加するには
[Wizard] コントロールをクリックします。[プロパティ] ウィンドウで、NextButtonClick プロパティに「Wizard1_NextButtonClick」と入力し、Enter キーを押します。
コード エディタ ウィンドウが分離コード ページ内に開きます。
次の強調表示されたコードを追加します。これにより、正しい手順をチェックし、どの RadioButton コントロールが選択されたかを判断し、ウィザードの手順 3. をスキップするかどうかを決定します。
Private Sub Wizard1_NextButtonClick( ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) _ Handles Wizard1.NextButtonClick If Wizard1.ActiveStepIndex = 1 Then If RadioButton1.Checked Then ' Collect e-mail address. Wizard1.ActiveStepIndex = 2 Else Wizard1.ActiveStepIndex = 3 End If End If End Subvoid Wizard1_NextButtonClick(object sender, System.Web.UI.WebControls.WizardNavigationEventArgs e) { if (Wizard1.ActiveStepIndex == 1) { if (RadioButton1.Checked) // Collect ee-mail address. { Wizard1.ActiveStepIndex = 2; } else { Wizard1.ActiveStepIndex = 3; } } }ActiveStepIndex プロパティを設定すると、ウィザードは直接、指定された手順に移動します。
ファイルを保存します。
手順をスキップする機能のテスト
プログラムによるウィザードの手順のスキップをテストするには
デザイン ビューに Default.aspx を表示します。
コントロールの [Wizard タスク] メニューを開き、[ステップ] ドロップダウン リストの [Step 1] をクリックします。
Ctrl キーを押しながら F5 キーを押してページを実行します。
名前と住所情報を入力します。
[次へ] をクリックします。
[Step 2] の [No] チェック ボックスをオンにします。
[次へ] をクリックします。
最終手順まで進みます。
ブラウザの [戻る] ボタンを使用して、最初の手順に戻ります。または、ブラウザを閉じて、Ctrl キーを押しながら F5 キーを押して、ページを再度実行します。
最初の手順で、名前と住所情報を入力します。
[次へ] をクリックします。
[Step 2] の [Yes] チェック ボックスをオンにします。
[次へ] をクリックします。
電子メール アドレスを収集する手順まで進みます。
電子メール アドレスを入力します。
[次へ] をクリックします。
最終手順まで進みます。
次の手順
Wizard コントロールを使用すると、フォームを作成してユーザー データを収集する作業を容易に行うことができます。ここで説明した内容以外に、フォーム、および Wizard コントロールの外観と操作性の変更について質問がある場合もあります。たとえば、次の場合です。
Wizard コントロールの既定のテキスト ラベルをオーバーライドする方法。詳細については、「Wizard Web サーバー コントロールの概要」を参照してください。
Wizard コントロールでユーザーの入力を検証する方法。詳細については、「チュートリアル : Web フォーム ページにおけるユーザーの入力の検証」を参照してください。
Wizard コントロールの基本的な操作についてさらに詳しく学習する方法。詳細については、「チュートリアル : 基本的な ASP.NET Wizard コントロールの作成」を参照してください。