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

Question

I have a problem binding a select on Server side blazor. The passed on the onchange event is the options text(label). Here is my select element:

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

Upon debugging the RoleChanged method

It gets the option text as Value when the event is triggered. Also the client validation is not firing

Client validation works only with built-in ` – agua from mars May 13 '20 at 14:01 — agua from mars, May 13 '20 at 14:01

agua from mars · Accepted Answer · 2020-05-13T14:24:59.813

Refactor you code to use form components :

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

I am doing this while waiting for someone to answer and this actually worked. — ECie, May 13 '20 at 14:29
I guess this answer didn't work for you, right ? https://stackoverflow.com/a/61763542/6152891 — enet, May 13 '20 at 15:09

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

1 Answers1