RazorPageでドロップダウンリスト、セレクトボックスで選択した項目を取得する - ASP.NET Core

RazorPageでドロップダウンリスト、セレクトボックスで選択した項目を取得するコードを紹介します。

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

ASP.NET Core Webアプリケーションのプロジェクトを作成します。

コード

SelectBoxGetValue01.cshtml

@page
@model SimpleSelectBox.Pages.SelectBoxGetValue01Model
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
}
<html>
  <head>

  </head>
  <body>
    <h2>セレクトボックスの値を取得するデモ</h2>
    <form method="post">
    <select asp-for="@Model.SelectValue">
      <option>ぺんぎんクッキー</option>
      <option>らくだキャラメル</option>
      <option>かるがもサブレ</option>
      <option>しろくまアイス</option>
      <option>いるかキャンディー</option>
    </select>
    <input type="submit" value="Exec"/>
    </form>

  @if (Model.Output != null) {
    <p>@Model.Output が選択されました。</p>
  }
</body>
</html>

SelectBoxGetValue01.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

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

    public string Output { get; set; }
    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-for="@Model.SelectValue" を記述し、セレクトボックスの選択内容が、モデルクラスのSelectValueプロパティに反映される設定とします。
セレクトボックスの項目はoptionタグで記述します。

    <form method="post">
    <select asp-for="@Model.SelectValue">
      <option>ぺんぎんクッキー</option>
      <option>らくだキャラメル</option>
      <option>かるがもサブレ</option>
      <option>しろくまアイス</option>
      <option>いるかキャンディー</option>
    </select>
    <input type="submit" value="Exec"/>
    </form>

asp-for属性はタグヘルパーの機能のため、@addTagHelper を忘れずに記述します。

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

セレクトボックスの選択結果を代入するSelectValueプロパティをページモデルクラスに実装します。
BindProperty属性を記述します。

    [BindProperty]
    public string SelectValue { get; set; }

サブミットボタンがクリックされると、フォームのPOST処理が実行されます。同じページにPOSTされるため、ページモデルクラスに実装した、 OnPost()メソッドが呼び出されます。OnPostメソッド内で、Outputプロパティにセレクトボックスの選択された値を代入します。

    public void OnPost()
    {
      Output = SelectValue;
    }

Output変数に値が設定された場合、ページにメッセージを表示します。

  @if (Model.Output != null) {
    <p>@Model.Output が選択されました。</p>
  }

実行結果

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

ドロップダウンコントロールをクリックして、ドロップダウンリストを表示します。リストの項目をクリックして選択します。

選択できたら、[Exec]ボタンをクリックします。

クリックすると、ページ遷移し画面にセレクトボックスで選択した項目が表示されます。

プログラム例2:value 属性がある場合の動作

ASP.NET Core Webアプリケーションのプロジェクトを作成します。

コード

SelectBoxGetValue02.cshtml

@page
@model SimpleSelectBox.Pages.SelectBoxGetValue02Model
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
}
<html>
  <head>

  </head>
  <body>
    <h2>セレクトボックスの値を取得するデモ</h2>
    <form method="post">
    <select asp-for="@Model.SelectValue">
      <option value="1001">ぺんぎんクッキー</option>
      <option value="1002">らくだキャラメル</option>
      <option value="1003">かるがもサブレ</option>
      <option value="1004">しろくまアイス</option>
      <option value="1005">いるかキャンディー</option>
    </select>
    <input type="submit" value="Exec"/>
    </form>

  @if (Model.Output != null) {
    <p>@Model.Output が選択されました。</p>
  }
</body>
</html>

SelectBoxGetValue02.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

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

    public string Output { get; set; }

    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();

解説

先のプログラムと同様のコードです、違いは、セレクトボックスのoption タグにvalue属性を追加しています。

    <select asp-for="@Model.SelectValue">
      <option value="1001">ぺんぎんクッキー</option>
      <option value="1002">らくだキャラメル</option>
      <option value="1003">かるがもサブレ</option>
      <option value="1004">しろくまアイス</option>
      <option value="1005">いるかキャンディー</option>
    </select>