C# MVCでDropDownListを表示する基本と実践

ASP.NET MVCアプリケーションでフォームにドロップダウンリスト（DropDownList）を実装したいけれど、「どうやってViewに渡せばいいのか分からない」「選択項目をモデルにバインドできない」といった悩みはありませんか？この記事では、C# MVCでのDropDownListの基本的な作り方から、ViewModelを活用した実践的な実装方法までを網羅します。開発の現場ですぐに役立つ具体的なサンプルコードと共に解説していきます。

DropDownListを表示するための基本構成
ViewBagを使った簡易的なDropDownList実装
ViewModelを活用したDropDownListのバインド方法
DropDownList使用時のよくあるエラーと対策
DropDownList活用の実践例とユースケース
まとめ

DropDownListを表示するための基本構成

ASP.NET MVCでDropDownListを表示するには、主に「モデル」「コントローラー」「ビュー」という3つの要素が連携する必要があります。それぞれがどの役割を担うかを理解しておくことで、柔軟かつ正確にフォームを作成できるようになります。ここでは、基本構成のポイントを押さえながら解説していきます。

モデル：選択肢のデータを保持

✅ モデルは、選択肢データを管理する役割を担います。

たとえば、リスト形式で選択肢を持つプロパティ（List<SelectListItem>）を定義しておきます。これにより、後続のコントローラーやビューで一貫してデータを扱うことができます。

コントローラー：データの準備とViewへの受け渡し

✅ コントローラーでは、モデルにセットする選択肢データを生成し、Viewに渡す役割を果たします。

ここで用意するデータは、固定リストだけでなく、データベースや外部APIから動的に取得するケースもあります。渡し方としては、ViewBag、ViewData、もしくはViewModelのプロパティを利用します。

ビュー：HTML上でDropDownListを表示

✅ ビューでは、HtmlHelperメソッドを使ってDropDownListを描画します。

ASP.NET MVCでは、Html.DropDownListやHtml.DropDownListForを活用することで、簡単にフォームに選択肢を表示でき、ユーザーの入力をモデルにバインドできます。

ViewBagを使った簡易的なDropDownList実装

まずは、もっとも手軽にDropDownListを表示する方法として、ViewBagを使った実装を紹介します。少ないコード量で選択肢をViewに渡せるため、特に小規模なフォームや試作段階で便利に使えます。ただし、規模が大きくなると保守性に課題が出るため、用途を見極めて活用しましょう。

コントローラー側で選択肢をセット

✅ ASP.NET MVCの例

public ActionResult Create()
{
    List<SelectListItem> items = new List<SelectListItem>
    {
        new SelectListItem { Text = "選択肢1", Value = "1" },
        new SelectListItem { Text = "選択肢2", Value = "2" },
        new SelectListItem { Text = "選択肢3", Value = "3" }
    };

    ViewBag.Options = items;
    return View();
}

ポイント

SelectListItemクラスを使って、表示テキスト（Text）と実際の値（Value）をペアで設定します。
ViewBagは動的型なので、自由にプロパティを追加できます。

ビュー側でDropDownListを表示

✅ ASP.NET MVCの例

@Html.DropDownList("SelectedOption", ViewBag.Options as List<SelectListItem>, "選択してください")

ポイント

第1引数はname属性に対応し、フォーム送信時にこの名前で値が渡されます。
第2引数に選択肢リストを指定し、第3引数でプレースホルダ（初期表示テキスト）を設定できます。

ViewModelを活用したDropDownListのバインド方法

より保守性や再利用性を高めたい場合は、ViewModelを使ったDropDownListの実装が推奨されます。ViewModelを活用することで、型安全なデータ受け渡しが可能になり、大規模なプロジェクトでも安心して運用できます。ここではその基本的な作り方を見ていきましょう。

ViewModelに選択肢と選択された値を保持

✅ ASP.NET MVCの例

// ViewModel
public class SampleViewModel
{
    public string SelectedOption { get; set; }
    public List<SelectListItem> Options { get; set; }
}

ポイント

SelectedOptionプロパティでユーザーの選択した値を受け取ります。
OptionsプロパティにDropDownListの選択肢をセットします。

コントローラーでViewModelを生成

✅ ASP.NET MVCの例

// Controller
public ActionResult Create()
{
    var vm = new SampleViewModel
    {
        Options = new List<SelectListItem>
        {
            new SelectListItem { Text = "A", Value = "A" },
            new SelectListItem { Text = "B", Value = "B" }
        }
    };

    return View(vm);
}

ポイント

コントローラー側でViewModelを生成し、必要なデータをまとめて渡します。
こうすることで、ビューとのデータ連携が明確になります。

ビューでDropDownListをバインド

✅ ASP.NET MVCの例

@model SampleViewModel

@Html.DropDownListFor(m => m.SelectedOption, Model.Options, "選択してください")

ポイント

DropDownListForを使うことで、モデルのプロパティと正しくバインドできます。
型チェックも効くため、開発中のエラーも事前に防げます。

DropDownList使用時のよくあるエラーと対策

DropDownListを実装する際には、いくつかの典型的なエラーに遭遇することがあります。特に初心者の方は、データの渡し忘れやバインドミスで悩むことが多いです。ここでは、代表的なエラーとその対策方法を具体的に解説します。

NullReferenceException

✅ 発生ケース

コントローラーから選択肢リスト（ViewBagやViewModelのプロパティ）が渡されていない場合に発生します。
また、選択肢リストがnullのままビューでDropDownListを描画しようとすると起きます。

✅ 対策

コントローラー内で、必ずリストを初期化してからビューに渡しましょう。
万一に備えて、ビュー側でリストが存在するかチェックする方法も有効です。

例：リストを確実に渡す

if (items == null)
{
    items = new List<SelectListItem>();
}
ViewBag.Options = items;

値がバインドされない

✅ 発生ケース

Html.DropDownList使用時に、name属性とモデルプロパティ名が一致していない場合。
また、ViewModelとViewで使用する型やプロパティ名がずれている場合にも発生します。

✅ 対策

DropDownListForを使用することで、強力な型安全と自動バインドを実現できます。
また、プロパティ名のスペルミスにも注意しましょう。

例：正しいバインド方法

@Html.DropDownListFor(m => m.SelectedOption, Model.Options, "選択してください")

DropDownList活用の実践例とユースケース

DropDownListは単なるフォーム部品にとどまらず、実務ではさまざまな場面で応用されています。ここでは、データベース連携やAjaxを活用した動的更新といった、より実践的な活用方法を紹介します。これらを理解しておくことで、より柔軟でユーザーに優しい画面を作れるようになります。

外部データベースとの連携

✅ 実務でよくあるパターンは、データベースから選択肢データを取得してDropDownListにバインドする方法です。たとえば、商品カテゴリやユーザーリストなどをリアルタイムで取得する場合に活用します。

ASP.NET MVCの例

var categories = dbContext.Categories
    .Select(c => new SelectListItem
    {
        Value = c.Id.ToString(),
        Text = c.Name
    }).ToList();
ViewBag.CategoryOptions = categories;

ポイント

Entity FrameworkなどのORMを使えば、簡単にリスト化できます。
選択肢がDB由来のため、追加・変更にも柔軟に対応可能です。

Ajaxで動的に選択肢を変更

✅ 地域選択→市区町村選択のように、あるDropDownListの選択に応じて、別のDropDownListの内容を動的に変えるパターンも実務では非常に多いです。これにはJavaScriptやjQuery、または最近ではReactなどを併用します。

簡単なイメージ

$("#region").change(function() {
    var regionId = $(this).val();
    $.ajax({
        url: '/Address/GetCities',
        type: 'GET',
        data: { regionId: regionId },
        success: function(data) {
            $("#city").empty();
            $.each(data, function(index, city) {
                $("#city").append($('<option>').val(city.Value).text(city.Text));
            });
        }
    });
});

ポイント

サーバー側でリクエストに応じたデータを返すAPIを用意する必要があります。
ユーザー体験（UX）が大きく向上するため、積極的に取り入れたい技術です。

まとめ

ASP.NET MVCでDropDownListを作成するためには、選択肢データを用意して、コントローラーとビュー間で正しく受け渡すことが基本です。シンプルな用途ではViewBagを使った実装で素早く対応でき、保守性を重視する場合はViewModelを使った型安全な実装が効果的です。

また、よくあるエラー（NullReferenceExceptionやバインドミス）も、ポイントを押さえれば簡単に防ぐことができます。さらに、データベースと連携したり、Ajaxを使って動的にDropDownListを更新したりすることで、実践的なフォーム開発にも対応できるようになります。

✅ ポイントまとめ