チュートリアル : 基本的な ASP.NET Wizard コントロールの作成
更新 : 2007 年 11 月
Web サイトを開発する場合、通常、ユーザー データを収集するための一連のフォームを作成します。ASP.NET の Wizard コントロールにはステップの作成、新しいステップの追加、またはステップの並べ替えを簡単に実行するための機構が用意されているので、このコントロールを使用するとフォームの作成とユーザー入力の収集に関連する多数の作業を簡略化できます。このチュートリアルでは、ASP.NET Wizard コントロールを使用して、データ収集を一連の個別のステップとして簡略化します。コードを作成したり、フォーム ステップ間でユーザー データを保持したりする必要はありません。ここでは、ユーザーの名前および電子メール アドレスを収集する簡単なウィザードを作成し、完了ステップでそれらのデータをユーザーに対して表示します。このチュートリアルでは、以下のタスクを行います。
ページへの Wizard コントロールの追加
ウィザードのステップへのコントロールとテキストの追加
ウィザードのデータへのステップ間でのアクセス
前提条件
このチュートリアルを実行するための要件は次のとおりです。
- Visual Studio または Visual Web Developer。
Web サイトの作成
(「チュートリアル : Visual Web Developer での基本的な Web ページの作成」の手順を実行するなどして) 既に Web サイトを作成してある場合はその Web サイトを使用できるので、このチュートリアルの「Wizard コントロールの追加」に進むことができます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。
ファイル システム Web サイトを作成するには
Visual Web Developer (または Visual Studio) を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします。
[新しい Web サイト] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスに、Web サイトのページを格納するフォルダの名前を入力します。
たとえば、フォルダ名として「C:\WebSites」と入力します。
[言語] ボックスで、作業に使用する言語をクリックします。
[OK] をクリックします。
Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
Wizard コントロールの追加
Wizard コントロールを追加するには
デザイン ビューに切り替えて、Default.aspx を表示します。
ツールボックスの [標準] タブから、Wizard コントロールをページにドラッグします。
コントロールが定義済みの 2 つの既定のステップと共に表示されます。ステップをクリックすると、そのステップで表示されるテキストとコントロールを編集できます。
ウィザード ステップの編集
Wizard コントロールをページにドラッグすると、既定で定義済みの 2 つのステップが表示されます。このチュートリアルでは、両方のステップを編集し、最初の 2 つのステップ (ユーザー名と電子メール アドレス) の結果を表す完了ステップを追加します。
最初のウィザード ステップを編集するには
Wizard コントロールの端にあるハンドルの 1 つをドラッグし、このコントロールのサイズを既定サイズの約 2 倍にします。
Wizard コントロールの、下線が付いたテキスト [Step 1] をクリックします。
Wizard コントロールの編集領域をクリックします。
ここで、ステップの表示領域を編集します。
「Name:」と入力します。
入力したテキストの隣にあるウィザードのアクティブな領域に TextBox コントロールをドラッグします。
ここで、ユーザーの電子メール アドレスを収集するための 2 番目のステップを編集します。
2 番目のウィザード ステップを編集するには
Wizard コントロールの [Step 2] をクリックします。
Wizard コントロールの編集領域をクリックします。
「Email:」と入力します。
電子メール ラベルの隣にあるウィザードのアクティブな領域に TextBox コントロールをドラッグします。
ファイルを保存します。
完了ステップの追加
ここでは、ウィザードの終了点となる完了ステップを作成します。Complete ステップには、ナビゲーション オプションはありません。
完了ステップを追加するには
Wizard コントロールを右クリックします。
[スマート タグの表示] をクリックします。
[Wizard タスク] ダイアログ ボックスの [WizardSteps の追加と削除] をクリックします。
WizardStep コレクション エディタが表示されます。
[追加] ボックスの [追加] ボタンの [WizardStep] をクリックします。
[プロパティ] 領域に新しいステップが表示されます。
Title プロパティを Finished に設定します。
StepType プロパティを Complete に設定します。
[OK] をクリックします。
ここで、新しい完了ステップを編集します。このチュートリアルの目的に合わせ、ユーザーが前のステップで入力したデータが完了ステップに表示されるように設定します。
完了ステップを編集するには
Wizard コントロールを右クリックし、[スマート タグの表示] をクリックします。
[Wizard タスク] ダイアログ ボックスで、[ステップ] ボックスを使用して [Finished] ステップをクリックします。
.gif "メモ")
メモ :ボックス内には、そのステップを作成したときに指定した名前が表示されます。この例では、Finished が該当します。
Label コントロールをウィザードにドラッグし、既定の名前 Label1 を残します。
別の Label コントロールをウィザードにドラッグし、既定の名前 Label2 を残します。
ファイルを保存します。
完了ステップには、ユーザーが入力したデータが表示されます。ページの Load イベントを使用して、完了ステップに追加したラベルに最初の 2 つのステップの値を割り当てます。
ユーザーが入力したデータを表示するには
Default.aspx に戻り、デザイン ビューで、デザイン サーフェイスをダブルクリックします。
このページには、スタブとして作成された Page_Load メソッドが格納されます。
次の強調表示されたコードを追加します。
Private Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles Me.Load Label1.Text = TextBox1.Text Label2.Text = TextBox2.Text End Subvoid Page_Load(Object sender, System.EventArgs e) { Label1.Text = TextBox1.Text; Label2.Text = TextBox2.Text; }ファイルを保存します。
Wizard コントロールのテスト
ここで Wizard コントロールをテストします。
Wizard コントロールをテストするには
デザイン ビューで Default.aspx を表示します。
コントロールの [Wizard タスク] メニューを表示し、[ステップ] ボックスの [Step 1] をクリックします。
Wizard コントロールをクリックして、Ctrl キーを押しながら F5 キーを押します。
Step 1 の TextBox 名前コントロールに名前を入力します。
[次へ] をクリックします。
Step 2 の TextBox 電子メール コントロールに電子メール アドレスを入力します。
[完了] をクリックします。
データが表示されます。
次の手順
Wizard コントロールを使用すると、ユーザー データを収集するフォームの作成作業を簡略化できます。ここで説明する内容の他にも、ユーザー データの収集やフォームの使用に関する情報が必要になる場合があります。たとえば、次の場合です。
フォームを使用したユーザー認証の詳細が必要な場合。詳細については、「方法 : 簡単なフォーム認証を実装する」を参照してください。
テーマを使用してウィザードの外観を強化する場合。詳細については、「ASP.NET のテーマとスキンの概要」を参照してください。
Wizard コントロールの概要が必要な場合。詳細については、「Wizard Web サーバー コントロールの概要」を参照してください。