C#ドロップダウンリストの作り方｜ComboBox・ASP.NETでの表示、値取得、データバインドまで初心者向けに解説
はじめに
C#で画面に選択肢を表示したいときによく使うのが、ドロップダウンリストです。ユーザーに都道府県、カテゴリ、部署、商品、ステータスなどを選んでもらう場面では、文字入力よりもドロップダウンリストを使う方が入力ミスを防ぎやすく、操作もしやすくなります。
C#でドロップダウンリストを作る方法は、開発するアプリケーションの種類によって変わります。Windows Formsでは主にComboBox、ASP.NET Web FormsではDropDownList、ASP.NET MVCやRazorではselectタグやHtml.DropDownListForを使います。
この記事では、C#初心者向けに、ComboBoxの基本的な表示方法、選択された値の取得方法、データバインドのやり方、ASP.NETでのDropDownListの作成方法まで順番に解説します。WindowsアプリとWebアプリの両方で使える考え方を整理しながら、実務でもよく使うコード例を紹介します。
1. C#のドロップダウンリストとは
C#のドロップダウンリストとは、あらかじめ用意した選択肢の中からユーザーに1つの値を選んでもらうための画面部品です。たとえば「男性・女性・未回答」「有効・無効」「北海道・東京都・大阪府」のような候補を表示し、ユーザーがクリックして選択できるようにします。
C#そのものに「ドロップダウンリスト」という1つの固定クラスがあるわけではありません。Windows Forms、WPF、ASP.NETなど、利用するフレームワークによって使うコントロール名や実装方法が異なります。
代表的なものは次のとおりです。
Windows Forms：ComboBox
WPF：ComboBox
ASP.NET Web Forms：DropDownList
ASP.NET MVC / Razor：selectタグ、Html.DropDownListFor、SelectList
どれも「一覧から選択する」という目的は同じですが、値の追加方法、選択値の取得方法、データバインドの書き方が少しずつ異なります。
1-1. ドロップダウンリストでできること
ドロップダウンリストを使うと、ユーザーが入力する値を限定できます。自由入力のテキストボックスでは、表記ゆれや入力ミスが起こりやすくなりますが、ドロップダウンリストなら用意された候補から選ぶだけなので、データの整合性を保ちやすくなります。
たとえば、次のような場面でよく使われます。
会員登録画面で都道府県を選択する
商品管理画面でカテゴリを選択する
社員情報画面で部署を選択する
検索画面で並び順やステータスを選択する
管理画面で有効・無効を切り替える
C#の画面開発では、単純な文字列の選択だけでなく、画面上には「東京都」と表示し、内部的には「13」というIDを保持するような使い方もよくあります。このような場合は、表示用の値と保存用の値を分けて扱います。
1-2. ComboBox・DropDownList・selectタグの違い
C#でドロップダウンリストを調べると、ComboBox、DropDownList、selectタグなど複数の名前が出てきます。これらは使う場所が違います。
ComboBoxは、主にWindows FormsやWPFなどのデスクトップアプリで使われます。フォーム上に配置し、ItemsプロパティやDataSourceプロパティを使って選択肢を設定します。
DropDownListは、ASP.NET Web Formsで使われるサーバーコントロールです。aspxファイルに配置し、コードビハインドで項目を追加したり、データベースの値をバインドしたりします。
selectタグは、HTMLでドロップダウンリストを表現するためのタグです。ASP.NET MVCやRazor Pagesでは、最終的にHTMLのselectタグとして画面に出力されます。C#側ではSelectListやViewModelを使って選択肢を渡すことが多いです。
つまり、見た目はどれもドロップダウンリストですが、実装するアプリケーションの種類によって使う部品が異なります。
1-3. Windows Forms・WPF・ASP.NETでの使い分け
Windows Formsで画面を作る場合は、ComboBoxを使います。Visual Studioのデザイナーからフォームに配置でき、初心者でも扱いやすいのが特徴です。
WPFでもComboBoxを使いますが、XAMLで画面を定義する点がWindows Formsとは異なります。データバインディングを前提に設計することが多く、MVVMパターンと組み合わせることもあります。
ASP.NET Web FormsではDropDownListを使います。サーバー側で項目を作成し、ポストバックによって選択値を処理します。
ASP.NET MVCやRazorでは、HTMLのselectタグを直接書く方法と、Html.DropDownListForのようなヘルパーを使う方法があります。フォーム送信時には、選択された値がControllerやPageModelに渡されます。
初心者が最初に学ぶなら、まずはWindows FormsのComboBoxで「表示する」「選択値を取得する」「データバインドする」という流れを理解するとよいでしょう。その後、WebアプリではDropDownListやselectタグに置き換えて考えると理解しやすくなります。
1-4. 初心者が最初に覚える基本用語
C#のドロップダウンリストを扱うときは、次の用語を覚えておくとコードが読みやすくなります。
Itemは、ドロップダウンリストに表示される1つ1つの選択肢です。たとえば「東京」「大阪」「福岡」がItemsに登録されている状態です。
SelectedItemは、現在選択されている項目そのものを表します。文字列を直接追加している場合は、SelectedItemから選択された文字列を取得できます。
SelectedValueは、選択された項目に紐づく値を取得するときに使います。データバインドを使って、表示名とは別にIDなどを持たせる場合によく使います。
SelectedIndexは、選択された位置を0から始まる番号で表します。最初の項目なら0、2番目なら1です。何も選択されていない場合は-1になります。
DisplayMemberは、画面に表示する列やプロパティ名を指定するために使います。
ValueMemberは、内部的な値として扱う列やプロパティ名を指定するために使います。
DataSourceは、ComboBoxやDropDownListに表示するデータの元になるリストやテーブルを指定するプロパティです。
2. Windows FormsでComboBoxを表示する基本
Windows FormsでC#のドロップダウンリストを作る場合、ComboBoxコントロールを使います。ComboBoxはVisual Studioのデザイナーから簡単に配置でき、コードから項目を追加することもできます。
まずは、データベースを使わずに、固定の選択肢を表示する基本から見ていきましょう。
2-1. ComboBoxをフォームに配置する方法
Visual StudioでWindows Formsアプリを作成したら、ツールボックスからComboBoxを選び、フォーム上にドラッグ＆ドロップします。
配置したComboBoxの名前は、プロパティウィンドウで変更できます。たとえば、都道府県を選択するComboBoxなら、次のような名前にすると分かりやすくなります。
C#comboBoxPrefecture
コントロール名は後からコードで使うため、「comboBox1」のままにするよりも、用途が分かる名前に変更しておくのがおすすめです。
コードでComboBoxを作成する場合は、次のように記述できます。
C#ComboBox comboBoxPrefecture = new ComboBox();
comboBoxPrefecture.Location = new Point(20, 20);
comboBoxPrefecture.Width = 200;
this.Controls.Add(comboBoxPrefecture);
通常はデザイナーで配置することが多いですが、動的に画面部品を作る場合はコードから追加することもあります。
2-2. Items.Addで選択肢を追加する方法
ComboBoxに選択肢を追加する最も簡単な方法は、Items.Addを使う方法です。
C#private void Form1_Load(object sender, EventArgs e)
{
comboBoxPrefecture.Items.Add("北海道");
comboBoxPrefecture.Items.Add("東京都");
comboBoxPrefecture.Items.Add("大阪府");
comboBoxPrefecture.Items.Add("福岡県");
}
このコードをフォームのLoadイベントに書くと、画面が表示されるタイミングでComboBoxに項目が追加されます。
複数の項目をまとめて追加したい場合は、Items.AddRangeを使うと便利です。
C#private void Form1_Load(object sender, EventArgs e)
{
comboBoxPrefecture.Items.AddRange(new string[]
{
"北海道",
"東京都",
"大阪府",
"福岡県"
});
}
固定の選択肢を表示するだけなら、Items.AddやItems.AddRangeで十分です。
2-3. 初期値を設定して表示する方法
ComboBoxで最初から特定の項目を選択状態にしたい場合は、SelectedIndexやSelectedItemを使います。
最初の項目を選択する場合は、SelectedIndexに0を設定します。
C#private void Form1_Load(object sender, EventArgs e)
{
comboBoxPrefecture.Items.AddRange(new string[]
{
"北海道",
"東京都",
"大阪府",
"福岡県"
});
comboBoxPrefecture.SelectedIndex = 0;
}
この場合、画面表示時には「北海道」が選択された状態になります。
項目名を指定して初期選択したい場合は、SelectedItemを使います。
C#comboBoxPrefecture.SelectedItem = "東京都";
ただし、SelectedItemに指定する文字列は、Itemsに存在している必要があります。存在しない値を指定しても選択されません。
何も選択されていない状態にしたい場合は、SelectedIndexに-1を設定します。
C#comboBoxPrefecture.SelectedIndex = -1;
「選択してください」という項目を先頭に追加する方法もよく使われます。
C#comboBoxPrefecture.Items.Add("選択してください");
comboBoxPrefecture.Items.Add("北海道");
comboBoxPrefecture.Items.Add("東京都");
comboBoxPrefecture.Items.Add("大阪府");
comboBoxPrefecture.SelectedIndex = 0;
この場合、先頭の「選択してください」は実際のデータではなく、未選択を表す案内として使います。
2-4. ドロップダウンの表示形式を変更する方法
ComboBoxには、入力を許可するかどうかを制御するDropDownStyleプロパティがあります。
代表的な設定は次の3つです。
C#comboBoxPrefecture.DropDownStyle = ComboBoxStyle.DropDown;
DropDownは、リストから選択できるだけでなく、ユーザーが文字を直接入力することもできます。
C#comboBoxPrefecture.DropDownStyle = ComboBoxStyle.DropDownList;
DropDownListは、リストからの選択のみを許可します。ユーザーに自由入力させたくない場合は、この設定を使います。
C#comboBoxPrefecture.DropDownStyle = ComboBoxStyle.Simple;
Simpleは、リストが常に表示される形式です。一般的なドロップダウンリストとして使う場合は、あまり多く使われません。
入力ミスを防ぎたい場合は、次のようにDropDownListを設定するのがおすすめです。
C#private void Form1_Load(object sender, EventArgs e)
{
comboBoxPrefecture.DropDownStyle = ComboBoxStyle.DropDownList;
comboBoxPrefecture.Items.AddRange(new string[]
{
"選択してください",
"北海道",
"東京都",
"大阪府"
});
comboBoxPrefecture.SelectedIndex = 0;
}
C#でドロップダウンリストを作る場合、ユーザーに自由入力を許可する必要がなければ、ComboBoxStyle.DropDownListを使うと安全です。
3. ComboBoxで選択された値を取得する方法
ComboBoxを表示できたら、次に必要になるのが選択された値の取得です。C#のComboBoxでは、SelectedItem、SelectedValue、SelectedIndex、Textなどを使って選択状態を取得できます。
どのプロパティを使うべきかは、ComboBoxにどのようなデータを入れているかによって変わります。
3-1. SelectedItemで選択項目を取得する
Items.Addで文字列を追加している場合は、SelectedItemを使うのが分かりやすいです。
C#private void button1_Click(object sender, EventArgs e)
{
if (comboBoxPrefecture.SelectedItem != null)
{
string selectedText = comboBoxPrefecture.SelectedItem.ToString();
MessageBox.Show(selectedText);
}
else
{
MessageBox.Show("項目が選択されていません。");
}
}
SelectedItemは、現在選択されている項目そのものを返します。文字列を追加している場合は、ToStringで表示文字列を取得できます。
未選択の可能性がある場合は、必ずnullチェックを行いましょう。SelectedItemがnullの状態でToStringを呼び出すと、NullReferenceExceptionが発生します。
C#if (comboBoxPrefecture.SelectedItem == null)
{
MessageBox.Show("選択してください。");
return;
}
string selectedText = comboBoxPrefecture.SelectedItem.ToString();
初心者のうちは、SelectedItemを使う場面とSelectedValueを使う場面を混同しやすいです。Items.Addで文字列を直接追加しているだけなら、まずはSelectedItemを使えば問題ありません。
3-2. SelectedValueで値を取得する
SelectedValueは、データバインドを使って表示名と値を分けている場合に使います。
たとえば、画面にはカテゴリ名を表示し、内部的にはカテゴリIDを取得したい場合です。
C#public class Category
{
public int Id { get; set; }
public string Name { get; set; }
}
C#private void Form1_Load(object sender, EventArgs e)
{
var categories = new List<Category>
{
new Category { Id = 1, Name = "食品" },
new Category { Id = 2, Name = "家電" },
new Category { Id = 3, Name = "書籍" }
};
comboBoxCategory.DataSource = categories;
comboBoxCategory.DisplayMember = "Name";
comboBoxCategory.ValueMember = "Id";
}
この状態でSelectedValueを取得すると、選択されたカテゴリのIDを取得できます。
C#private void button1_Click(object sender, EventArgs e)
{
int categoryId = (int)comboBoxCategory.SelectedValue;
MessageBox.Show($"選択されたID: {categoryId}");
}
SelectedValueは、ValueMemberに指定したプロパティや列の値を返します。実務では、画面に表示する名称ではなく、データベースに保存するIDを取得したい場面が多いため、SelectedValueは非常によく使います。
3-3. SelectedIndexで選択位置を取得する
SelectedIndexは、選択された項目の位置を取得します。番号は0から始まります。
C#private void button1_Click(object sender, EventArgs e)
{
int index = comboBoxPrefecture.SelectedIndex;
MessageBox.Show($"選択位置: {index}");
}
たとえば、ComboBoxに次の項目が入っているとします。
C#comboBoxPrefecture.Items.Add("北海道");
comboBoxPrefecture.Items.Add("東京都");
comboBoxPrefecture.Items.Add("大阪府");
この場合、「北海道」は0、「東京都」は1、「大阪府」は2です。
何も選択されていない場合、SelectedIndexは-1になります。
C#if (comboBoxPrefecture.SelectedIndex == -1)
{
MessageBox.Show("項目を選択してください。");
return;
}
SelectedIndexは、選択位置を判定したい場合に便利です。ただし、項目の並び順が変わると意味も変わるため、IDを扱いたい場合はSelectedValueを使う方が安全です。
3-4. Textプロパティで表示文字列を取得する
Textプロパティを使うと、ComboBoxに表示されている文字列を取得できます。
C#private void button1_Click(object sender, EventArgs e)
{
string text = comboBoxPrefecture.Text;
MessageBox.Show(text);
}
DropDownStyleがDropDownの場合、ユーザーがリストにない文字を直接入力できるため、Textにはその入力文字列が入ることがあります。
一方、DropDownStyleがDropDownListの場合は、基本的に選択された項目の表示文字列がTextに入ります。
C#comboBoxPrefecture.DropDownStyle = ComboBoxStyle.DropDownList;
表示されている文字列を取得したいだけならTextでも取得できますが、データバインドでIDを取得したい場合はSelectedValueを使いましょう。
3-5. SelectionChangeCommittedイベントの使い方
ComboBoxの選択がユーザー操作によって変更されたタイミングで処理を実行したい場合は、SelectionChangeCommittedイベントを使います。
C#private void comboBoxPrefecture_SelectionChangeCommitted(object sender, EventArgs e)
{
string selectedText = comboBoxPrefecture.Text;
MessageBox.Show($"選択されました: {selectedText}");
}
Visual StudioのデザイナーでComboBoxを選択し、イベント一覧からSelectionChangeCommittedをダブルクリックすると、イベントハンドラーを自動生成できます。
SelectedIndexChangedイベントも似ていますが、コードからSelectedIndexを変更した場合にも発生します。一方、SelectionChangeCommittedは、ユーザーが実際に選択を確定したときに発生します。
たとえば、画面初期化時のSelectedIndex設定では処理を動かしたくない場合、SelectionChangeCommittedを使うと意図しない処理を減らせます。
C#private void comboBoxCategory_SelectionChangeCommitted(object sender, EventArgs e)
{
if (comboBoxCategory.SelectedValue != null)
{
int categoryId = (int)comboBoxCategory.SelectedValue;
LoadProducts(categoryId);
}
}
このように、カテゴリを選択したら商品一覧を再読み込みする、といった処理によく使われます。
4. ComboBoxにデータバインドする方法
C#のドロップダウンリストでは、固定文字列をItems.Addで追加するだけでなく、ListやDataTableなどのデータをComboBoxにバインドして表示できます。
データバインドを使うと、画面には名称を表示し、内部ではIDを取得する実装がしやすくなります。データベースのマスタデータを表示する場合も、基本的にはデータバインドを使います。
4-1. Listを使ってデータを表示する
まずは、Listを使ってComboBoxにデータを表示する例です。
次のようなクラスを用意します。
C#public class Department
{
public int DepartmentId { get; set; }
public string DepartmentName { get; set; }
}
フォームのLoadイベントでListを作成し、ComboBoxに設定します。
C#private void Form1_Load(object sender, EventArgs e)
{
var departments = new List<Department>
{
new Department { DepartmentId = 1, DepartmentName = "営業部" },
new Department { DepartmentId = 2, DepartmentName = "開発部" },
new Department { DepartmentId = 3, DepartmentName = "総務部" }
};
comboBoxDepartment.DataSource = departments;
comboBoxDepartment.DisplayMember = "DepartmentName";
comboBoxDepartment.ValueMember = "DepartmentId";
}
このコードでは、ComboBoxの画面上にはDepartmentNameが表示されます。一方、SelectedValueで取得できる値はDepartmentIdになります。
C#private void button1_Click(object sender, EventArgs e)
{
int departmentId = (int)comboBoxDepartment.SelectedValue;
string departmentName = comboBoxDepartment.Text;
MessageBox.Show($"ID: {departmentId}, 部署名: {departmentName}");
}
Listを使ったデータバインドは、C#のクラスと組み合わせて扱いやすいため、初心者にもおすすめです。
4-2. DataTableを使ってデータを表示する
データベースから取得したデータを扱う場合、DataTableをComboBoxにバインドすることもあります。
C#private void Form1_Load(object sender, EventArgs e)
{
DataTable table = new DataTable();
table.Columns.Add("Id", typeof(int));
table.Columns.Add("Name", typeof(string));
table.Rows.Add(1, "食品");
table.Rows.Add(2, "家電");
table.Rows.Add(3, "書籍");
comboBoxCategory.DataSource = table;
comboBoxCategory.DisplayMember = "Name";
comboBoxCategory.ValueMember = "Id";
}
この場合、ComboBoxにはName列の値が表示され、SelectedValueではId列の値を取得できます。
C#private void button1_Click(object sender, EventArgs e)
{
int categoryId = Convert.ToInt32(comboBoxCategory.SelectedValue);
MessageBox.Show($"カテゴリID: {categoryId}");
}
DataTableを使う場合、SelectedValueの型がobjectになるため、必要に応じてConvert.ToInt32などで変換します。
4-3. DisplayMemberとValueMemberの設定方法
DisplayMemberは、画面に表示するプロパティ名または列名を指定します。ValueMemberは、内部的な値として使うプロパティ名または列名を指定します。
Listをバインドする場合は、クラスのプロパティ名を指定します。
C#comboBoxDepartment.DisplayMember = "DepartmentName";
comboBoxDepartment.ValueMember = "DepartmentId";
DataTableをバインドする場合は、列名を指定します。
C#comboBoxCategory.DisplayMember = "Name";
comboBoxCategory.ValueMember = "Id";
DisplayMemberとValueMemberを設定しないままDataSourceだけを設定すると、画面に期待した文字列が表示されないことがあります。たとえば、クラス名がそのまま表示される場合があります。
C#comboBoxDepartment.DataSource = departments;
このようにDataSourceだけを設定すると、ComboBoxに「Namespace.Department」のような文字列が表示されることがあります。表示する項目を明確にするため、DisplayMemberとValueMemberはセットで指定するのが基本です。
また、一般的には次の順番で設定します。
C#comboBoxDepartment.DisplayMember = "DepartmentName";
comboBoxDepartment.ValueMember = "DepartmentId";
comboBoxDepartment.DataSource = departments;
または、DataSourceを設定した後にDisplayMemberとValueMemberを設定しても動作することはありますが、意図しない表示を避けるため、表示名と値の指定を明確にしておきましょう。
4-4. SelectedValueでIDを取得する実装例
データバインドしたComboBoxでは、SelectedValueを使ってIDを取得するのが実務でよく使われる実装です。
次の例では、部署一覧をComboBoxに表示し、選択された部署IDを取得します。
C#public class Department
{
public int Id { get; set; }
public string Name { get; set; }
}
C#private void Form1_Load(object sender, EventArgs e)
{
var departments = new List<Department>
{
new Department { Id = 0, Name = "選択してください" },
new Department { Id = 1, Name = "営業部" },
new Department { Id = 2, Name = "開発部" },
new Department { Id = 3, Name = "総務部" }
};
comboBoxDepartment.DropDownStyle = ComboBoxStyle.DropDownList;
comboBoxDepartment.DisplayMember = "Name";
comboBoxDepartment.ValueMember = "Id";
comboBoxDepartment.DataSource = departments;
}
登録ボタンを押したときに、選択値をチェックします。
C#private void buttonRegister_Click(object sender, EventArgs e)
{
int departmentId = Convert.ToInt32(comboBoxDepartment.SelectedValue);
if (departmentId == 0)
{
MessageBox.Show("部署を選択してください。");
return;
}
MessageBox.Show($"選択された部署ID: {departmentId}");
}
このように、先頭に「選択してください」を追加し、その値を0にしておくと、未選択チェックが簡単になります。
4-5. データベースから取得した値を表示する流れ
実務では、ComboBoxに表示する選択肢をデータベースから取得することがよくあります。基本的な流れは次のとおりです。
まず、データベースからIDと名称を取得します。次に、取得結果をDataTableやListに変換します。そして、ComboBoxのDataSourceに設定し、DisplayMemberとValueMemberを指定します。
SQL Serverからカテゴリ一覧を取得する簡単な例は次のとおりです。
C#private void LoadCategories()
{
string connectionString = "Data Source=.;Initial Catalog=SampleDb;Integrated Security=True";
using (SqlConnection connection = new SqlConnection(connectionString))
{
string sql = "SELECT CategoryId, CategoryName FROM Categories ORDER BY CategoryId";
SqlDataAdapter adapter = new SqlDataAdapter(sql, connection);
DataTable table = new DataTable();
adapter.Fill(table);
comboBoxCategory.DisplayMember = "CategoryName";
comboBoxCategory.ValueMember = "CategoryId";
comboBoxCategory.DataSource = table;
}
}
フォームのLoadイベントでこのメソッドを呼び出します。
C#private void Form1_Load(object sender, EventArgs e)
{
LoadCategories();
}
選択されたカテゴリIDを取得する場合は、次のように書きます。
C#private void buttonSearch_Click(object sender, EventArgs e)
{
int categoryId = Convert.ToInt32(comboBoxCategory.SelectedValue);
MessageBox.Show($"選択されたカテゴリID: {categoryId}");
}
データベースから取得した値をComboBoxに表示する場合でも、基本は同じです。DataSource、DisplayMember、ValueMember、SelectedValueの関係を理解しておけば、さまざまな画面で応用できます。
5. ASP.NETでドロップダウンリストを作成する方法
ASP.NET Web FormsでC#のドロップダウンリストを作る場合は、DropDownListコントロールを使います。Windows FormsのComboBoxと似ていますが、Web Formsではaspxファイルにコントロールを配置し、コードビハインドで項目を操作します。
ASP.NETでは、ページの再読み込みやポストバックの仕組みが関係するため、Windows Formsとは違った注意点があります。
5-1. ASP.NET Web FormsのDropDownListとは
DropDownListは、ASP.NET Web Formsで使用するサーバーコントロールです。HTMLとしてはselectタグに変換されてブラウザに表示されますが、C#側ではDropDownListコントロールとして扱えます。
たとえば、aspxに次のように書くと、ブラウザ上にはドロップダウンリストが表示されます。
aspx<asp:DropDownList ID="DropDownListCategory" runat="server">
</asp:DropDownList>
runat="server"を指定することで、コードビハインドからこのDropDownListを操作できます。
DropDownListでは、Items.Addで項目を追加したり、DataSourceを使ってデータバインドしたりできます。選択された値はSelectedValue、表示文字列はSelectedItem.Textで取得します。
5-2. aspxでDropDownListを配置する方法
aspxファイルにDropDownListを配置する基本形は次のとおりです。
aspx<asp:DropDownList ID="DropDownListPrefecture" runat="server">
<asp:ListItem Text="選択してください" Value=""></asp:ListItem>
<asp:ListItem Text="北海道" Value="1"></asp:ListItem>
<asp:ListItem Text="東京都" Value="13"></asp:ListItem>
<asp:ListItem Text="大阪府" Value="27"></asp:ListItem>
</asp:DropDownList>
この例では、Textが画面に表示される文字列、Valueが内部的に取得する値です。
ボタンを配置して、選択値を取得することもできます。
aspx<asp:Button ID="ButtonSubmit" runat="server" Text="送信" OnClick="ButtonSubmit_Click" />
<asp:Label ID="LabelResult" runat="server" Text=""></asp:Label>
DropDownListをaspxに直接書く方法は、選択肢が固定の場合に向いています。都道府県や性別など、頻繁に変更されない項目であれば、この方法でも実装できます。
5-3. コードビハインドで項目を追加する方法
コードビハインドでDropDownListに項目を追加する場合は、Page_Loadに処理を書きます。
C#protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DropDownListPrefecture.Items.Add(new ListItem("選択してください", ""));
DropDownListPrefecture.Items.Add(new ListItem("北海道", "1"));
DropDownListPrefecture.Items.Add(new ListItem("東京都", "13"));
DropDownListPrefecture.Items.Add(new ListItem("大阪府", "27"));
}
}
重要なのは、IsPostBackを使って初回表示時だけ項目を追加することです。
C#if (!IsPostBack)
{
// 初回表示時だけ実行する
}
IsPostBackを使わずに毎回Items.Addを実行すると、ボタン押下などでポストバックが発生するたびに項目が追加され、同じ選択肢が重複してしまうことがあります。
DropDownListの項目をコードで追加する場合は、TextとValueを指定するListItemを使うのが基本です。
C#new ListItem("表示名", "値")
5-4. 選択された値を取得する方法
ASP.NET Web FormsのDropDownListで選択された値を取得するには、SelectedValueを使います。
C#protected void ButtonSubmit_Click(object sender, EventArgs e)
{
string selectedValue = DropDownListPrefecture.SelectedValue;
string selectedText = DropDownListPrefecture.SelectedItem.Text;
LabelResult.Text = $"選択値: {selectedValue}, 表示名: {selectedText}";
}
SelectedValueはValue属性の値を取得します。SelectedItem.Textは画面に表示されている文字列を取得します。
たとえば、次の項目を選択した場合、
aspx<asp:ListItem Text="東京都" Value="13"></asp:ListItem>
SelectedValueは「13」、SelectedItem.Textは「東京都」になります。
未選択チェックを行う場合は、先頭のValueを空文字にしておくと扱いやすくなります。
C#protected void ButtonSubmit_Click(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(DropDownListPrefecture.SelectedValue))
{
LabelResult.Text = "都道府県を選択してください。";
return;
}
LabelResult.Text = $"選択された都道府県ID: {DropDownListPrefecture.SelectedValue}";
}
5-5. AutoPostBackを使って選択変更を処理する方法
DropDownListの選択が変更されたタイミングでサーバー側の処理を実行したい場合は、AutoPostBackをtrueにします。
aspx<asp:DropDownList
ID="DropDownListCategory"
runat="server"
AutoPostBack="true"
OnSelectedIndexChanged="DropDownListCategory_SelectedIndexChanged">
</asp:DropDownList>
コードビハインドでは、SelectedIndexChangedイベントを実装します。
C#protected void DropDownListCategory_SelectedIndexChanged(object sender, EventArgs e)
{
string categoryId = DropDownListCategory.SelectedValue;
LabelResult.Text = $"カテゴリが変更されました。ID: {categoryId}";
}
AutoPostBackをtrueにすると、ユーザーが選択を変更した時点でページがサーバーに送信されます。カテゴリを選択したら商品一覧を切り替えるような画面で使われます。
ただし、選択変更のたびに通信が発生するため、必要な場面だけで使うのがよいでしょう。単に登録ボタンを押したときに値を取得するだけなら、AutoPostBackは不要です。
6. ASP.NETでデータバインドして表示する方法
ASP.NET Web FormsのDropDownListでも、Windows FormsのComboBoxと同じようにデータバインドができます。データベースから取得したカテゴリ一覧や部署一覧を表示する場合は、DataSource、DataTextField、DataValueField、DataBindを使います。
ここでは、ASP.NETでDropDownListにデータをバインドする基本手順を解説します。
6-1. DataSourceを設定する基本手順
DropDownListにデータをバインドする基本的な流れは次のとおりです。
表示したいデータを取得する
DropDownListのDataSourceに設定する
表示用の項目をDataTextFieldに指定する
値として使う項目をDataValueFieldに指定する
DataBindメソッドを呼び出す
Listを使った例を見てみましょう。
C#public class Category
{
public int Id { get; set; }
public string Name { get; set; }
}
C#protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
var categories = new List<Category>
{
new Category { Id = 1, Name = "食品" },
new Category { Id = 2, Name = "家電" },
new Category { Id = 3, Name = "書籍" }
};
DropDownListCategory.DataSource = categories;
DropDownListCategory.DataTextField = "Name";
DropDownListCategory.DataValueField = "Id";
DropDownListCategory.DataBind();
}
}
DataBindを呼び出すことで、DropDownListにデータが表示されます。
6-2. DataTextFieldとDataValueFieldの使い方
DataTextFieldは、画面に表示するプロパティ名や列名を指定します。DataValueFieldは、内部的な値として扱うプロパティ名や列名を指定します。
C#DropDownListCategory.DataTextField = "Name";
DropDownListCategory.DataValueField = "Id";
この設定では、画面にはNameが表示され、SelectedValueではIdを取得できます。
たとえば、カテゴリ一覧が次のようなデータだとします。
C#new Category { Id = 1, Name = "食品" }
new Category { Id = 2, Name = "家電" }
new Category { Id = 3, Name = "書籍" }
画面上には「食品」「家電」「書籍」が表示されます。ユーザーが「家電」を選択した場合、SelectedValueは「2」になります。
C#string selectedId = DropDownListCategory.SelectedValue;
ASP.NET Web Formsでは、SelectedValueは文字列として取得されることが多いため、数値として使いたい場合は変換します。
C#int categoryId = int.Parse(DropDownListCategory.SelectedValue);
未選択の可能性がある場合は、int.TryParseを使うと安全です。
C#if (int.TryParse(DropDownListCategory.SelectedValue, out int categoryId))
{
LabelResult.Text = $"カテゴリID: {categoryId}";
}
else
{
LabelResult.Text = "カテゴリを選択してください。";
}
6-3. DataBindメソッドで一覧を表示する
DataSource、DataTextField、DataValueFieldを設定しただけでは、DropDownListに項目は反映されません。最後にDataBindメソッドを呼び出す必要があります。
C#DropDownListCategory.DataSource = categories;
DropDownListCategory.DataTextField = "Name";
DropDownListCategory.DataValueField = "Id";
DropDownListCategory.DataBind();
DataBindを忘れると、画面に選択肢が表示されません。ASP.NETでドロップダウンリストが空になる場合は、まずDataBindが呼ばれているか確認しましょう。
また、Page_Loadで毎回DataBindすると、ポストバック時に選択値が初期化されることがあります。そのため、通常は次のようにIsPostBackを使います。
C#protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindCategoryDropDownList();
}
}
C#private void BindCategoryDropDownList()
{
var categories = new List<Category>
{
new Category { Id = 1, Name = "食品" },
new Category { Id = 2, Name = "家電" },
new Category { Id = 3, Name = "書籍" }
};
DropDownListCategory.DataSource = categories;
DropDownListCategory.DataTextField = "Name";
DropDownListCategory.DataValueField = "Id";
DropDownListCategory.DataBind();
}
6-4. 初期選択値を設定する方法
DropDownListで初期選択値を設定するには、DataBindの後にSelectedValueを指定します。
C#DropDownListCategory.DataSource = categories;
DropDownListCategory.DataTextField = "Name";
DropDownListCategory.DataValueField = "Id";
DropDownListCategory.DataBind();
DropDownListCategory.SelectedValue = "2";
この例では、Valueが「2」の項目が初期選択されます。
注意点として、SelectedValueに指定する値はDropDownListの項目に存在している必要があります。存在しない値を指定するとエラーになることがあります。
安全に設定する場合は、FindByValueを使って存在確認を行います。
C#ListItem item = DropDownListCategory.Items.FindByValue("2");
if (item != null)
{
DropDownListCategory.ClearSelection();
item.Selected = true;
}
先頭に「選択してください」を追加したい場合は、DataBindの後にInsertを使います。
C#DropDownListCategory.DataSource = categories;
DropDownListCategory.DataTextField = "Name";
DropDownListCategory.DataValueField = "Id";
DropDownListCategory.DataBind();
DropDownListCategory.Items.Insert(0, new ListItem("選択してください", ""));
この方法は、データベースの一覧に案内用の項目を含めたくない場合に便利です。
6-5. データベースの値をDropDownListに表示する例
SQL Serverからカテゴリ一覧を取得し、ASP.NET Web FormsのDropDownListに表示する例を見てみましょう。
C#private void BindCategories()
{
string connectionString = "Data Source=.;Initial Catalog=SampleDb;Integrated Security=True";
using (SqlConnection connection = new SqlConnection(connectionString))
{
string sql = "SELECT CategoryId, CategoryName FROM Categories ORDER BY CategoryId";
using (SqlCommand command = new SqlCommand(sql, connection))
{
connection.Open();
using (SqlDataReader reader = command.ExecuteReader())
{
DropDownListCategory.DataSource = reader;
DropDownListCategory.DataTextField = "CategoryName";
DropDownListCategory.DataValueField = "CategoryId";
DropDownListCategory.DataBind();
}
}
}
DropDownListCategory.Items.Insert(0, new ListItem("選択してください", ""));
}
Page_Loadで初回表示時だけ呼び出します。
C#protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindCategories();
}
}
選択されたカテゴリIDを取得するコードは次のとおりです。
C#protected void ButtonSearch_Click(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(DropDownListCategory.SelectedValue))
{
LabelResult.Text = "カテゴリを選択してください。";
return;
}
int categoryId = int.Parse(DropDownListCategory.SelectedValue);
LabelResult.Text = $"選択されたカテゴリID: {categoryId}";
}
データベースからDropDownListに値を表示する場合も、基本はDataSource、DataTextField、DataValueField、DataBindの4つを理解すれば対応できます。
7. ASP.NET MVC・Razorでドロップダウンリストを作る方法
ASP.NET MVCやRazorでは、DropDownListサーバーコントロールではなく、HTMLのselectタグを生成する形でドロップダウンリストを作ります。
MVCでは、ControllerからViewに選択肢を渡し、View側でHtml.DropDownListForやselectタグを使って表示します。フォーム送信時には、選択された値がモデルのプロパティとしてControllerに渡されます。
7-1. Html.DropDownListForの基本
Html.DropDownListForは、モデルのプロパティに対応したドロップダウンリストを作成するHTMLヘルパーです。
たとえば、商品登録画面でカテゴリを選択する場合、ViewModelを次のように作成します。
C#public class ProductViewModel
{
public int CategoryId { get; set; }
public IEnumerable<SelectListItem> CategoryList { get; set; }
}
Viewでは、次のようにDropDownListForを使います。
cshtml@model ProductViewModel
@Html.DropDownListFor(
model => model.CategoryId,
Model.CategoryList,
"選択してください"
)
このコードでは、CategoryIdに選択された値が入ります。CategoryListには、表示する選択肢の一覧を設定します。
フォーム送信時には、選択されたカテゴリIDがCategoryIdにバインドされます。
7-2. SelectListを使って選択肢を渡す方法
SelectListを使うと、Listやデータベースから取得した一覧をドロップダウンリスト用の選択肢として渡せます。
まず、カテゴリクラスを用意します。
C#public class Category
{
public int Id { get; set; }
public string Name { get; set; }
}
Controllerで選択肢を作成します。
C#public ActionResult Create()
{
var categories = new List<Category>
{
new Category { Id = 1, Name = "食品" },
new Category { Id = 2, Name = "家電" },
new Category { Id = 3, Name = "書籍" }
};
var model = new ProductViewModel
{
CategoryList = new SelectList(categories, "Id", "Name")
};
return View(model);
}
ViewではDropDownListForで表示します。
cshtml@Html.DropDownListFor(
model => model.CategoryId,
Model.CategoryList,
"選択してください"
)
SelectListの第2引数には値として使うプロパティ名、第3引数には表示するプロパティ名を指定します。
C#new SelectList(categories, "Id", "Name")
この例では、画面にはNameが表示され、選択値としてIdが送信されます。
7-3. ViewBag・ViewModelでデータを渡す方法
ASP.NET MVCでドロップダウンリストの選択肢を渡す方法には、ViewBagを使う方法とViewModelを使う方法があります。
ViewBagを使う例は次のとおりです。
C#public ActionResult Create()
{
var categories = new List<Category>
{
new Category { Id = 1, Name = "食品" },
new Category { Id = 2, Name = "家電" },
new Category { Id = 3, Name = "書籍" }
};
ViewBag.CategoryId = new SelectList(categories, "Id", "Name");
return View();
}
Viewでは次のように書きます。
cshtml@Html.DropDownList("CategoryId", null, "選択してください")
一方、ViewModelを使う方法では、選択値と選択肢を1つのモデルにまとめます。
C#public class ProductViewModel
{
public string ProductName { get; set; }
public int CategoryId { get; set; }
public IEnumerable<SelectListItem> CategoryList { get; set; }
}
Controllerでは、ViewModelに選択肢を設定します。
C#public ActionResult Create()
{
var model = new ProductViewModel
{
CategoryList = new List<SelectListItem>
{
new SelectListItem { Value = "1", Text = "食品" },
new SelectListItem { Value = "2", Text = "家電" },
new SelectListItem { Value = "3", Text = "書籍" }
}
};
return View(model);
}
ViewではDropDownListForを使います。
cshtml@Html.DropDownListFor(
model => model.CategoryId,
Model.CategoryList,
"選択してください"
)
小さなサンプルではViewBagでも簡単ですが、実務ではViewModelを使う方が型が明確になり、保守しやすくなります。
7-4. 選択された値をControllerで受け取る方法
フォーム送信時に選択された値をControllerで受け取るには、POST用のアクションを作成します。
C#[HttpPost]
public ActionResult Create(ProductViewModel model)
{
int selectedCategoryId = model.CategoryId;
// 登録処理などを行う
return RedirectToAction("Index");
}
View側では、formタグの中にDropDownListForを配置します。
cshtml@using (Html.BeginForm())
{
@Html.LabelFor(model => model.CategoryId)
@Html.DropDownListFor(
model => model.CategoryId,
Model.CategoryList,
"選択してください"
)
<button type="submit">登録</button>
}
送信ボタンを押すと、選択された値がCategoryIdに入ってControllerへ渡されます。
バリデーションを行う場合は、CategoryIdが0や未選択値になっていないかチェックします。
C#[HttpPost]
public ActionResult Create(ProductViewModel model)
{
if (model.CategoryId == 0)
{
ModelState.AddModelError("CategoryId", "カテゴリを選択してください。");
}
if (!ModelState.IsValid)
{
model.CategoryList = GetCategoryList();
return View(model);
}
return RedirectToAction("Index");
}
エラー時に同じViewを返す場合は、CategoryListを再設定する必要があります。これを忘れると、再表示時にドロップダウンリストの選択肢が空になることがあります。
7-5. 初期選択値を反映する方法
ASP.NET MVCで初期選択値を反映するには、ViewModelの選択値プロパティに値を設定しておきます。
C#public ActionResult Edit(int id)
{
var model = new ProductViewModel
{
ProductName = "サンプル商品",
CategoryId = 2,
CategoryList = GetCategoryList()
};
return View(model);
}
Viewでは通常どおりDropDownListForを使います。
cshtml@Html.DropDownListFor(
model => model.CategoryId,
Model.CategoryList,
"選択してください"
)
この場合、CategoryIdが2なので、Valueが2の項目が初期選択されます。
SelectList側で初期値を指定する方法もあります。
C#var categoryList = new SelectList(categories, "Id", "Name", 2);
ただし、DropDownListForを使う場合は、モデルのプロパティ値が優先されることがあります。基本的には、ViewModelのCategoryIdに初期値を設定する方法が分かりやすいです。
エラーでViewを再表示する場合も、選択値を維持するには、モデルの値と選択肢の一覧を正しく再設定します。
C#if (!ModelState.IsValid)
{
model.CategoryList = GetCategoryList();
return View(model);
}
MVCやRazorでC#のドロップダウンリストを作る場合は、「選択値はViewModelのプロパティ」「選択肢はSelectListまたはIEnumerable<SelectListItem>」と考えると整理しやすくなります。
8. よくあるエラーと解決方法
C#でドロップダウンリストを扱うと、値が取得できない、選択値が消える、表示が期待どおりにならないといったエラーがよく発生します。
ここでは、ComboBox、ASP.NET DropDownList、MVCのドロップダウンリストで初心者がつまずきやすい原因と解決方法を解説します。
8-1. SelectedValueが取得できない原因
SelectedValueが取得できない原因として多いのは、ValueMemberやDataValueFieldを設定していないケースです。
Windows FormsのComboBoxでは、データバインド時にValueMemberを設定します。
C#comboBoxCategory.DisplayMember = "Name";
comboBoxCategory.ValueMember = "Id";
comboBoxCategory.DataSource = categories;
ValueMemberを設定していないと、SelectedValueが期待したIDにならないことがあります。
ASP.NET Web Formsでは、DataValueFieldを設定します。
C#DropDownListCategory.DataSource = categories;
DropDownListCategory.DataTextField = "Name";
DropDownListCategory.DataValueField = "Id";
DropDownListCategory.DataBind();
DataValueFieldを設定していない場合、SelectedValueで表示文字列が返ってきたり、期待した値が取得できなかったりします。
また、データバインドをしていない状態でSelectedValueを取得しようとしている場合も注意が必要です。まずDropDownListやComboBoxに項目が正しく追加されているか確認しましょう。
8-2. DataBind後に選択値が消える原因
ASP.NET Web Formsでよくあるのが、ボタンを押した後に選択値が初期状態に戻ってしまう問題です。
原因の多くは、Page_Loadで毎回DataBindしていることです。
C#protected void Page_Load(object sender, EventArgs e)
{
BindCategories();
}
このように書くと、ポストバックのたびにDropDownListが再作成され、ユーザーが選択した値が消えてしまうことがあります。
解決方法は、IsPostBackを使って初回表示時だけDataBindすることです。
C#protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindCategories();
}
}
ASP.NETでは、ページ表示後にボタンを押すとポストバックが発生します。初回表示とポストバックを区別するために、DropDownListの初期化処理ではIsPostBackを意識しましょう。
8-3. 表示名と値が逆になる原因
ドロップダウンリストで、画面にIDが表示されてしまう、またはSelectedValueで名前が取得されてしまう場合は、表示用と値用の指定が逆になっている可能性があります。
Windows Formsでは、DisplayMemberが表示用、ValueMemberが値用です。
C#comboBoxCategory.DisplayMember = "Name";
comboBoxCategory.ValueMember = "Id";
ASP.NET Web Formsでは、DataTextFieldが表示用、DataValueFieldが値用です。
C#DropDownListCategory.DataTextField = "Name";
DropDownListCategory.DataValueField = "Id";
MVCのSelectListでは、第2引数が値、第3引数が表示名です。
C#new SelectList(categories, "Id", "Name")
特にMVCのSelectListは、DisplayMemberやDataTextFieldとは引数の順番が違うため、初心者が間違えやすいポイントです。
表示名と値が逆になっていると感じたら、次の対応関係を確認しましょう。
Windows Formsでは、DisplayMemberが画面表示、ValueMemberが内部値です。
ASP.NET Web Formsでは、DataTextFieldが画面表示、DataValueFieldが内部値です。
ASP.NET MVCでは、SelectListの第2引数が内部値、第3引数が画面表示です。
8-4. NullReferenceExceptionが出る原因
ComboBoxでSelectedItem.ToStringを呼び出したときにNullReferenceExceptionが出る場合、SelectedItemがnullになっている可能性があります。
C#string value = comboBoxPrefecture.SelectedItem.ToString();
何も選択されていない状態でこのコードを実行すると、エラーになります。
解決方法は、SelectedItemがnullでないことを確認することです。
C#if (comboBoxPrefecture.SelectedItem == null)
{
MessageBox.Show("項目を選択してください。");
return;
}
string value = comboBoxPrefecture.SelectedItem.ToString();
SelectedIndexを使って未選択を判定することもできます。
C#if (comboBoxPrefecture.SelectedIndex == -1)
{
MessageBox.Show("項目を選択してください。");
return;
}
データバインドしている場合は、SelectedValueがnullになる可能性もあります。
C#if (comboBoxCategory.SelectedValue == null)
{
MessageBox.Show("カテゴリを選択してください。");
return;
}
C#のドロップダウンリストでは、未選択状態を想定してnullチェックやSelectedIndexの確認を入れることが大切です。
8-5. ASP.NETでポストバック時に値が初期化される原因
ASP.NET Web Formsで、ボタンを押すとDropDownListの選択値が初期化される場合は、Page_Loadの処理を確認しましょう。
よくある間違いは、Page_Loadで毎回Items.ClearやDataBindを実行していることです。
C#protected void Page_Load(object sender, EventArgs e)
{
DropDownListCategory.Items.Clear();
BindCategories();
}
このような処理は、ポストバック時にも実行されるため、ユーザーが選択した値が消えてしまいます。
解決方法は、初期化処理をIsPostBackで囲むことです。
C#protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindCategories();
}
}
ただし、選択変更時にあえて再バインドしたい場合は、再バインドの後にSelectedValueを設定し直す必要があります。
C#string selectedValue = DropDownListCategory.SelectedValue;
BindCategories();
ListItem item = DropDownListCategory.Items.FindByValue(selectedValue);
if (item != null)
{
DropDownListCategory.ClearSelection();
item.Selected = true;
}
ASP.NETでは、ページのライフサイクルとポストバックの仕組みを理解していないと、DropDownListの値が思ったように保持されません。特にPage_LoadでのDataBindは、初回表示時だけ行うのが基本です。
まとめ
C#でドロップダウンリストを作る方法は、開発するアプリケーションによって異なります。Windows FormsではComboBox、ASP.NET Web FormsではDropDownList、ASP.NET MVCやRazorではselectタグやHtml.DropDownListForを使います。
Windows FormsのComboBoxでは、Items.Addで固定の選択肢を追加できます。選択された文字列を取得するだけならSelectedItemやTextを使い、表示名とは別にIDを取得したい場合はDataSource、DisplayMember、ValueMemberを設定してSelectedValueを使います。
ASP.NET Web FormsのDropDownListでは、aspxにListItemを直接書く方法と、コードビハインドでItems.AddやDataBindを使う方法があります。データバインドではDataSource、DataTextField、DataValueField、DataBindの流れを覚えることが重要です。また、ポストバック時に値が初期化されないように、Page_LoadではIsPostBackを使って初回表示時だけ初期化するのが基本です。
ASP.NET MVCやRazorでは、ViewModelに選択値と選択肢を持たせ、Html.DropDownListForやSelectListを使ってドロップダウンリストを表示します。フォーム送信時には、選択された値がControllerに渡されます。
C#のドロップダウンリストで大切なのは、「画面に表示する文字列」と「内部で扱う値」を分けて考えることです。表示名にはカテゴリ名や部署名を使い、値にはIDを使う設計にすると、データベース登録や検索処理でも扱いやすくなります。
まずはComboBoxでItems.Add、SelectedItem、SelectedIndexの基本を理解し、次にデータバインドとSelectedValueを覚えると、C#のドロップダウンリストを実務でもスムーズに使えるようになります。