ドロップダウン形式の選択

選択肢にない値を入力することはできません。

Select.cshtml.cs

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

namespace WorkStandard.Pages.controls
{
    public class SelectModel : PageModel
    {
        [BindProperty]
        public string? Food { get; set; }

        public SelectList Options { get; set; } = new SelectList(new string[] { "Rice", "Noodle", "Onigiri" });

        public void OnPost()
        {
            System.Diagnostics.Debug.WriteLine($"Food = {Food}");
        }
    }
}

→ Debug.WriteLineが表示される場所

Select.cshtml

@page
@model WorkStandard.Pages.controls.SelectModel

<form method="post">
    <select class="form-select mb-3" asp-for="Food" asp-items="Model.Options"></select>
    <input type="submit" />
</form>

主なCSSクラスの効果

• mb-3 下に少し余白(margin)を設けます。→ 余白
• form-select inputをBootstrapの外観にします。→ セレクト

メモ：selectのclassにform-select-lg クラスを追加すると大きめの表示になります。

SelectWithGroup.cshtml.cs

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

namespace WorkStandard.Pages.controls
{
    public class SelectWithGroupModel : PageModel
    {
        [BindProperty]
        public string? Animal { get; set; }

        public List<SelectListItem> AnimalOptions { get; set; } = new();

        public SelectWithGroupModel()
        {
            SelectListGroup group1 = new() { Name = "哺乳類" };
            AnimalOptions.Add(new SelectListItem { Text = "イヌ", Group = group1 });
            AnimalOptions.Add(new SelectListItem { Text = "サル", Group = group1 });
            AnimalOptions.Add(new SelectListItem { Text = "ライオン", Group = group1 });

            SelectListGroup group2 = new() { Name = "爬虫類" };
            AnimalOptions.Add(new SelectListItem { Text = "ワニ", Group = group2 });
            AnimalOptions.Add(new SelectListItem { Text = "トカゲ", Group = group2 });

            SelectListGroup group3 = new() { Name = "両生類" };
            AnimalOptions.Add(new SelectListItem { Text = "カエル", Group = group3 });
            AnimalOptions.Add(new SelectListItem { Text = "イモリ", Group = group3 });
        }

        public void OnPost()
        {
            System.Diagnostics.Debug.WriteLine($"Animal = {Animal}");
        }
    }
}

→ Debug.WriteLineが表示される場所

SelectWithGroup.cshtml

@page
@model WorkStandard.Pages.controls.SelectWithGroupModel

<form method="post">
    <select class="form-select mb-3" asp-for="Animal" asp-items="Model.AnimalOptions"></select>
    <input type="submit" />
</form>

主なCSSクラスの効果

• mb-3 下に少し余白(margin)を設けます。→ 余白
• form-select inputをBootstrapの外観にします。→ セレクト

メモ：selectのclassにform-select-lg クラスを追加すると大きめの表示になります。

これでもできます。

SelectWithGroup.cshtml.cs

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

namespace WorkStandard.Pages.controls
{
    public class SelectWithGroupModel : PageModel
    {
        [BindProperty]
        public string? Animal { get; set; }

        public SelectList AnimalOptions { get; set; }

        public SelectWithGroupModel()
        {
            List<object> options = new();
            options.Add(new { Group = "哺乳類", Text = "ネコ" });
            options.Add(new { Group = "哺乳類", Text = "リカオン" });
            options.Add(new { Group = "哺乳類", Text = "バク" });
            options.Add(new { Group = "爬虫類", Text = "ヘビ" });
            options.Add(new { Group = "爬虫類", Text = "カメ" });
            options.Add(new { Group = "両生類", Text = "サンショウウオ" });
            options.Add(new { Group = "両生類", Text = "サイレン" });

            AnimalOptions = new SelectList(options, "Text", "Text", null, "Group");
        }

        public void OnPost()
        {
            System.Diagnostics.Debug.WriteLine($"Animal = {Animal}");
        }
    }
}

→ Debug.WriteLineが表示される場所

メモ：この例で匿名型 new {Group = ..., Text = ...}を使っている部分は、他の構造体やクラスでもよく、プロパティ名もGroupやTextに限定されませんので、何か別途構造体やクラスで一覧がある場合は、この例の方がやりやすいです。"Group" や "Text" の名前が異なる場合は、SelectListのコンストラクターで"Text" や "Group" を指定している箇所を変更します。

SelectWithGroup.cshtml は前の例と同じです。

Edge(バージョン119)での入力候補の外見

Chrome(バージョン119)での入力候補の外見。(このスクショには送信ボタンも入ってしまいました。)

DataList.cshtml.cs

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

namespace WorkStandard.Pages.controls
{
    public class DataListModel : PageModel
    {
        [BindProperty]
        public string? Todofuken { get; set; }

        public void OnPost()
        {
            System.Diagnostics.Debug.WriteLine($"入力されたのは{Todofuken}");
        }
    }
}

→ Debug.WriteLineが表示される場所

DataList.cshtml

@page
@model WorkStandard.Pages.controls.DataListModel

<form method="post">
    <label asp-for="Todofuken" class="form-label">都道府県</label>
    <input asp-for="Todofuken" list="TodofukenList" class="form-control" />
    <datalist id="TodofukenList">
        <option value="北海道"></option>
        <option value="岩手県"></option>
        <option value="宮城県"></option>
        <option value="秋田県"></option>
        <option value="山形県"></option>
    </datalist>
    <input type="submit" />
</form>

• 「選択してください...」のまま送信するとエラーメッセージを表示します。
• 選択肢にない値を入力することはできません。

SelectAndLeadingTop.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace WorkStandard.Pages.controls
{
    public class SelectAndLeadingTopModel : PageModel
    {
        [BindProperty]
        [DisplayName("栄養素")]
        [Required(ErrorMessage = "{0}を何か１つ選択してください。")]
        public string? Nutrition { get; set; }

        public SelectList Options { get; set; } = new (new string[] { "タンパク質", "脂質", "炭水化物" });

        public void OnPost()
        {
            //サーバー側での入力検証の判定
            if (!ModelState.IsValid)
            {
                //「選択してください...」が選択され、クライアント側のチェックが回避された場合は、
                // ここが実行されます。(想定されるのは悪意のあるユーザーか特殊な環境です。)
                return;
            }

            System.Diagnostics.Debug.WriteLine($"Nutrition = {Nutrition}");
        }
    }
}

→ Debug.WriteLineが表示される場所

SelectAndLeadingTop.cshtml

@page
@model WorkStandard.Pages.controls.SelectAndLeadingTopModel

<form method="post">
    <div class="col-sm-4 mb-3">
        <label asp-for="Nutrition"></label>
        <select class="form-select" asp-for="Nutrition" asp-items="Model.Options">
            <option selected disabled value="">選択してください...</option>
        </select>
        <span asp-validation-for="Nutrition" class="text-danger"></span>
    </div>
    <input type="submit" />
</form>

@section Scripts {
    @{
        //クライアント側での検証を有効にします。
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

主なCSSクラスの効果

• mb-3 下に少し余白(margin)を設けます。→ 余白
• col-sm-4 幅を行の4/12にします。ウィンドウ幅が576px(sm)より小さい場合は100%にします。→ グリッドシステム
• form-select inputをBootstrapの外観にします。→ セレクト

メモ：selectのclassにform-select-lg クラスを追加すると大きめの表示になります。