iPentec.com  /  Doc  /  C#  /  ASP.NET Core  /  Razor Pages

目次

RazorPageでドロップダウンリスト、セレクトボックスに動的に値を設定する - ASP.NET Core

RazorPageでドロップダウンリスト、セレクトボックスに動的に値を設定するコードを紹介します。

プログラム例:シンプルな実装

コード

/Pages/SelectBoxSetValue01.cshtml
@page
@model SimpleSelectBox.Pages.SelectBoxSetValue01Model
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
}
<html>
<head>

</head>
<body>
  <h2>セレクトボックスの値を設定するデモ</h2>
  <form method="post">
        <select asp-for="@Model.SelectValue" asp-items="@Model.ListItem"></select>
        <input type="submit" value="Exec"/>
  </form>
    @if (Model.Output != "") {
    <p>@Model.Output が選択されました。</p>
    }
</body>
</html>
/Pages/SelectBoxSetValue01.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace SimpleSelectBox.Pages
{
  public class SelectBoxSetValue01Model : PageModel
  {
    [BindProperty]
    public string SelectValue { get; set; } = "";

    private List<string> _ListItem;
    public SelectList ListItem { get; set; }

    public string Output { get; set; } = "";

    public SelectBoxSetValue01Model()
    {
      _ListItem = new List<string>();
      _ListItem.Add("おしゃれなチェアー");
      _ListItem.Add("ふかふかベッド");
      _ListItem.Add("ひろびろテーブル");
      _ListItem.Add("しっとりチェスト");
      _ListItem.Add("たくさんシェルフ");

      ListItem = new SelectList(_ListItem);
    }

    public void OnGet()
    {
    }

    public void OnPost()
    {
      Output = SelectValue;
    }
  }
}
Program.cs
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
var app = builder.Build();

app.UseStaticFiles();
app.UseRouting();
app.MapRazorPages();
app.Run();

解説

セレクトボックスの基本的な動作やセレクトボックスで選択した値の取得のロジックは こちらの記事を参照してください。

プログラムで動的に値を設定する場合は、selectタグにタグヘルパーのasp-items属性を記述します。 値には、ページモデルクラスの SelectList オブジェクトのプロパティ@Model.ListItemを指定します。
<select asp-for="@Model.SelectValue" asp-items="@Model.ListItem"></select>

セレクトボックスに設定する項目をページモデルクラスのコンストラクタで作成します。
初めに項目のリストのIEnumerableインターフェイスを持つオブジェクトを作成します。今回の例では、List<string>オブジェクトを利用しています。
List<string>オブジェクトを作成し、Addメソッドで項目名を追加します。

リストの作成後SelectListオブジェクトを作成します。SelectListオブジェクトのコンストラクタの第一引数に先に作成した、 List<string>オブジェクトを与えます。
    private List<string> _ListItem;
    public SelectList ListItem { get; set; }

    public SelectBoxSetValue01Model()
    {
      _ListItem = new List<string>();
      _ListItem.Add("おしゃれなチェアー");
      _ListItem.Add("ふかふかベッド");
      _ListItem.Add("ひろびろテーブル");
      _ListItem.Add("しっとりチェスト");
      _ListItem.Add("たくさんシェルフ");

      ListItem = new SelectList(_ListItem);
    }

実行結果

プロジェクトを実行します。Webブラウザが起動しますので、(アプリケーションルートURL)/SelectBoxSetValue01 のURLにアクセスします。 下図のページが表示されます。


セレクトボックスをクリックします。下図のドロップダウンリストが表示されます。ページモデルクラスで実装した項目が ドロップダウンリストに追加されていることが確認できます。


ドロップダウンリストから項目を選択して、[Exec]ボタンをクリックします。POST処理が実行され、遷移先のページで 下部にセレクトボックスで選択した項目を含むメッセージが表示されます。

プログラム例:クラスオブジェクトのリストを利用する場合

先の例では、SelectListオブジェクト作成時のコンストラクターに List<string> オブジェクトを与えてSelectListオブジェクトを作成しましたが、 SelectListオブジェクトのためだけにListオブジェクトを作成するのは面倒です。 別途管理しているクラスオブジェクトのリストを使えると、SelectListオブジェクト用のListを作成しなくてよいので実装が楽になります。
このセクションでは、クラスオブジェクトのリストを利用して、SelectListオブジェクトを作成するコードを紹介します。

コード

情報を格納しているクラスのコードです。今回は id, name, alt_name の3つのプロパティを持つクラスを例にしています。
MyItem.cs
namespace SimpleSelectBox
{
  public class MyItem
  {
    public int id { get; set; }
    public string name { get; set; } = "";
    public string alt_name { get; set; } = "";
  }
}

Razor Pageのcshtmlファイルです。こちらは先ほどのデモと同じコードです。
Pages/SelectBoxSetValue02.cshtml
@page
@model SimpleSelectBox.Pages.SelectBoxSetValue02Model
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
}
<html>
<head>

</head>
<body>
  <h2>セレクトボックスの値を設定するデモ</h2>
  <form method="post">
        <select asp-for="@Model.SelectValue" asp-items="@Model.ListItem"></select>
        <input type="submit" value="Exec"/>
  </form>
    @if (Model.Output != "") {
    <p>@Model.Output が選択されました。</p>
    }
</body>
</html>

ページモデルクラスのコードです。
Pages/SelectBoxSetValue02.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace SimpleSelectBox.Pages
{
  public class SelectBoxSetValue02Model : PageModel
  {
    [BindProperty]
    public string SelectValue { get; set; } = "";
    private List<MyItem> _ListItem;
    public SelectList ListItem { get; set; }
    public string Output { get; set; } = "";

    public SelectBoxSetValue02Model()
    {
      _ListItem = new List<MyItem>();
      _ListItem.Add(new MyItem() { id = 1001, name = "ふわふわソファー", alt_name = "FuwaFuwa sofa" });
      _ListItem.Add(new MyItem() { id = 1002, name = "こじんまりデスク", alt_name = "Kojinmari Desk" });
      _ListItem.Add(new MyItem() { id = 2001, name = "やわらかチェアー", alt_name = "Yawaraka Chair" });
      _ListItem.Add(new MyItem() { id = 2002, name = "ましかくテーブル", alt_name = "Mashikaku Table" });
      _ListItem.Add(new MyItem() { id = 3001, name = "ひろびろベッド", alt_name = "Hirobiro Bed" });

      ListItem = new SelectList(_ListItem, "id", "name");
    }

    public void OnGet()
    {
    }
    public void OnPost()
    {
      Output = SelectValue;
    }
  }
}
Program.cs
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
var app = builder.Build();

app.UseStaticFiles();
app.UseRouting();
app.MapRazorPages();
app.Run();

解説

セレクトボックスのリスト項目(asp-items)、選択項目(asp-for)で指定されるプロパティの実装は先ほどのデモと同様です。
    [BindProperty]
    public string SelectValue { get; set; } = "";

    public SelectList ListItem { get; set; }

SelectList オブジェクトのコンストラクタに与える、IEnumerableインターフェイスを持つオブジェクトは 今回のデモではList<MyItem>クラスを利用します。
    private List<MyItem> _ListItem;

ページモデルクラスのコンストラクタ―でSelectList オブジェクトを作成します。 SelectList オブジェクトに与える、List<MyItem>クラスを作成し、MyItemオブジェクトの要素を追加します。
SelectList オブジェクトのコンストラクタ―では、第一引数に、IEnumerableインターフェイスを持つオブジェクトList<MyItem>オブジェクトを与えます。 第二引数は選択した要素を代入する、asp-for 属性に設定するMyItemオブジェクトのメンバを指定します。今回は選択された項目のIDをaso-forで指定した、 SelectValueプロパティに設定するため、"id"を与えます。第三引数はセレクトボックスに表示する項目のテキストのメンバを指定します。 今回は、name プロパティの値をセレクトボックスに表示するため、"name"を与えます。
    public SelectBoxSetValue02Model()
    {
      _ListItem = new List<MyItem>();
      _ListItem.Add(new MyItem() { id = 1001, name = "ふわふわソファー", alt_name = "FuwaFuwa sofa" });
      _ListItem.Add(new MyItem() { id = 1002, name = "こじんまりデスク", alt_name = "Kojinmari Desk" });
      _ListItem.Add(new MyItem() { id = 2001, name = "やわらかチェアー", alt_name = "Yawaraka Chair" });
      _ListItem.Add(new MyItem() { id = 2002, name = "ましかくテーブル", alt_name = "Mashikaku Table" });
      _ListItem.Add(new MyItem() { id = 3001, name = "ひろびろベッド", alt_name = "Hirobiro Bed" });

      ListItem = new SelectList(_ListItem, "id", "name");
    }

実行結果

プロジェクトを実行し、(アプリケーションルートURL)/SelectBoxSetValue01 のURLにアクセスします。下図のページが表示されます。


セレクトボックスをクリックしてドロップダウンリストを表示します。ドロップダウンリストの項目の値が、 MyItemクラスのnameプロパティの値になっています。


ドロップダウンリストの項目をクリックして選択します。選択後[Exec]ボタンをクリックします。


ボタンをクリックするとページ遷移し同じ画面が表示されます。セレクトボックスの下部にメッセージが表示され、 セレクトボックスで選択した項目のidプロパティの値を含むテキストが表示されます。


別の項目を選択した場合は下図の結果となります。選択した項目のidプロパティの値が表示されます。

参考:SelectListのコンストラクターのパラメータを変えた場合の動作

SelectListオブジェクト作成のコードを下記に変更します。
下記コードの場合、セレクトボックスに表示される文字列は alt_nameプロパティの値になり、選択した項目の値は、nameプロパティの値になります。
  ListItem = new SelectList(_ListItem, "name", "alt_name");

プロジェクトを実行し、(アプリケーションルートURL)/SelectBoxSetValue01 のURLにアクセスします。下図のページが表示されます。
セレクトボックスに表示される文字列が、alt_nameプロパティの値になっています。


ドロップダウンリストを表示します。クリックして項目を選択します。選択後に[Exec]ボタンをクリックします。


ボタンをクリックすると、ページ遷移してページ下部に選択した項目の値が表示されます。 値の文字列がMyItemクラスのnameプロパティの値になっていることが確認できます。

著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

最終更新日: 2022-06-04
作成日: 2022-06-03
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.