記事詳細

投稿日
2026年08月04日12時41分
タイトル

ASP.NET Core MVC: 入力フォームに於いて、ドロップダウン<select>とユーザー入力<input>両機能を併用する方法はありますか？

内容

はい、ASP.NET Core MVC で ドロップダウン <select> と 自由入力 <input> を併用する方法はあります。
一般的には以下のようなパターンで実装します。

1. 基本的な考え方

  • ドロップダウン：既存の選択肢から選べるようにする（<select> + asp-items）。
  • 自由入力：選択肢にない場合にユーザーが直接入力できるようにする（<input type="text">）。
  • サーバー側では、どちらが入力されたかを判定して保存します。

2. 実装例

モデル

Csharp
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.Rendering;

public class MyFormViewModel
{
    public string SelectedOption { get; set; } // ドロップダウン選択値
    public string CustomInput { get; set; }    // 自由入力値
    public List<SelectListItem> Options { get; set; } // 選択肢リスト
}

コントローラ

Csharp
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.Collections.Generic;

public class MyFormController : Controller
{
    [HttpGet]
    public IActionResult Index()
    {
        var model = new MyFormViewModel
        {
            Options = new List<SelectListItem>
            {
                new SelectListItem { Value = "A", Text = "選択肢A" },
                new SelectListItem { Value = "B", Text = "選択肢B" },
                new SelectListItem { Value = "C", Text = "選択肢C" }
            }
        };
        return View(model);
    }

    [HttpPost]
    public IActionResult Index(MyFormViewModel model)
    {
        string finalValue = !string.IsNullOrWhiteSpace(model.CustomInput)
            ? model.CustomInput
            : model.SelectedOption;

        // ここで finalValue をDB保存や処理に利用
        ViewBag.Message = $"入力された値: {finalValue}";

        // 再表示用に選択肢を再設定
        model.Options = new List<SelectListItem>
        {
            new SelectListItem { Value = "A", Text = "選択肢A" },
            new SelectListItem { Value = "B", Text = "選択肢B" },
            new SelectListItem { Value = "C", Text = "選択肢C" }
        };

        return View(model);
    }
}

ビュー (Index.cshtml)

Razor
@model MyFormViewModel

<form asp-action="Index" method="post">
    <div>
        <label>ドロップダウンから選択:</label>
        <select asp-for="SelectedOption" asp-items="Model.Options" class="form-control">
            <option value="">-- 選択してください --</option>
        </select>
    </div>

    <div style="margin-top:10px;">
        <label>または自由入力:</label>
        <input asp-for="CustomInput" class="form-control" placeholder="自由入力" />
    </div>

    <button type="submit" class="btn btn-primary" style="margin-top:10px;">送信</button>
</form>

@if (ViewBag.Message != null)
{
    <div class="alert alert-info" style="margin-top:10px;">
        @ViewBag.Message
    </div>
}

3. 動作仕様

  • ユーザーが ドロップダウンを選択 → SelectedOption に値が入る。
  • ユーザーが 自由入力を入力 → CustomInput に値が入る。
  • サーバー側で CustomInput が空でなければそれを優先、空なら SelectedOption を使用。

4. 応用

  • JavaScript を使って「自由入力が入力されたらドロップダウンを無効化」や「ドロップダウン選択時に自由入力をクリア」などの UX 改善も可能。
  • 選択肢に「その他」を追加し、それが選ばれたら <input> を表示する方法もよく使われます。

もし希望があれば、次のステップとして 「その他」選択時だけ <input> を表示する動的表示版 のコードも作れますが、
このままでも 選択と入力の併用フォームとして動作します。

この後、JavaScript を使って 「その他」選択時だけ入力欄を表示するバージョン を作成しましょうか？
そうすると UX がさらに良くなります。

Powered by Froala Editor
添付画像
画像はありません
Genreのカテゴリ-名
Views
編集 | 記事一覧