ダメダメWebアプリからの脱却を目指せ

習うより慣れろ！ASP.NETでWebアプリを作る

2010年06月04日 09時00分更新

文● 有川榮一、TECH.ASCII.jp　イラスト●野崎昌子

コンポーネントを配置する

　Webフォームが作成できたら、ソースビュー画面の左下にある[デザイン]タブをクリックして、デザインビューに切り替える。フォーム上のユーザーインターフェイスの構成を行なえるデザインビューが開く。

　ASP.NETでは、アプリケーションのユーザーの操作に応じてコードが実行されるというイベント駆動型のプログラミングスタイルを採用している。イベントのコードを記述するためには、画面上に配置された該当のコントロールをダブルクリックする。すると、ロジッククラスが開かれ、そこにイベントをハンドリングするコードが自動生成される。

画面5　デザインビューの画面

　Webフォームのデザインは、この画面を使って、[ツールボックス］ウィンドウからコンポーネントをドラッグ＆ドロップすることで行なう。[ツールボックス］ウィンドウは、この画面左側の［ツールボックス］をクリックすると開くことができる。［ツールボックス］ウィンドウ内には、利用可能なコントロール一覧が表示される。

画面6　［ツールボックス］ウィンドウ

　ここでは、今回のアプリケーションで必要なコンポーネントを次のように配置する。

ユーザー名入力コンポーネント：TextBox

パスワード入力コンポーネント：TextBox

ログオンボタン：Button

認証結果：Label

画面7　LogonForm.aspxのデザイン後

コンポーネントを設定する

　コントロールには、IDや名称、フォントサイズ、大きさ、色などさまざまな設定を行なえる。これらの設定のためには、画面右側に表示される［プロパティ］ウィンドウを利用する。ここでは、今回のアプリケーションで必要なコンポーネントのIDを下記のように設定する。

ユーザー名入力コンポーネント：UserNameTextBox

パスワード入力コンポーネント：UserPasswordTextBox

ログオンボタン：LogonButton

認証結果：ResultMessageLabel

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

　コントロールに対して必要な設定が完了した後は、アプリケーションのコードを記述する。画面上に配置されたログオンボタンをダブルクリックすると、Webフォームのロジッククラスが開かれて、ログオンボタンをクリックしたときに実行されるコードが追加される。

画面8 Webフォームのロジッククラス

　ここでは、LogonButtonがクリックされた時に、入力された文字で認証され、その結果が表示されるようなコードを実装する。認証された場合は、認証結果を青文字で、また認証されなかった場合は、認証結果を赤文字で表示する。


    protected void LogonButton_Click(object sender, EventArgs e)
    {
        if (UserNameTextBox.Text == "User1" &&
            UserPasswordTextBox.Text == "Password1")
        {
            ResultMessageLabel.Text = "ユーザー認証されました";
            ResultMessageLabel.ForeColor = System.Drawing.Color.Blue;
        }
        else
        {
            ResultMessageLabel.Text = "ユーザー認証出来ません";
            ResultMessageLabel.ForeColor = System.Drawing.Color.Red;
        }
    }

実行・デバック

　イベントのコードの記述が完了したら、[Ctrl + F5] キーを押すか、［デバッグ]］メニューの [デバッグなしで開始]で、アプリケーションを実行させる。すると、Webアプリケーションがブラウザー上で実行される。LogonButtonをクリックすると、画面9や画面10のように表示され、記述したコードの処理結果が反映されていることを確認できる。