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

Question

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

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