.NET開発者のためのブログメディア

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

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

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

実行環境
・Visual Studio Community 2017

ASP.NETのDropDownList

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

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

プロパティ	内容
SelectedIndex	DropDownListコントロール内の選択された項目のインデックスを取得または設定できる
SelectedItem	リストコントロールで最小のインデックスを持つ選択された項目を取得できる
SelectedValue	リストコントロール内の選択されている項目の値と、指定した値が含まれるリストコントロール内の項目を取得できる
Text	ListControlコントロールのSelectedValueプロパティを取得または設定できる

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;

}

実行結果

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

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

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

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

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

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

公開:'20/03/17 更新:'21/11/05
【SQL Serverログの操作】トランザクションログの使用量を確認する方法

公開:'20/03/16 更新:'21/11/08
【.NETが統合】.NET 5の概要と今後のリリース予定

公開:'20/03/05 更新:'20/10/08

Categories 連載一覧

生活・便利

教育・学習

Windows

言語・環境

転職

エンジニア

働き方

プログラミング言語

開発環境

ツール

未分類

.NET開発者のためのブログメディア

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

ASP.NETのDropDownList

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

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

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

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

【SQL Serverログの操作】トランザクションログの使用量を確認する方法

【.NETが統合】.NET 5の概要と今後のリリース予定

Categories 連載一覧

Tags タグ一覧

Jobs 新着案件

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

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

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

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

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