List style controls

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("Destination")]
        public string? Destination { get; set; }

        public SelectList Options { get; set; } = new SelectList(new string[] { 
            "Tokyo", "Yokohama", "Nagoya", "Kyoto", "Osaka", "Hiroshima" 
        });

        //The count of items which appears on the list without scroll. The scroll bar will be shown for more items.
        public int DisplayItemCount { get; set; } = 5;

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

→ Where Debug.WriteLine appear

Misc: These items are part of the Tokaido Shinkansen station. Between Yokohama and Nagoya, you can see the stunning Mt. Fuji from the window.

SelectListBox.cshtml

@page
@model WorkStandard.Pages.controls.SelectListBoxModel

@if (Model.Options.Count() <= Model.DisplayItemCount)
{
<style>
    .my-listbox {
        overflow-y:auto; @* supress scroll bar *@
    }
</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>

The CSS classes...

• mb-3 Set little margin at bottom.→ Spacing
• form-select Give the input a Bootstrap look → Select
• form-text Give the text a Bootstrap look for form item description.→ Form Text

Note：Adding form-select-lg class makes the select larger.

Note: Removing size attribute from select element makes it dropdown-style.

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("Destination")]
        public string? Destination { get; set; }

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

        public SelectListBoxWithGroupModel()
        {
            SelectListGroup group1 = new() { Name = "Chuo-Line" };
            DestinationOptions.Add(new SelectListItem { Text = "Hachioji", Group = group1 });
            DestinationOptions.Add(new SelectListItem { Text = "Mitaka", Group = group1 });
            DestinationOptions.Add(new SelectListItem { Text = "Nakano", Group = group1 });

            SelectListGroup group2 = new() { Name = "Yamanote-Line" };
            DestinationOptions.Add(new SelectListItem { Text = "Ikebukuro", Group = group2 });
            DestinationOptions.Add(new SelectListItem { Text = "Shinjuku", Group = group2 });

            SelectListGroup group3 = new() { Name = "Den-en-toshi-Line" };
            DestinationOptions.Add(new SelectListItem { Text = "Shibuya", Group = group3 });
            DestinationOptions.Add(new SelectListItem { Text = "Futago-Tamagawa", Group = group3 });
        }

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

→ Where Debug.WriteLine appear

Misc: These are stations and its railways in Japan.

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>

The CSS classes...

• mb-3 Set little margin at bottom.→ Spacing
• form-select Give the input a Bootstrap look → Select
• form-text Give the text a Bootstrap look for form item description.→ Form Text

Note：Adding form-select-lg class makes the select larger.

Note: Removing size attribute from select element makes it dropdown-style.

Another solution.

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("Destination")]
        public string? Destination { get; set; }

        public SelectList DestinationOptions { get; set; }

        public SelectListBoxWithGroupModel()
        {
            List<object> options = new();
            options.Add(new { Group = "Chuo-Line", Text = "Hachioji" });
            options.Add(new { Group = "Chuo-Line", Text = "Mitaka" });
            options.Add(new { Group = "Chuo-Line", Text = "Nakano" });
            options.Add(new { Group = "Yamanote-Line", Text = "Ikebukuro" });
            options.Add(new { Group = "Yamanote-Line", Text = "Shinjuku" });
            options.Add(new { Group = "Den-en-toshi-Line", Text = "Shibuya" });
            options.Add(new { Group = "Den-en-toshi-Line", Text = "Futago-Tamagawa" });

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

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

→ Where Debug.WriteLine appear

Note: You can also use structures or classes instead of the anonymous type new {Group = ..., Text = ...} . And the property names 'Group' and 'Text' are not limited to these names. So if there are existing structures or classes to express list-item, you can use them. You can specify property name with the constructor of the SelectList class.

The example of the SelectListBoxWithGroup.cshtml is same as the previous example.

Pressing Ctrl key and click let it select multiple on Windows.

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[] 
            { "Iliad", "Ramayana", "Ame ni mo makezu","Shahnameh","Man'yoshu", "Classic of Poetry",
              "Aeneid","Enoch Arden","Portrait of Chieko","Sarada kinenbi" });

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

→ Where Debug.WriteLine appear

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>

The CSS classes...

• mb-3 Set little margin at bottom.→ Spacing
• form-select Give the input a Bootstrap look → Select
• form-text Give the text a Bootstrap look for form item description.→ Form Text

Note: Adding size attribute to the select element, you can set the count of the items which can be appear without scroll.

Note：Adding form-select-lg class makes the select larger.