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

生徒

「Webサイトで名前を入力して送信する画面って、どうやって作っているんですか？」

先生

「ASP.NET Razor Pagesでは、フォームとPOST処理を使って実現できます。」

生徒

「フォームって何ですか？POSTっていうのもよく分からなくて…」

先生

「紙のアンケートに例えながら、順番に説明していきましょう。」

1. フォーム入力とは？Web画面で文字を書く仕組み

フォーム入力とは、Web画面に表示された入力欄に、名前やメールアドレスなどの文字を入力する仕組みのことです。現実世界で例えると、紙の申込書にペンで文字を書く行為と同じです。 ASP.NET Razor Pagesでは、HTMLフォームという仕組みを使って、利用者から情報を受け取ります。

フォームには入力欄や送信ボタンがあり、送信ボタンを押すことで、入力された内容がサーバーに送られます。この「送る」という動作が、Webプログラミングの基本になります。

2. POST処理とは？情報を安全に届ける方法

POST処理とは、フォームに入力された情報を、サーバー側へ送信して受け取る方法のひとつです。封筒に手紙を入れて渡すように、内容が外から見えにくい形で送信されます。

ASP.NET Razor Pagesでは、POST処理を使うことで、入力されたデータを安全に受け取り、画面に表示したり保存したりできます。初心者のうちは、「入力された内容を受け取る仕組み」だと理解すれば問題ありません。

Razor Pagesは、画面を表示するファイルと、処理を書くファイルがセットになっています。画面側は「.cshtml」、処理側は「.cs」という拡張子です。

紙のアンケートで言うと、質問用紙が.cshtml、集計係が.csの役割を持っています。この分担を理解すると、フォーム処理の流れが分かりやすくなります。

まずは、入力画面を作ります。ここでは、名前を入力して送信する、最もシンプルなフォームを用意します。


<form method="post">
    <label>名前：</label>
    <input type="text" name="UserName" />
    <button type="submit">送信</button>
</form>

method="post"と書くことで、このフォームはPOST処理として送信されます。 name属性は、サーバー側で値を受け取るための目印になります。

次に、送信された情報を受け取る処理を書きます。 Razor Pagesでは、OnPostという特別なメソッドを使います。


public string Message { get; set; }

public void OnPost(string userName)
{
    Message = "こんにちは、" + userName + "さん";
}

OnPostは、フォームが送信されたときだけ実行されます。 userNameには、フォームで入力された名前が自動的に入ります。

処理で作ったMessageを、画面に表示してみましょう。 cshtml側では、@を使って値を表示します。


@if (Model.Message != null)
{
    <p>@Model.Message</p>
}

ここでは、Messageが空でないときだけ表示するようにしています。条件によって表示を変えることで、自然な画面になります。

フォーム入力では、何も入力されずに送信されることもあります。そのため、「入力されているか」を確認する考え方が重要です。


if (string.IsNullOrEmpty(userName))
{
    Message = "名前を入力してください";
}

このように条件を追加することで、利用者に分かりやすい案内ができます。難しく考えず、「空だったらどうするか」を考えるだけで十分です。

Razor Pagesでのフォーム処理は、とても単純な流れになっています。「画面に入力 → 送信 → OnPostで受け取る → 結果を表示」という順番です。

この流れは、問い合わせフォームやログイン画面など、多くのWeb機能の基礎になります。まずは仕組みを理解し、動きをイメージできるようになることが大切です。