在 blazor 服务器端选择输入获取选项的文本作为其值 onchange 事件

Question

我在服务器端 blazor 上绑定选择时遇到问题。 onchange 事件传递的是选项文本（标签）。 这是我的选择元素：

<div class="form-group row">
     <div class="form-group col-md-6">
     <label>Role</label>
            <select class="form-control form-control form-control-sm"
                    placeholder="Role"
                    disabled="@IsReadOnly"
                    @onchange="(e) => RoleChanged(e)">
                        <option value="">Select Role...</option>
                        <option value="Member">Member</option>
                        <option value="Admin">Admin</option>
                        <option value="Pioneer">Pioneer</option>
                        <option value="Retailer">Retailer</option>
            </select>
            <ValidationMessage For="@(() => Model.Role)" class="row" />
</div>

在调试 RoleChanged 方法时

当事件被触发时，它将选项文本作为值。 客户端验证也没有触发

Answer 1

重构您的代码以使用表单组件：

<div class="form-group row">
     <div class="form-group col-md-6">
     <label>Role</label>
            <InputSelect class="form-control form-control form-control-sm"
                    placeholder="Role"
                    disabled="@IsReadOnly" Value="Model.Role" ValueChanged="RoleChanged" ValueExpression="@(() => Model.Role)">
                        <option value="">Select Role...</option>
                        <option value="Member">Member</option>
                        <option value="Admin">Admin</option>
                        <option value="Pioneer">Pioneer</option>
                        <option value="Retailer">Retailer</option>
            </InputSelect >
            <ValidationMessage For="@(() => Model.Role)" class="row" />
</div>

// an async method must return Task or ValueTask
private async Task RoleChanged(string value)
{
   // your logic
}