ASP.NETでDropDownListを作成。アイテムを追加する方法とは

ASP.NET

.NET
ASP.NET
C#
プログラミング言語

公開日時: 2020-07-31 　更新日時: 2022-06-09

この記事でわかること

DropDownListはおそらく、知らず知らずのうちに利用したことがあるのではないでしょうか。例えば、Webアプリなどでユーザーの情報を入力する際、出身地などが選択肢でリスト表示されます。これこそがDropDownListです。
画面をコーディングする際に、DropDownListはよく使用するコントロールです。ここでは、ASP.NETを利用したDropDownListの活用方法やアイテムの追加方法を確認していきます。

システム エンジニア: システム仕様書に、DropDownListを使用するよう記載されています。ASP.NETではどうやって実現できるのでしょうか？

プロジェクト リーダー: DropDownListは、ユーザーにいくつかの選択肢から項目を選択してもらうのに使用するコントロールですね。ASP.NETでも実現可能なので、ここで実装方法をマスターしましょう。

実行環境
・Visual Studio Community 2017

ASP.NETのDropDownList

DropdownListは、ComboBoxによく似ていますが、選択した値のテキストをユーザーが編集するといったことはできません。任意の型の値を表示することが可能です。また、イメージのようにテキスト表現を持たないものも表示できます。
DropdownListはユーザーが、比較的少ないリストからひとつの値を選択する場合に適しているといえるでしょう。

DropdownListには多くのプロパティが準備されていますが、すべてを網羅する必要はありません。最低限確認しておきたいプロパティを紹介します。

[table id=45 /]

ASP.NETでリストを追加する操作

それでは早速、ASP.NETでDropDownListコントロールを利用してみましょう。使用する環境はVisual Studio Community 2017です。
以下、サンプルプログラムのポイントです。

- ■aspxファイル内にDropDownListコントロールがあります。これを実装することで、まずはリスト内容が空のDropDownListが作られます
- ■C#ファイル内でDropDownListのリスト内容を設定します

下記のListItem list = new ListItem(“東京都”, “1”);を例にすると、”東京都”が画面に表示される値で、”1”が内部で活用する値です

- ■Loadイベントでは、IsPostBackプロパティの確認を行う必要があります

これがなければ、ページが切り替わるたびにDropDownListに項目が追加されてしまいます

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="WebApplication19.test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label" runat="server" Text="出身地"></asp:Label>
            <asp:DropDownList ID="DropDownList" runat="server"></asp:DropDownList>
        </div>
    </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="WebApplication19.test" %>

<!DOCTYPE html>

</head>

<body>

<div>

<asp:Label ID="Label" runat="server" Text="出身地"></asp:Label>

<asp:DropDownList ID="DropDownList" runat="server"></asp:DropDownList>

</div>

</form>

</body>

</html>

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

namespace WebApplication19
{
    public partial class test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // 最初のロードの時に表示
            if (IsPostBack == false)
            {
                ListItem list = new ListItem("東京都", "1");
                DropDownList.Items.Add(list);
                list = new ListItem("千葉県", "2");
                DropDownList.Items.Add(list);
                list = new ListItem("神奈川県", "3");
                DropDownList.Items.Add(list);
                list = new ListItem("埼玉県", "4");
                DropDownList.Items.Add(list);
                list = new ListItem("栃木県", "5");
                DropDownList.Items.Add(list);
                list = new ListItem("群馬県", "6");
                DropDownList.Items.Add(list);
                list = new ListItem("茨城県", "7");
                DropDownList.Items.Add(list);
            }
        }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace WebApplication19

{

public partial class test : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

// 最初のロードの時に表示

if (IsPostBack == false)

{

ListItem list = new ListItem("東京都", "1");

DropDownList.Items.Add(list);

list = new ListItem("千葉県", "2");

DropDownList.Items.Add(list);

list = new ListItem("神奈川県", "3");

DropDownList.Items.Add(list);

list = new ListItem("埼玉県", "4");

DropDownList.Items.Add(list);

list = new ListItem("栃木県", "5");

DropDownList.Items.Add(list);

list = new ListItem("群馬県", "6");

DropDownList.Items.Add(list);

list = new ListItem("茨城県", "7");

DropDownList.Items.Add(list);

}

実行結果

指定した項目を固定表示する方法（SelectedIndexプロパティ）

顧客によっては、DropDownListを使用したいが、ログインIDなどに紐づけて選択値を固定で表示してほしいという要望が出る場合も多々あります。
この場合に使用するプロパティがSelectedIndexです。SelectedIndexプロパティの簡単な活用方法を確認しましょう。
以下、サンプルプログラムのポイントです。

- ■SelectedIndexでは、Index値は0からスタートします

下記の場合では、”東京都”がIndex値=0となり、”千葉県”がIndex値=1となります

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

namespace WebApplication19
{
    public partial class test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // 最初のロードの時に表示
            if (IsPostBack == false)
            {
                ListItem list = new ListItem("東京都", "1");
                DropDownList.Items.Add(list);
                list = new ListItem("千葉県", "2");
                DropDownList.Items.Add(list);
                list = new ListItem("神奈川県", "3");
                DropDownList.Items.Add(list);
                list = new ListItem("埼玉県", "4");
                DropDownList.Items.Add(list);
                list = new ListItem("栃木県", "5");
                DropDownList.Items.Add(list);
                list = new ListItem("群馬県", "6");
                DropDownList.Items.Add(list);
                list = new ListItem("茨城県", "7");
                DropDownList.Items.Add(list);

                // この場合"埼玉県"が表示されます
                DropDownList.SelectedIndex = 3;
            }
        }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace WebApplication19

{

public partial class test : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

// 最初のロードの時に表示

if (IsPostBack == false)

{

ListItem list = new ListItem("東京都", "1");

DropDownList.Items.Add(list);

list = new ListItem("千葉県", "2");

DropDownList.Items.Add(list);

list = new ListItem("神奈川県", "3");

DropDownList.Items.Add(list);

list = new ListItem("埼玉県", "4");

DropDownList.Items.Add(list);

list = new ListItem("栃木県", "5");

DropDownList.Items.Add(list);

list = new ListItem("群馬県", "6");

DropDownList.Items.Add(list);

list = new ListItem("茨城県", "7");

DropDownList.Items.Add(list);

// この場合"埼玉県"が表示されます

DropDownList.SelectedIndex = 3;

}

実行結果

システム エンジニア: ASP.NETでもDropDownListが簡単に実現できました。これならサクサクとプログラミングが進めそうです！

プロジェクト リーダー: DropDownListをどう活用するかは、自分でコーディングしてつかめるものです。知識として蓄えるだけでなく、Visual Studioを利用してDropDownListをプログラミングしてみましょう。

DropDownListはよく使用するコントロールです

DropDownListは画面があるアプリケーション開発を行うならば、よく使用されます。今回は、リストに固定値を設定する方法で解説しましたが、実際の開発現場ではデータベースやXMLファイルなどの内容を管理し、そこから取得・設定するプログラミングが必要になるでしょう。ここで解説した内容はDropDownListの基本ですので、早めにマスターしておきましょう。

>>>ASP.NETの案件を探すならFEnet .NET Navi

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

ASP.NETでDropDownListを作成。アイテムを追加する方法とは

ASP.NETのDropDownList

ASP.NETでリストを追加する操作

指定した項目を固定表示する方法（SelectedIndexプロパティ）

DropDownListはよく使用するコントロールです

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

ASP.NETでDropDownListを作成。アイテムを追加する方法とは

ASP.NETのDropDownList

ASP.NETでリストを追加する操作

指定した項目を固定表示する方法（SelectedIndexプロパティ）

DropDownListはよく使用するコントロールです

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

【ASP.NET MVC入門その1】ASP.NET MVCで”Hello world”を表示する

ASP.NETでSessionを使ってセッション変数を指定・取得する方法

ASP.NETアプリケーションをIISで動かすための設定方法

【ASP.NETでポストバックを実装】Button.PostBackUrlでポスト先のURLを取得する

ASP.NETで使うweb.configファイルを作成する方法