Dropdown controls

You must choice a value from list. You can not input freely.

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}");
        }
    }
}

→ Where Debug.WriteLine appear

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>

The CSS classes...

• mb-3 Set little margin at bottom.→ Spacing
• form-select Give the input a Bootstrap look → Select

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

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 = "Mammalian" };
            AnimalOptions.Add(new SelectListItem { Text = "Dog", Group = group1 });
            AnimalOptions.Add(new SelectListItem { Text = "Monkey", Group = group1 });
            AnimalOptions.Add(new SelectListItem { Text = "Lion", Group = group1 });

            SelectListGroup group2 = new() { Name = "Reptiles" };
            AnimalOptions.Add(new SelectListItem { Text = "Crocodile", Group = group2 });
            AnimalOptions.Add(new SelectListItem { Text = "Lizard", Group = group2 });

            SelectListGroup group3 = new() { Name = "Amphibian" };
            AnimalOptions.Add(new SelectListItem { Text = "Frog", Group = group3 });
            AnimalOptions.Add(new SelectListItem { Text = "Newt", Group = group3 });
        }

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

→ Where Debug.WriteLine appear

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>

The CSS classes...

• mb-3 Set little margin at bottom.→ Spacing
• form-select Give the input a Bootstrap look → Select

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

You can also do this.

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 = "Mammalian", Text = "Cat" });
            options.Add(new { Group = "Mammalian", Text = "Lycaon" });
            options.Add(new { Group = "Mammalian", Text = "Tapir" });
            options.Add(new { Group = "Reptiles", Text = "Sneak" });
            options.Add(new { Group = "Reptiles", Text = "Tortoise" });
            options.Add(new { Group = "Amphibian", Text = "Salamander" });
            options.Add(new { Group = "Amphibian", Text = "Siren" });

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

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

→ Where Debug.WriteLine appear

Note: In this sample, you can use your favorite definition of the anonymous type instead of new {Group = ..., Text = ...}. The property names are also your control. 'Group' and 'Text' are just only my idea. You can cahnge property name by the constractor of the SelectList class. If your list items already exists in your program as  structure or classe, this sample may help you.

SelectWithGroup.cshtml is same as previous sample.

Appearance of Edge version 123

Appearance of Chrome version 123

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($"Input value is {Todofuken}");
        }
    }
}

→ Where Debug.WriteLine appear

DataList.cshtml

@page
@model WorkStandard.Pages.controls.DataListModel

<form method="post">
    <label asp-for="Todofuken" class="form-label">Japanese Prefectures</label>
    <input asp-for="Todofuken" list="TodofukenList" class="form-control" />
    <datalist id="TodofukenList">
        <option value="Hokkai-do"></option>
        <option value="Iwate-ken"></option>
        <option value="Miyagi-ken"></option>
        <option value="Akita-ken"></option>
        <option value="Yamagata-ken"></option>
    </datalist>
    <input type="submit" />
</form>

• Clicking Submit with "Select an item..." raises input error.
• User must select item from the list.

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("Nutrients")]
        [Required(ErrorMessage = "Select from {0}.")]
        public string? Nutrition { get; set; }

        public SelectList Options { get; set; } = new (new string[] { "Protein", "Fat", "Carbohydrates" });

        public void OnPost()
        {
            //Server side validation
            if (!ModelState.IsValid)
            {
                // When "Select an item..."is selected and the user avoid client side validation,
                // this validation will work. (maybe the user is maricious)
                return;
            }

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

→ Where Debug.WriteLine appear

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="">Select an item...</option>
        </select>
        <span asp-validation-for="Nutrition" class="text-danger"></span>
    </div>
    <input type="submit" />
</form>

@section Scripts {
    @{
        //Enable client side validation.
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

The CSS classes...

• mb-3 Set little margin at bottom.→ Spacing
• col-sm-4 Let width 4/12. If window width is narrower than 576px(sm), let width 100%.→ Grid system
• form-select Give the input a Bootstrap look → Select

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