更新日: 2009 年 10 月 8 日

C# の内容はこちらに掲載しています。 10 行でズバリ!! Web アプリケーション開発 (C#)

このコンテンツのポイント

  • Web ページのデザイン
  • ボタンがクリックされた時の処理の実装
  • Web ページが表示された時の処理の実装

今回紹介するコード

Visual Basic
' ボタンがクリックされた時の処理を記述します
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) _
Handles Button1.Click
    Label1.Text = "ボタンがクリックされました"
End Sub
' Web ページが表示された時の処理を記述します
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
Handles Me.Load
    ' Web ページが初めて表示されたか判別します。
    If Page.IsPostBack Then
        Label2.Text = "2 回目以降の処理です"
    Else
        Label2.Text = "初めての処理です"
    End If
End Sub
 

目次

  1. はじめに
  2. Web フォームの開発準備
  3. 画面をデザインする
  4. コントロールにさまざま設定を施す
  5. ボタンがクリックされた時のコードを実装する
  6. 実行する
  7. Web ページが表示される際のコードを実装する
  8. おわりに
  9. 注釈

1. はじめに

ASP.NET は Web アプリケーションの開発および実行基盤です。ASP.NET を使用することによって、サーバー側での状況に応じた処理結果を反映できる、より魅力的な Web ページを開発することができます。

ASP.NET を使用すれば、さまざまな種類の Web アプリケーションを開発することができますが、ここでは、Web フォームという技術を利用した Web ページの開発について解説します。

ページのトップへ


2. Web フォームの開発準備

まず、新規に Web サイトを作成します。Visual Studio の [ファイル] メニューをクリックし、[新規作成] をポイントして、[Web サイト] をクリックします。すると、[新しい Web サイト] ダイアログ ボックスが表示されます。

ここでは、言語として Visual Basic を選択し、テンプレートとして「ASP.NET Web サイト」を選択します。[場所] 欄では、ドロップダウン リストで 「ファイル システム」が選択されていることを確認した後、パスとして「C:\demo\Website1」を入力し、[OK] をクリックします。

これで、Web フォームによる Web ページ開発の準備が完了しました。

図 1. Web ページ開発のため、Web サイトを新規に作成する

ページのトップへ


3. 画面をデザインする

既定の構成では、Default.aspx のソースを編集するためのソース ビューが開いています (図 2)。

図 2. Web ページのソースを編集するソース ビュー

ここでは、この編集画面の左下にある [デザイン] タブをクリックして、デザイン ビューに切り替えます。ビジュアルにフォーム上のユーザー インターフェイスの構成を行える、デザイン ビューが開きます。フォームのデザインは、この画面を使って、ドラッグ アンド ドロップという一貫性のある手順で行うことができます (図 3)。

図 3. Web フォームをビジュアルにデザインするデザイン ビュー

また、[並べて表示] タブをクリックすることでコード ビューとデザイン ビューを並べて表示することができます。

画面左側 (*1) に表示されている [ツール ボックス] から [標準] タブを展開すると、いくつかのアイコンが表示されます。このアイコンが画面のための構成要素になっています。これをコントロールと呼びます。

必要とされるコントロールを、画面中央に表示されたフォームにドラッグ アンド ドロップすることで、画面の構成を進めていくことができます。一度画面上に配置されたコントロールは、マウス操作によって位置や大きさを変更することができます。また、誤って必要のないコントロールを配置してしまったときは、そのコントロールをクリックして選択し、[Delete] キーを押せば、フォームから削除することができます。また、配置した 2 つのコントロールの間をクリックして、挿入ポインタを置いた後、[Enter] キーを押すと、その場で改行して、その後のコントロールは次の行に表示することができます。

ここでは、図 4 のように、Label コントロールと、Button コントロールを配置しています。

図 4. 画面上にコントロールを配置したところ

ページのトップへ


4. コントロールにさまざま設定を施す

コントロールには、名称やフォント サイズ、大きさ、色などさまざまな設定を行うことができます。これらの設定を行うためには、画面右下 (*1) に表示される [プロパティ] ウィンドウを利用します。

フォントの設定を行うのであれば、Font プロパティ、コントロールの表示サイズを変更するのであれば Height/Width プロパティ、色を変更するのであれば BackColor プロパティといったように、わかりやすい名前のプロパティが多く用意されています。

実際に設定する際は、プロパティの名称が表示されている部分の右側の欄をクリックし、文字を入力したり、値を設定したりします。プロパティによっては、図 5 のように選択肢が表示され、必要なものをクリックすることで設定するものもあります。

図 5. ボタンの背景色 (BackColor プロパティ) を変更する

ページのトップへ


5. ボタンがクリックされた時のコードを実装する

コントロールに対しての必要な設定が完了した後は、アプリケーションとして必要となるコードを記述します。

Web フォームでは、アプリケーションの利用者の操作に応じてコードが実行されるというイベント駆動型のプログラミング スタイルを採用しています。イベントのコードを記述するためには、画面上に配置された該当のコントロールをダブルクリックします。すると、拡張子が .aspx.vb (Visual C# の場合 .aspx.cs) というファイルが開かれ、そこにコードを記述することができるようになります。(図 6) 従来の ASP ページでは、デザインと実際のロジックを同じファイルに記述する必要がありました。それに対し、ASP.NET ではデザインとロジックを分離することができ、コードの可読性を向上させることができます。(*2)

ここでは、クリックされたときにラベル コントロールに文字が表示されるようなコードを実装しておきます。

Visual Basic
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) _
Handles Button1.Click
    Label1.Text = "ボタンがクリックされました"
End Sub
 

図 6. 拡張子が .aspx.vb (Visual C# の場合 .aspx.cs) というファイルが開かれ、コードを記述することができる

ページのトップへ


6. 実行する

イベントのコードの記述が完了したら、実行してみましょう。

アプリケーションを実行させるには [Ctrl + F5] キーを押すか、[デバッグ] メニューの [デバッグなしで開始] をクリックします。

すると、Visual Studio の既定の構成では、試験用の Web サーバーとして「ASP.NET 開発サーバー」が自動的に起動し、そのサーバーの上で、Web アプリケーションが実行されるようになります。また、Web ブラウザーが自動的に起動して、作成した Web ページが表示されます。URL には、ASP.NET 開発サーバーが使用するための、ランダムに設定されたポート番号が含まれています。このポート番号はソリューション ファイルに書き込まれ、これ以降は同じポート番号で実行することになります。

また、イベントを記述したボタンを Web ページ上でクリックすると、図 7 のように表示され、記述したコードの処理結果が反映されていることを確認できます。

図 7. Web アプリケーションの実行結果

ページのトップへ


7. Web ページが表示される際のコードを実装する

今度は Web ページが表示される際に、初期処理を行うコードを実装してみましょう。

ここで、デザイン ビュー上で Web フォームの余白をダブルクリックします。すると、Page_Load イベント ハンドラーに挿入ポインタが移ります。このイベント ハンドラーには、Web ページが表示される時の処理を実装するためのものです。

次に、デザイン ビューを使って、Web フォーム上のボタンの下に、新しい Label コントロール (Label2) を貼り付け、コード ビューを使って Load_Page イベント ハンドラーに、以下のように Label 2 に文字列を表示するようコードを記述します。

Visual Basic
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
Handles Me.Load
    Label2.Text = "ページが表示される時の処理です"
End Sub
 

動作を確認するために、ブレークポイントを使用してこの追加した行を通るたびに処理が停止するように設定します。ブレークポイントは、図 8 のように該当行で右クリックし [ブレークポイントの挿入] メニューをクリックして設定できます。

図 8. ブレークポイントを設定

[F5] キーを押すか、[デバッグ] メニューの [デバッグ開始] をクリックして Web アプリケーションを実行してみましょう。

すると、最初にデバッグが無効である旨のメッセージ ボックスが表示されるので、[新しい Web.config を追加してデバッグを有効にする] オプションを選択し、[OK] をクリックします (図 9)。

図 9. 現在の設定では、デバッグが無効になっている

この後、デバッガーが起動して、ブレークポイントを設定した行でプログラムの実行が停止し、記述したコードが実行されることがわかります (図 10)。

図 10. Load_Page イベント ハンドラー内で中断する

処理を先に進めるために [F5] キーを押して下さい。すると図 11 のような画面が表示されます。

図 11. Web ページ読み込みの実行結果

さらに、Web フォーム上でボタンをクリックしてみます。すると、サーバー側に要求が送られ、ブレークポイントで再度停止することを確認することができます。このように、ボタンを押した際には、単にボタンの Click イベント ハンドラーが実行されるだけではなく、サーバーにアクセスする都度に (つまり、HTTP 要求をサーバーに送る都度に)、Load イベントが発生します。つまり、Page_Load イベント ハンドラーは、本来の初期処理のタイミング以外にも、呼び出されるのです。よって、このイベント ハンドラーに、本当の意味での初期処理を記述するためには、少し工夫が必要です。

初めての表示かどうかを判別するためには、Page オブジェクトの IsPostBack プロパティを利用します。IsPostBack が True の場合は、2 回目以降の表示であり、False の場合は初めての表示と判別することができます。

下記のように、初めての表示かどうかを判断し、Label2 コントロールに表示される文字列が変わるように、Page_Load イベント内のコードを変更します。

Visual Basic
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
Handles Me.Load
    ' Web ページが初めて表示されたか判別します。
    If Page.IsPostBack Then
        Label2.Text = "2 回目以降の処理です"
    Else
        Label2.Text = "初めての処理です"
    End If
End Sub
 

もう一度、実行してみます。

今度は初めての表示の場合には「初めての処理です」という文字列が表示され (図 12)、ボタンをクリックした 2 回目以降の Web ページの表示の場合には「2 回目以降の処理です」という文字列が表示される (図 13) ようになりました。

図 12. 初めての表示の場合には「初めての処理です」という文字列が表示される

図 13. 2 回目以降は「2 回目以降の処理です」という文字列が表示される

ページのトップへ


8. おわりに

このように Visual Studio に代表される統合開発環境を使用することによって、より簡単に Web ページを作成することができます。

さらに、ASP.NET では、組み込みのコントロールとして、検証を行うコントロールや、データを一覧表示するためのコントロールなど豊富な機能が提供されており、魅力的な Web ページをより容易に開発することができます。

関連するコンテンツなどを参考にしながら、ぜひ、Web フォームを使用した Web アプリケーションの開発にチャレンジしてみて下さい。


9. 注釈

*1: 画面上の位置について

各サブウィンドウの位置は、Visual Studio のセットアップ終了後に標準的に配置されている場所を示しています。これらのウィンドウやツール ボックスは、ドラッグ アンド ドロップによって画面上の任意の位置に配置して、開発を行う皆さんが利用しやすい場所へ移動することができます。

もし、必要なウィンドウが画面上のどこにも見当たらないときは、[表示] メニューをクリックし、該当ウィンドウのメニューをクリックするか、同じく [表示] メニューをクリックし、[その他のウィンドウ] サブメニューから選択することで再度画面上に表示させることができます。

*2: デザインと処理ロジックの分離について

ASP.NET ではデザインと処理ロジックを異なるファイルに記述することも、同一ファイル内に記述することも可能です。


Code Recipe .NET Framework デベロッパー センター

ページのトップへ