はじめに

Web アプリケーションは「見せるだけ」ではなく、ユーザーからのデータを受け取ることが必須です。ASP.NET Core では、Razor Pages と組み合わせることで、C# のモデルと HTML フォームをシームレスに連携させる仕組みが用意されています。その中核となるのが Tag Helpers です。

Tag Helpers とは

Tag Helpers は、サーバー側で HTML を生成する際に、属性や独自タグを通じて Razor テンプレートを拡張する機能です。従来の HTML Helper に比べ、HTML に近い自然な記法で記述できるため、エディタの補完や構文チェックが効きやすくなっています。

注意：Tag Helpers はサーバー側レンダリング専用です。Angular や React などのクライアントフレームワークでは使用できません。

フォームを組み立てる基本パターン

以下は、通貨換算フォームの最小構成です。

public class ExchangeVm
{
    [Required, Display(Name = "換算元通貨")]
    public string FromCurrency { get; set; }

    [Required, Range(0.01, double.MaxValue)]
    public decimal Amount { get; set; }

    [Required, Display(Name = "換算先通貨")]
    public string ToCurrency { get; set; }
}

@page
@model IndexModel
<form method="post">
    <div class="mb-3">
        <label asp-for="Input.FromCurrency" class="form-label"></label>
        <select asp-for="Input.FromCurrency" asp-items="Model.CurrencyOptions" class="form-select"></select>
        <span asp-validation-for="Input.FromCurrency" class="text-danger"></span>
    </div>

    <div class="mb-3">
        <label asp-for="Input.Amount" class="form-label"></label>
        <input asp-for="Input.Amount" class="form-control" />
        <span asp-validation-for="Input.Amount" class="text-danger"></span>
    </div>

    <div class="mb-3">
        <label asp-for="Input.ToCurrency" class="form-label"></label>
        <select asp-for="Input.ToCurrency" asp-items="Model.CurrencyOptions" class="form-select"></select>
        <span asp-validation-for="Input.ToCurrency" class="text-danger"></span>
    </div>

    <button type="submit" class="btn btn-primary">換算</button>
</form>

各 Tag Helper の詳細

FormTagHelper

• asp-page：POST 先 Razor ページをルートベースで指定
• asp-page-handler：特定ハンドラー メソッドを呼び出す
• asp-route-*：任意ルートパラメータを追加
• asp-antiforgery="false"：CSRF トークンを無効化（開発時のみ）

LabelTagHelper

asp-for 属性により、対応するプロパティ名または [Display] 属性値が for 属性とテキストに自動設定されます。

InputTagHelper & TextAreaTagHelper

独自フォーマットを適用する場合は asp-format="{0:0.00}" を使用します。

SelectTagHelper

public class IndexModel : PageModel
{
    [BindProperty]
    public ExchangeVm Input { get; set; }

    public IEnumerable<SelectListItem> CurrencyOptions { get; } =
        Enum.GetValues<CurrencyCode>()
            .Select(c => new SelectListItem
            {
                Value = c.ToString(),
                Text = c.GetDisplayName()
            });
}

<select asp-for="Input.FromCurrency" asp-items="Model.CurrencyOptions">
    <option value="">-- 選択してください --</option>
</select>

ValidationTagHelper

• asp-validation-for：個別プロパティのエラーメッセージを表示
• asp-validation-summary：モデル全体のエラー一覧を表示（All / ModelOnly）

<div asp-validation-summary="ModelOnly" class="alert alert-danger"></div>

リンク生成を簡潔に：AnchorTagHelper

<a asp-page="/History" asp-route-id="@Model.TxId">履歴へ</a>

キャッシュ バスティング：AppendVersionTagHelper

<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<script src="~/js/site.js" asp-append-version="true"></script>

環境ごとの条件レンダリング：EnvironmentTagHelper

<environment include="Development">
    <link rel="stylesheet" href="~/css/dev.css" />
</environment>

<environment exclude="Production">
    <div class="alert alert-warning">テスト環境です</div>
</environment>

まとめ

Tag Helpers を活用することで、冗長な HTML の手書きを削減し、モデルとの整合性を保ちながら保守しやすいフォームを構築できます。次のステップとして、カスタム Tag Helper を作成し、プロジェクト固有の部品を再利用可能なコンポーネント化することを検討してください。