C# サンプル集

一覧形式の選択

2024/3/26

この記事は ASP.NET Core Razor Pages を対象にしています。

この記事内のサンプルは、プロジェクトテンプレート「ASP.NET Core Web アプリ」を使用して、PagesフォルダーにこのRazorページを追加する前提です。

項目を１つ選択できるリスト
選択肢がグループ化されたリスト
複数選択のリスト

項目を１つ選択できるリスト

SelectListBox.cshtml.cs

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

namespace WorkStandard.Pages.controls
{
    public class SelectListBoxModel : PageModel
    {
        [BindProperty]
        [DisplayName("目的地")]
        public string? Destination { get; set; }

        public SelectList Options { get; set; } = new SelectList(new string[] { 
            "東京", "横浜", "名古屋", "京都", "大阪", "広島" 
        });

        //スクロールなしで一覧に表示される項目数。これを超える項目がある場合スクロールバーが表示されます。
        public int DisplayItemCount { get; set; } = 5;

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

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

SelectListBox.cshtml

@page
@model WorkStandard.Pages.controls.SelectListBoxModel

@if (Model.Options.Count() <= Model.DisplayItemCount)
{
<style>
    .my-listbox {
        overflow-y:auto; @* スクロールバーを非表示にします。 *@
    }
</style>
}

<form method="post">
    <label asp-for="Destination" class="form-text"></label>
    <select class="form-select mb-3 my-listbox" asp-for="Destination" asp-items="Model.Options" size="@Model.DisplayItemCount"></select>
    <input type="submit" />
</form>

主なCSSクラスの効果

mb-3 下に少し余白(margin)を設けます。→ 余白
form-select inputをBootstrapの外観にします。→ セレクト
form-text 入力項目の説明用の文字列にします。→ フォームテキスト

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

メモ：selectのsizeを省略するとドロップダウン形式になります。

選択肢がグループ化されたリスト

SelectListBoxWithGroup.cshtml.cs

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

namespace WorkStandard.Pages.controls
{
    public class SelectListBoxWithGroupModel : PageModel
    {
        [BindProperty]
        [DisplayName("目的地")]
        public string? Destination { get; set; }

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

        public SelectListBoxWithGroupModel()
        {
            SelectListGroup group1 = new() { Name = "中央線" };
            DestinationOptions.Add(new SelectListItem { Text = "八王子", Group = group1 });
            DestinationOptions.Add(new SelectListItem { Text = "三鷹", Group = group1 });
            DestinationOptions.Add(new SelectListItem { Text = "中野", Group = group1 });

            SelectListGroup group2 = new() { Name = "山手線" };
            DestinationOptions.Add(new SelectListItem { Text = "池袋", Group = group2 });
            DestinationOptions.Add(new SelectListItem { Text = "新宿", Group = group2 });

            SelectListGroup group3 = new() { Name = "田園都市線" };
            DestinationOptions.Add(new SelectListItem { Text = "渋谷", Group = group3 });
            DestinationOptions.Add(new SelectListItem { Text = "二子玉川", Group = group3 });
        }

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

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

SelectListBoxWithGroup.cshtml

@page
@model WorkStandard.Pages.controls.SelectListBoxWithGroupModel

<form method="post">
    <label asp-for="Destination" class="form-text"></label>
    <select class="form-select mb-3 my-listbox" asp-for="Destination" asp-items="Model.DestinationOptions" size="8"></select>
    <input type="submit" />
</form>

主なCSSクラスの効果

mb-3 下に少し余白(margin)を設けます。→ 余白
form-select inputをBootstrapの外観にします。→ セレクト
form-text 入力項目の説明用の文字列にします。→ フォームテキスト

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

メモ：selectのsizeを省略するとドロップダウン形式になります。

これでもできます。

SelectListBoxWithGroup.cshtml.cs

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

namespace WorkStandard.Pages.controls
{
    public class SelectListBoxWithGroupModel : PageModel
    {
        [BindProperty]
        [DisplayName("目的地")]
        public string? Destination { get; set; }

        public SelectList DestinationOptions { get; set; }

        public SelectListBoxWithGroupModel()
        {
            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 = "二子玉川" });

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

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

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

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

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

複数選択のリスト

Windowsの場合、Ctrl を押しながらクリックすることで複数選択できます。

SelectMulti.cshtml.cs

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

namespace WorkStandard.Pages.controls
{
    public class SelectMultiModel : PageModel
    {
        [BindProperty]
        public List<string>? Books { get; set; }

        public SelectList BookOptions { get; set; } = new SelectList(new string[] 
            { "イリアス", "ラーマヤーナ", "雨ニモマケズ","シャー・ナーメ","万葉集", "詩経",
              "アエネーイス","イノック・アーデン","智恵子抄","サラダ記念日" });

        public void OnPost()
        {
            System.Diagnostics.Debug.WriteLine("Books = " + string.Join(",", Books!));
        }
    }
}

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

SelectMulti.cshtml

@page
@model WorkStandard.Pages.controls.SelectMultiModel

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

主なCSSクラスの効果

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

メモ：select要素にsize属性を追加するとスクロールなしで表示できる項目の数を指定できます。

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

English