【ASP.NET初心者が学んでみた】第3章：フォーム入力からデータを受け取ってみる 〜 Input → Controller → View の流れを理解する 〜

🏁 はじめに

前回（第2章：Visual Studioで初めてのWebアプリを動かしてみる）では、
ASP.NET Core MVCプロジェクトを実際に動かし、
HomeController → Index.cshtml の流れで画面が表示されることを確認しました。

今回はもう一歩進んで、
フォームに入力した値をC#で受け取り、画面に表示する までをやります💪

🎯 今回のゴール

ユーザーがフォームに名前を入力 → サーバー（Controller）が受け取る → Viewに戻して表示

最終的にこうなります👇

あなたの名前を入力してください：
（テキストボックス）

→ こんにちは、〇〇さん！

🧩 Step 1：InputControllerを追加

まずは入力用のコントローラを作ります。
Controllers フォルダに InputController.cs を追加します。

using Microsoft.AspNetCore.Mvc;

namespace MyFirstAspNetApp.Controllers
{
    public class InputController : Controller
    {
        // 入力フォームを表示（GET）
        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }

        // フォーム送信（POST）を受け取る
        [HttpPost]
        public IActionResult Index(string name)
        {
            ViewData["Message"] = $"こんにちは、{name}さん！";
            return View();
        }
    }
}

ポイント

• [HttpGet]：ページを開いたときに呼ばれる
• [HttpPost]：フォーム送信時に呼ばれる
• 引数 string name は、フォーム側の name="name" と一致すると自動で値が渡る（モデルバインディング）

🧾 Step 2：入力フォームを作成（Index.cshtml）

Views/Input/Index.cshtml を新規作成して、以下を記述します👇

@{
    ViewData["Title"] = "入力フォーム";
}

<h2>@ViewData["Title"]</h2>

<form asp-action="Index" method="post">
    <div>
        <label>あなたの名前を入力してください：</label><br />
        <input type="text" name="name" />
    </div>
    <button type="submit" class="btn btn-primary mt-2">送信</button>
</form>

@if (ViewData["Message"] != null)
{
    <hr />
    <p>@ViewData["Message"]</p>
}

ポイント

要素	説明
<form asp-action="Index" method="post">	InputController.Index() の POST メソッドを呼び出す
name="name"	Controllerの引数名と一致させる必要あり
@ViewData["Message"]	Controllerから渡されたメッセージを表示

▶ Step 3：実行してみる！

実行して /Input にアクセスすると、次のような画面が表示されます👇

あなたの名前を入力してください：
[　　　　　]
[送信]

名前を入力して「送信」を押すと、ページが再読み込みされてメッセージが表示されます👇

こんにちは、たろうさん！

🎉 フォーム入力 → Controller受け取り → View返却 の流れができました！

⚙️ Step 4：Razor構文をもう少し理解する

Razorでは、@{} の中にC#を書いたり、@変数名 で値を埋め込んだりできます。

@if (ViewData["Message"] != null)
{
    <p>@ViewData["Message"]</p>
}

このように条件分岐も普通のC#でOKです。
RazorはC#構文とHTMLを自然に組み合わせられるのが特徴です。

🧠 Step 5：Modelを使うともっと便利

今回のように文字列1つなら ViewData で十分ですが、
データが増えると「Model」を使う方が見通しが良くなります。

Models/InputModel.cs を作成👇

using System.ComponentModel.DataAnnotations;

namespace MyFirstAspNetApp.Models
{
    public class InputModel
    {
        [Required(ErrorMessage = "名前は必須です。")]
        [StringLength(20)]
        public string Name { get; set; } = string.Empty;
    }
}

Controllerを修正：

[HttpPost]
public IActionResult Index(InputModel model)
{
    if (!ModelState.IsValid)
    {
        return View(model);
    }

    ViewData["Message"] = $"こんにちは、{model.Name}さん！";
    return View(model);
}

Viewを更新：

@model MyFirstAspNetApp.Models.InputModel

<form asp-action="Index" method="post">
    <div>
        <label asp-for="Name"></label><br />
        <input asp-for="Name" />
        <span class="text-danger" asp-validation-for="Name"></span>
    </div>
    <button type="submit" class="btn btn-primary mt-2">送信</button>
</form>

@if (ViewData["Message"] != null)
{
    <hr />
    <p>@ViewData["Message"]</p>
}

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

メモ：[Required] や [StringLength] は DataAnnotations と呼ばれる入力検証。
クライアント側とサーバー側の両方でバリデーションが効きます。

🧩 Step 6：データの流れを図で理解する

💬 学んでみて感じたこと

• Controllerの引数名とフォームの name が一致していると自動で値が入るのが便利
• [HttpGet] と [HttpPost] を分けることで、1つのURLで表示と送信を両方処理できる
• [Required] + ModelState.IsValid の組み合わせで、フロントとサーバー両方の入力チェックが可能

MVCって、思ったよりも“自然に動く”仕組みなんだなと実感しました。

✅ まとめ

項目	内容
[HttpGet] / [HttpPost]	GETでページ表示、POSTでフォーム送信を処理
ViewData	Controller → View の簡易データ渡し
ModelBinding	フォームの値を自動でC#オブジェクトに詰める
DataAnnotations	モデルに入力ルールを定義（必須・文字数制限など）
Razor構文	HTMLにC#を埋め込むテンプレートエンジン