簡単なWebアプリケーション作成

 Webアプリケーションは次の手順でプログラミングを行ないます。

 手順1 プロジェクトを作成する
 手順2 Webフォームを追加する
 手順3 Webフォームにコントロールを配置する
 手順4 配置したコントロールのプロパティを編集する
 手順5 イベントハンドラの記述をする
 手順6 テスト実行をする

 今回はWebページに「Hello ASP.NET!」と表示させて見ましょう。

■ Visual Studioを起動する

 「スタート」―「アプリ」―「Visual Studio 2017」をクリックします。すると、次の図のような画面が表示されます。

スタートページ画面
スタートページ画面

■ プロジェクトを作成する

 メニューの「ファイル(F)」―「新規作成(N)」―「プロジェクト(P)...」をクリックします。すると、次の図のように「新しいプロジェクト」ダイアログが開きます。そのダイアログの「テンプレート」―「Visual C#」―「Web」―「ASP.NET Webアプリケーション」を選択します。そして、「名前(N):」にプロジェクト名を入力します。今回は、「WebApplication1」とします。場所は、作成するアプリケーションを保存するフォルダーを指定します。その後、「OK」ボタンをクリックします。

新しいプロジェクトの選択画面
新しいプロジェクトの選択画面

 すると、次の図のようにテンプレートの選択画面が表示されるので、「Empty」を選択して「OK」をクリックします。

テンプレートの選択画面
テンプレートの選択画面

■ Webフォームを追加する

 ソリューション エクスプローラー内のプロジェクト名を右クリックして、次の図のように「追加(D)」―「Webフォーム」をクリックしてください。

Webフォームを選択
Webフォームを選択

 すると次の図のように名前を入力するダイアログボックスが表示されるので、「項目名:」に「index」と入力して「OK」ボタンをクリックしてください。

項目名を入力
項目名を入力

 すると、次のようにWebフォームのソースが表示されます。

Webフォームの編集画面
Webフォームの編集画面

■ Webフォームにコントロールを配置する

 Webフォームを編集する画面には表示モードが3つあります。編集画面の下のボタンで切り替えられます。

画面表示の切り替えボタン
画面表示の切り替えボタン

 Webフォームに「Label」コントロールを配置しましょう。「デザイン」ボタンを押してデザインモードを表示し、ツールボックスから配置したいコントロールを選び、Webフォーム上にドラッグ&ドロップしましょう。

Labelを配置する
Labelを配置する

 Webフォームに「Button」コントロールも配置しましょう。デザイン画面で改行をして、Labelコントロールの下に配置してください。

Buttonを配置する
Buttonを配置する

■ 配置したコントロールのプロパティを編集する

 先ほど配置したButtonコントロールを選択している状態で、プロパティウィンドウからプロパティの設定を行いましょう。「Text」プロパティを「送信」に変えてください。

Textプロパティを編集する
Textプロパティを編集する

■ イベントハンドラの記述をする

 今回のプログラムは、送信ボタンをクリックしたら処理を実行させるようにします。そのため、Buttonコントロールをクリックした際に発生するイベントハンドラに処理を記述します。Buttonコントロールをダブルクリックしてください。次の図のように、コードエディタが表示され、イベントハンドラのスケルトンが生成されます。

イベントハンドラのスケルトン
イベントハンドラのスケルトン

Protected void Button1_Click()のブロック内に次のプログラムを記述してください。

index.aspx.cs

  1. Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
  2.  Me.Label1.Text = "Hello ASP.NET!!"
  3. End Sub

■ テスト実行をする

 では、動作するかどうかの確認を行ないましょう。ツールバーにある「デバッグ開始」のアイコンをクリックするか、「F5」キーを押します。

ツールバーの「デバッグ開始」ボタン
ツールバーの「デバッグ開始」ボタン

 すると、次の図のようにWebブラウザーが表示されるので、「送信」ボタンをクリックしてください。画面が切り替わり、Lableコントロールの表示が変化します。

実行結果
実行結果

サンプルダウンロード

 確認後、デバッグ実行停止ボタンを押して停止させてください。試しに、Labelのプロパティを色々変更して、実行してみてください。

前へ   次へ