如何在 Blazor 中创建一个好的自定义 DropDownList / ComboBox 项目？

如何解决如何在 Blazor 中创建一个好的自定义 DropDownList / ComboBox 项目？

我想在我的 Blazor-Server-App 上使用多个 ComboBox-Styled-Items。我的工作代码如下所示：

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

<select class="form-control col-6" @onchange="@(x => OnSelChange(x.Value.ToString()))">
    <option value="">--SelectName--</option>
    @foreach (var test in TestModelsLst)
    {
        <option value=@test.Id>@test.Name</option>
    }
</select>

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

@code {
    public TestModel SelectedTestModel;

    public void OnSelChange(string guidAsstring)
    {
        SelectedTestModel = TestModelsLst.FirstOrDefault(x => x.Id.ToString() == guidAsstring);
    }

    //---------------

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

问题：

1. 有没有办法通过 Class-Obj.而不是传递 Guid->string->SearchinLst -> 选择 Obj。例如：<option value=@test> @test.Name </option>（没有 valueStuff）

2. 如果我的代码没问题。困扰我的一件事是，我无法像在 EditForms 中那样使用占位符 =“--SelectName--”。在我的解决方案中，用户现在可以选择选项 --SelectName--。

谢谢

解决方法

有没有办法通过 Class-Obj。而不是传递 Guid->string->SearchinLst -> 选择 Obj。例如。： @test.Name（没有 valueStuff）

没有。 option 元素的 value 属性不能是对象。

如果我的代码没问题。困扰我的一件事是，我无法像在 EditForms 中那样使用占位符 =“--SelectName--”。在我的解决方案中，用户现在可以选择选项 --SelectName--。

如果我理解正确，以下可能会解决它（请参阅 --SelectName-- 选项的属性）...

<select class="form-control col-6" @onchange="@(x => OnSelChange(x.Value.ToString()))">
    <option value="" disabled selected hidden>--SelectName--</option>
    @foreach (var test in TestModelsLst)
    {
        <option value=@test.Id>@test.Name</option>
    }
</select>