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

Question

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

<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 方法后

触发事件时获取选项文本作为Value。此外，客户端验证未触发

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
}

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

select input in blazor Server side getting option's text as its value onchange event

asp.net-core

blazor

blazor-server-side

asp.net-blazor