Default.aspx ページを閉じます。この操作を実行するには、ファイル名が表示されているタブを右クリックし、[閉じる] を選択します。

ソリューション エクスプローラで、Web サイト (たとえば、[C:\BasicWebSite]) を右クリックし、[新しい項目の追加] をクリックします。

[Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。

[プロジェクト名] ボックスに「FirstWebPage」と入力します。

[言語] ボックスで、使用するプログラミング言語を選択します ([Visual Basic]、[C#]、または [J#])。

Web サイトを作成したときに、既定の言語を指定しています。ただし、Web サイトに新しいページやコンポーネントを作成するたびに、既定の言語を別の言語に変更できます。同じ Web サイトで、複数のプログラミング言語を使用できます。

[別のファイルにコードを書き込む] チェック ボックスをオフにします。次のスクリーン ショットは、[新しい項目の追加] ダイアログ ボックスを示したものです。

このチュートリアルでは、コードと HTML が同じページにある、単一ファイルのページを作成します。ASP.NET ページのコードは、同じページ上に置くことも、別のクラス ファイルに入れることもできます。コードを別のファイルに置く方法の詳細については、「チュートリアル : Visual Web Developer でのコードの分離を使用した基本的な Web ページの作成」を参照してください。

[追加] をクリックします。

新しいページが作成され、ソース ビューに表示されます。

ドキュメント ウィンドウの下部にある [デザイン] タブをクリックして、デザイン ビューに切り替えます。

デザイン ビューに、作業中のページが WYSIWYG に近いビューで表示されます。この時点では、このページにはテキストもコントロールもないので、空白のページが表示されます。

このページに、「Welcome to Visual Web Developer」と入力します。

次のスクリーン ショットは、デザイン ビューに上のテキストを入力したところです。

ソース ビューに切り替えます。

次のスクリーン ショットに示されているように、デザイン ビューに入力して作成した HTML が表示されます。

Ctrl キーを押しながら F5 キーを押してページを実行します。

Visual Web Developer により ASP.NET 開発サーバーが起動します。ツール バー上に Visual Web Developer の Web サーバーが実行中であることを示すアイコンが表示されます (下のスクリーン ショットを参照)。

ブラウザにページが表示されます。作成したページの拡張子は .aspx ですが、通常の HTML ページと同じように表示できます。

メモ :
ブラウザに 502 のエラーやページを表示できないことを意味するエラーが表示されたときは、ローカルの要求に対してプロキシ サーバーをバイパスするようにブラウザを構成することが必要な場合があります。詳細については、「方法 : ローカル Web 要求に対してプロキシ サーバーをバイパスする」を参照してください。

ブラウザを閉じます。

Button コントロールを選択し、[プロパティ] ウィンドウの [テキスト] を「Display Name」に設定します (次のスクリーン ショットを参照)。

ソース ビューに切り替えます。

ソース ビューに、このページの HTML が表示されます。Visual Web Developer がサーバー コントロール用に作成した要素も表示されます。コントロールは、HTML に似た構文で表記されます。ただし、タグはプレフィックスに asp: を使用し、属性は runat="server" と指定されます。

コントロールのプロパティは、属性として宣言します。たとえば、手順 1 で Button コントロール用の Text プロパティを設定したとき、実際にはコントロールのマークアップに Text 属性を設定したことになります。

すべてのコントロールが <form> 要素の内部にあります。この要素にも属性 runat="server" が指定されています。コントロール タグの runat="server" 属性と、asp: プレフィックスは、ページが実行されるときに、そのコントロールについてはサーバー側で ASP.NET による処理が必要なことを示します。<form runat="server"> 要素と <script runat="server"> 要素の外部にあるコードは、クライアント側コードとしてブラウザによって解釈されます。したがって、ASP.NET コードは、必ず上記の要素の内部にあることが必要です。

カーソルを、<asp:label> タグ内に置き、Space キーを押します。

ドロップダウン リストが開き、Label コントロールに設定できるプロパティの一覧が表示されます。この機能は、IntelliSense と呼ばれ、ページ上で使用するサーバー コントロール、HTML 要素、その他のアイテムの構文をソース ビューで記述するのに便利です。次のスクリーン ショットは、Label コントロールの IntelliSense ドロップダウン リストを示したものです。

ForeColor を選択し、等号 (=) を入力します。IntelliSense により色の一覧が表示されます。

メモ :
Ctrl キーを押しながら J キーを押すと、いつでも IntelliSense ドロップダウン リストを表示できます。

Label コントロールのテキストに使用する色を選択します。

ForeColor 属性に、選択した色が指定されます。

デザイン ビューに切り替えます。

Button コントロールをダブルクリックします。

ソース ビューに切り替わり、Button コントロールの既定のイベントである Click イベントのスケルトン イベント ハンドラが作成されます。

メモ :
デザイン ビューでコントロールをダブルクリックする方法以外にも、イベント ハンドラを作成する方法がいくつかあります。

ハンドラの内側に、次のように入力します。

Label1

次のスクリーン ショットに示されているように、Label コントロールで使用できるメンバの一覧が表示されます。

ボタンの Click イベント ハンドラを、次のコード例に示されているように完成させます。

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
End Sub

protected void Button1_Click(object sender, System.EventArgs e)
{    
    Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
}

<asp:Button> 要素まで、スクロール ダウンします。<asp:Button> 要素には、属性 OnClick="Button1_Click" があることに注意してください。この属性は、ボタンの Click イベントを、手順 4 でコードを記述したハンドラ メソッドにバインドします。

イベント ハンドラ メソッドには、自由に名前を付けられます。ここに示されているのは、既定で作成された名前です。重要なことは、OnClick 属性名とこのページのメソッド名が一致していなければならないという点です。

メモ :
Visual Basic を使用してコードを分離している場合は、明示的な OnClick 属性は付加されません。その代わりに、このイベントは、ハンドラの宣言自体に使用されている Handles キーワードによってハンドラのメソッドにバインドされます。

Ctrl キーを押しながら F5 キーを押して、ブラウザでページを実行します。

このときも、ページは ASP.NET 開発サーバーで実行されます。

テキスト ボックスに名前を入力して、ボタンをクリックします。

入力した名前が、Label コントロールに表示されます。ボタンをクリックしたときに、ページが Web サーバーにポストされた点に注意してください。次に ASP.NET によってページが再作成され、ユーザーが記述したコード (この場合は、Button コントロールの Click イベント ハンドラ) が実行されて、新しいページがブラウザに送られます。ブラウザのステータス バーを見ると、ボタンをクリックするたびに、ページが Web サーバーとの間を往復していることがわかります。

実行中のページのソースをブラウザに表示します。

ページのソース コードには通常の HTML のみが表示されます。ソース ビューで操作した <asp:> 要素は表示されません。ページを実行すると、ASP.NET によってサーバー コントロールが処理され、そのコントロールを示す機能を実行する HTML 要素がページに表示されます。たとえば、<asp:Button> コントロールは、HTML 要素 <input type="submit"> として表示されます。

ブラウザを閉じます。

ソース ビュー上部の左側のドロップダウン リストの [Calendar1] を選択します。

ドロップダウン リストには、コードを記述することのできるすべてのオブジェクトの一覧が表示されます。

右側のドロップダウン リストから、[SelectionChanged] を選択します。

Visual Web Developer により、Calendar コントロールの SelectionChanged イベントのスケルトン イベント ハンドラが作成されます。

これで、コントロールのイベント ハンドラを作成する 2 とおりの方法を学習しました。最初の方法では、デザイン ビューでコントロールをダブルクリックしました。2 番目の方法では、ソース ビューでドロップダウン リストからオブジェクトを選択し、コードの記述対象となるイベントを選択しました。

強調表示された次のコードを書き込むと、SelectionChanged イベント ハンドラが完成します。

Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Calendar1.SelectedDate.ToString()
End Sub

protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{    
    Label1.Text = Calendar1.SelectedDate.ToString();
}

Ctrl キーを押しながら F5 キーを押して、ブラウザでページを実行します。

カレンダーのいずれかの日付をクリックします。

クリックした日付が Label コントロールに表示されます。

ブラウザで、ページのソース コードを確認します。

Calendar コントロールがページ上に表として表示され、個々の日付が <a> 要素を含んだ <td> 要素として表示されます。

ブラウザを閉じます。