Web アプリケーション (ASP.NET) を作ってみよう

Visual Studio で Web アプリケーション(ASP.NET)を作ってみましょう。
TextBox に入力された値を基に、Button をクリックした時に画面上のラベルへメッセージ出力します。
何も入力されていない時は、エラーメッセージを出力します。
※解説に用いた Visual Studio 2005 の Edition は、Team System Edition です。
サンプルのダウンロード

このカテゴリーの先頭へ このページの先頭へ

■Web サイトの作成

Visual Studio 2005 を起動します。
メニューバーの[ファイル]→[新しい Web サイト]をクリックします。
すると、こんな感じのダイアログが出てきます。
※私の VS の設定は、メニューバーの[オプション]→[プロジェクトおよびソリューション]のチェックボックスに
 に全てのチェックが入っている状態になっています。
新しい Web サイトダイアログボックス
場所、言語を任意で入力して下さい。
※ここでは、場所を MyWebApp01 、言語を Visual Basic としました。

[OK]ボタンを押下すると、以下の画面が出現します。
Web サイトを作成した直後
Web サイトの作成はとりあえず、完了しました。

このカテゴリーの先頭へ このページの先頭へ

■コントロールの配置

TextBox や Button 等のコントロールを配置しましょう。
ツールボックス(IDE 上に無い人は、メニューバーの[表示]→[ツールボックス]で表示させてくださいね)で、
[標準]の中から、TextBox をクリックします。
マウスを押したままの状態で、Page 上にマウスポインタを持っていってください。
Page 上で、マウスを放してください。
↓こんな感じに配置します。

配置した位置が気に入らなければ、
適宜 画面下部にある、[ソース] を押下し、任意のタグを書くなどして調整して下さい。
テキストボックス配置

Button と Label を TextBox と同様に配置します。
ボタンとラベルの配置

配置が終わったら、メニューバーの[ファイル]→[Default.aspx の保存]で、保存しましょう。

配置が終わった後の、aspx ファイルは以下の様になっています。

Default.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>無題のページ</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
        <asp:Button ID="Button1" runat="server" Text="Button" /><br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></div>
    </form>
</body>
</html>
このカテゴリーの先頭へ このページの先頭へ

■コードを入力

デザイナ上で(デザインビューで) Button をダブルクリックして下さい。
そうすると、コードビューに切り替わって、以下のコードが生成されているはずです。

Partial Class _Default
    Inherits System.Web.UI.Page

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

    End Sub
End Class

以下の様にコードを入力して下さい。

Default.aspx
Partial Class _Default
    Inherits System.Web.UI.Page

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        Dim inputedString As String = Me.TextBox1.Text

        ' 入力されていなかった時はエラーメッセージを出力して処理終了
        If inputedString = "" Then
            Me.Label1.Text = "お名前をテキストボックスに入力して下さい"
            Me.TextBox1.Focus()
            Return
        End If

        ' 入力されていた時は挨拶のメッセージを出力
        Me.Label1.Text = "こんにちは" + inputedString + "さん!"
    End Sub
End Class

コードの入力が終わったら、メニューバーの[ファイル]→[_Default.aspx.vb の保存]で、保存しましょう。

このカテゴリーの先頭へ このページの先頭へ

■実行しよう!

コードの入力が終わったら、現在作業した Default.aspx をスタート ページに設定します。
スタート ページは該当アプリケーション(今回は MyWebApp01)内で最初に実行されるページです。しかし
IIS の 設定 の 規定のドキュメント とは異なります。
ソリューションエクスプローラ上で、Detault.aspx を右クリックして、[スタート ページに設定]をポイントします。

メニューバーの[デバッグ]→[デバッグ開始]をクリックしましょう。以下の画面が出ます。
勉強する際にはデバッグしながらできた方が良いと思いますので、特に問題なければ [デバッグを有効にするために Web.config ファイルを変更する]を選択して下さい。
web.config 書き換えの確認

そうすると、以下のような実行画面が現れましたね。
起動したところ

まず、TextBox に何も入れないで Button をクリックしてみます。
エラーメッセージ
↑のメッセージがちゃんと出ましたか?

次に、TextBox に自分の名前を入力して Button をクリックしてみます。
ごあいさつ
↑のメッセージがちゃんと出ましたか?

2 つのメッセージが出れば大成功です。
メッセージの内容などを変更してみて、色々と遊んでみてください。
また、ブラウザに表示された HTML のソース表示を見てみてください。
どのコントロールがどの HTML タグに変換されるのか掴めると思います。

このカテゴリーの先頭へ このページの先頭へ

■参考資料

Page クラス
TextBox クラス
Label クラス
Button クラス