Blazor中如何创建优质的自定义DropDownList/ComboBox项

问题1：直接传递类对象作为option值的实现方法 #

原生HTML的<option>标签的value属性仅支持字符串类型，无法直接存储C#类对象，你可以使用Blazor内置的InputSelect组件省略手动转换、查询的流程，.NET 5及以上版本的InputSelect原生支持复杂类型绑定，无需手动处理ID转换和列表查询。
示例代码如下：

@page "/dropdownlist"
<h3>DropDownList - ComboBox</h3>

<!-- 直接绑定SelectedTestModel对象，不需要手动处理值转换 -->
<InputSelect class="form-control col-6" @bind-Value="SelectedTestModel">
    <option disabled value="">--SelectName--</option>
    @foreach (var test in TestModelsLst)
    {
        <!-- 直接把test对象赋值给value -->
        <option value="@test">@test.Name</option>
    }
</InputSelect>

@if (SelectedTestModel != null)
{
    <p>Sel TestModel-Obj.Name: @SelectedTestModel.Name</p>
}

@code {
    public TestModel SelectedTestModel;

    // 不需要再写OnSelChange方法手动查询对象

    public List<TestModel> TestModelsLst = new List<TestModel>
    {
        new TestModel("Jonny"),
        new TestModel("Sarah"),
        new TestModel("Tom")
    };

    public class TestModel
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
        public TestModel(string name)
        {
            Id = Guid.NewGuid();
            Name = name;
        }
        // 可选：重写ToString方法自定义选项显示逻辑，不需要就可以去掉
        public override string ToString() => Name;
    }
}

问题2：实现不可选中的占位提示 #

你只需要给默认的占位选项加上disabled属性，就可以禁止用户选中该选项，如果你希望用户点开下拉列表后看不到这个占位项，可以额外加hidden属性：

<!-- 仅禁止选中，点开下拉仍能看到该选项 -->
<option value="" disabled selected>--SelectName--</option>

<!-- 禁止选中，且点开下拉后看不到该选项 -->
<option value="" disabled selected hidden>--SelectName--</option>

这个写法对原生<select>和InputSelect组件都生效。

内容的提问来源于stack exchange，提问作者nogood