DropDownList に要素を追加する - ASP.NET

DropDownList (ドロップダウンリスト) に要素を追加する手順を紹介します。

Webフォームデザイン時に追加する場合

Webフォームの画面のデザイン時に要素を追加する場合の手順です。

ASP.NETアプリケーションを新規作成します。Webフォームを追加し、開きます。下図のデザイン画面が表示されます。(コード画面が表示された場合はコードウィンドウの下部のタブから[デザイン]タブをクリックしてデザイナ画面を表示します。)

ツールボックスを表示します。ツールボックスから[DropDownList]をクリックして選択します。

デザイン画面にドラッグ＆ドロップします。DropDownListがWebフォームに追加されます。

プロパティウィンドウ(下図の右下枠)の[Items]プロパティを編集します。[Items]プロパティの(コレクション)の右側の[...]ボタンをクリックします。

ListItemコレクションエディターが開きます。

左側の[メンバー]枠の[追加]ボタンをクリックします。メンバー欄に要素が追加されます。

右側の[プロパティ]枠のTextプロパティの欄に"ペンギン"を入力しました。入力を確定するとValueにも同じ値が設定されます。(下図参照)

メンバー欄の[追加]ボタンをクリックす要素を追加します。"ペンギン","ラクダ","クジラ","イルカ"の要素を追加しました。追加後[OK]ボタンをクリックし、コレクションエディターのウィンドウを閉じます。

Webフォームのデザイン画面に戻ります。DropDownListの表示が更新されています。

実行結果

プロジェクトを実行します。Webブラウザが起動し下図の画面が表示されます。

DropDownListを展開します。先ほど追加した要素が一覧に表示されています。

他の要素を選択できました。

コードで追加する場合

プログラムのコードで要素を追加する場合の手順です。
先の方法でDropDownListに要素の追加ができますが、要素の内容がページの状態やオプションによって動的に変わる場合があります。コードを利用して動的にDropDownListに要素を追加する手順を紹介します。

ASP.NET Webアプリケーションのプロジェクトを作成します。作成後Webフォームを追加します。

ツールボックスからDropDownListをドラッグ＆ドロップします。WebフォームにDropDownListが追加されます。

Webフォームをダブルクリック、または、Webフォームを選択し、プロパティウィンドウの"Load"イベントをダブルクリックし、ページのLoadイベントハンドラの編集をします。

コード

以下のコードを記述します。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace DropDownListDemo
{
  public partial class AddItemsFromCode : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      DropDownList1.Items.Add("ペンギン");
      DropDownList1.Items.Add("フクロウ");
      DropDownList1.Items.Add("にわとり");
      DropDownList1.Items.Add("ペリカン");
    }
  }
}

参考

TextとValueを明示的に指定する場合はLoadイベントのコードを下記のコードに変更します。

protected void Page_Load(object sender, EventArgs e)
{
  ListItem li = new ListItem("ペンギン", "ペンギン");
  DropDownList1.Items.Add(li);
  li = new ListItem("フクロウ", "フクロウ");
  DropDownList1.Items.Add(li);
  li = new ListItem("にわとり", "にわとり");
  DropDownList1.Items.Add(li);
  li = new ListItem("ペリカン", "ペリカン");
  DropDownList1.Items.Add(li);
}