先生と生徒の会話形式で理解しよう

生徒

「ASP.NETのWebFormsで、ボタンやテキスト入力を作るにはどうすればいいんですか？」

先生

「WebFormsでは『サーバーコントロール』という便利な部品を使います。これを使うと、HTMLを直接書くよりも簡単に多機能な画面が作れるんですよ。」

生徒

「サーバーコントロール…難しそうな名前ですね。具体的にはどのように使うんですか？」

先生

「それでは、初心者の方にも分かりやすく、基本的な使い方を見ていきましょう！」

1. サーバーコントロールとは？

ASP.NET WebForms（ウェブフォーム）において、中心的な役割を果たすのが「サーバーコントロール」です。これは、ウェブページ上に配置する「ボタン」や「入力欄」「ラベル」といった部品のことです。通常のホームページ制作では、HTMLという言葉を使ってこれらの部品を配置しますが、サーバーコントロールは、プログラム（サーバー側）から直接操作できるという魔法のような特徴を持っています。

例えば、ボタンをクリックした時に「こんにちは」という文字を表示させる、といった動作を、まるでテレビのリモコンを操作するように簡単に作ることができます。プログラミング未経験の方にとっては、「画面上の部品を、裏側にあるプログラムが直接管理している状態」だとイメージすると分かりやすいでしょう。

なぜ「サーバー」という言葉がつくかというと、ユーザーがボタンを押した瞬間に、その情報が一度サーバー（サービスを提供しているコンピューター）に送られ、そこで処理が行われるからです。この仕組みによって、複雑な計算やデータベースとのやり取りがスムーズに行えるようになります。

2. サーバーコントロールの書き方の基本

サーバーコントロールを使うためには、書き方に決まりがあります。通常のHTMLタグとは少し異なり、必ず asp: という名前から書き始め、最後に runat="server" というおまじないを付け加える必要があります。このおまじないがないと、プログラム側からその部品を認識することができません。

また、それぞれの部品には ID という名前を付けます。これは、クラスの出席番号や、個人の名前のようなものです。プログラムが「どのボタンが押されたか」や「どの入力欄の文字を読み取るか」を判断するために、このIDが必要になります。

まずは、最も基本的な「ラベル（文字を表示する部品）」の書き方を見てみましょう。ラベルは、画面に特定の文字を表示させたい時によく使われます。


<asp:Label ID="Label1" runat="server" Text="ここには文字が表示されます"></asp:Label>

このコードを画面のファイル（.aspxファイル）に書くだけで、画面上に文字が表示されます。ID="Label1" がこの部品の名前になり、runat="server" が「これはサーバーで管理する特別な部品ですよ」という宣言になります。

3. ボタンをクリックした時の処理（イベント）

画面に部品を置くだけでは、アプリとは言えません。ユーザーがボタンを押したときに、何かが起きるように設定する必要があります。これをプログラミングの世界では「イベント」と呼びます。「ボタンが押された」という出来事（イベント）に対して、どんなお返しをするかを決めるのです。

例えば、ボタンを押したらラベルの文字が変わるというプログラムを作ってみましょう。まずは、画面側にボタンとラベルを用意します。


<asp:TextBox ID="txtName" runat="server" placeholder="名前を入力してください"></asp:TextBox>
<asp:Button ID="btnHello" runat="server" Text="クリックしてね" OnClick="btnHello_Click" />
<asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>

次に、裏側のプログラム（C#ファイル）に、ボタンが押された時の動きを書きます。これを「イベントハンドラ」と呼びます。専門用語で難しく聞こえますが、「ボタンが押された時の実行役」という意味です。


protected void btnHello_Click(object sender, EventArgs e)
{
    string name = txtName.Text;
    lblMessage.Text = name + "さん、こんにちは！";
}

このように書くと、入力された名前に合わせて挨拶をしてくれるようになります。txtName.Text という部分で、入力欄に書かれた文字を読み取っています。これがサーバーコントロールの便利なところです。

4. よく使われるサーバーコントロールの種類

WebFormsには、たくさんの便利なコントロールが用意されています。これらを組み合わせることで、プロのエンジニアのような画面を簡単に作ることができます。代表的なものをいくつか紹介します。

コントロール名	役割	主な用途
asp:TextBox	文字の入力欄	名前、パスワード、メールアドレスの入力
asp:Button	実行ボタン	データの送信、計算の実行、画面移動
asp:CheckBox	チェックボックス	「同意する」などの選択
asp:DropDownList	プルダウンメニュー	都道府県の選択など、リストからの選択

これらのコントロールは、すべて runat="server" を付けることで、プログラムから値を自由に変更したり、読み取ったりできます。例えば、会員登録フォームを作るなら、これらの部品を組み合わせて並べていくことになります。

5. コントロールの見た目を整えるプロパティ

サーバーコントロールには、「プロパティ」という設定項目があります。これは、その部品の「特徴」や「見た目」を決める設定値のことです。例えば、文字の色を変えたり、ボタンの大きさを変えたり、枠線を付けたりすることができます。

プロパティの変更は、コードで書くこともできますが、Visual Studio（ビジュアルスタジオ）という開発ソフトを使っている場合は、マウス操作で設定することも可能です。初心者の方は、まずはマウスで色を変えてみて、それがコード上でどのように反映されるかを確認するのが上達の近道です。


<asp:Label ID="lblWarning" runat="server" Text="エラーです！" ForeColor="Red" Font-Bold="true"></asp:Label>

この例では、ForeColor="Red" で文字の色を赤にし、Font-Bold="true" で太字にしています。プロパティを使いこなすことで、CSS（スタイルシート）を詳しく知らなくても、ある程度見栄えの良い画面を作ることができます。もちろん、もっとこだわりたい場合は、クラス名を指定して自分でデザインを調整することも可能です。

6. ポストバックという大切な仕組み

WebFormsを理解する上で避けて通れないのが「ポストバック」という言葉です。これは、自分の画面（ページ）から同じサーバーに対して、データを「送り戻す」ことを指します。

例えば、アンケートフォームで「送信」ボタンを押したとき、画面が一瞬チカッとして、同じ画面が表示されたまま「送信完了」と出ることがありますよね。あれは、サーバーにデータが送られ、処理された結果が再び画面に表示されているのです。これをポストバックと呼びます。

この時、サーバーコントロールは非常に賢く動いてくれます。通常のHTMLでは、一度ボタンを押して画面を読み込み直すと、入力した文字が消えてしまうことがありますが、サーバーコントロールは「ビューステート（ViewState）」という仕組みを使って、入力された内容を記憶してくれます。これにより、ユーザーは何度も同じ文字を入力し直す手間が省けるのです。

7. リスト形式のデータを表示するコントロール

最後に、少し応用編として「複数のデータを一覧で表示する」コントロールを紹介します。例えば、買い物リストや友達の名前一覧を表示したいときに便利です。代表的なものに asp:ListBox があります。

これを使うと、プログラム側で用意したデータの集まりを、自動的にリスト形式で画面に映し出すことができます。初心者の方でも、以下のコードを参考にすれば、データの追加が簡単に行えるようになります。


protected void Page_Load(object sender, EventArgs e)
{
    // 画面が最初に読み込まれた時だけ実行する
    if (!IsPostBack)
    {
        lstFruits.Items.Add("りんご");
        lstFruits.Items.Add("みかん");
        lstFruits.Items.Add("ぶどう");
    }
}

実行結果のイメージは以下の通りです。


・りんご
・みかん
・ぶどう

Page_Load というのは、「ページが表示されるときに動く自動スイッチ」のようなものです。そこに Items.Add という命令を書くだけで、画面のリストに項目が増えていきます。このように、サーバーコントロールとプログラムを組み合わせることで、動的な（中身が変化する）ウェブサイトが作れるようになります。