Dropdown does not keep the selection

Dmitriy Reznik 236

I have a blazor server-side application with a drop-down on a page:

        <EditForm Model="@_dummyEditModel" class="my-4 dropdown-parts">  
            <InputSelect id="products" @bind-Value="_selectedProductId" class="form-control">  
                <option value="@((short)Product.None)">--Select Product--</option>  
                @foreach (QuoteTypeModel product in _products)  
                        {  
                    <option value="@product.Id">@product.Name</option>  
                        }  
            </InputSelect>  
        </EditForm>

In the code-behind:

            private Product _selectedProductId = Product.None;  
  
            ...  
            public enum Product { None = 0, ShowerPan = 1, LinearDrain = 2, Bench = 3, Niche = 4, Curb = 5 }

When I run the application, and select an element in the drop-down, the selection appears for a moment, and immediately disappears, leaving the selection empty (though _selectedProductId is assigned correctly). When I select the same element again, the selection stays.

If I make the type of _selectedProductId int instead of enum Product, the drop-down works as expected.
How can I fix this behavior?

Rena Ni - MSFT 2,061 Reputation points

2022-06-15T02:57:40.12+00:00

Hi @Dmitriy Reznik , I do not understand why you mix enum Product with model QuoteTypeModel, it does not make sense if you use enum for bind-value. If you want to get the enum text value when you post the form, why not just using <InputSelect @bind-Value="_selectedProductId">@foreach (var gender in Enum.GetValues(typeof(Product))){<option value="@gender">@gender</option>}</InputSelect>. If you want to get the enum int number when you post the form, why not change to int type...
Dmitriy Reznik 236 Reputation points

2022-06-15T12:10:27.857+00:00
Hi @Rena Ni - MSFT
QuoteTypeModel.Id and QuoteTypeModel.Name are received from the database and used to populate the drop-down. _selectedProductId is convenient to have in form of an enum to make its use in the code clear, e.g.

@switch (_selectedProductId) { case Product.ShowerPan: ... break; case Product.LinearDrain: ... break; }

It would be not as clear if I use just numbers.
Rena Ni - MSFT 2,061 Reputation points

2022-06-16T01:14:12.943+00:00

Hi @Dmitriy Reznik , so are the values of QuoteTypeModel.Name same with enum value? If the same, why not using <InputSelect @bind-Value="_selectedProductId">@foreach (var gender in Enum.GetValues(typeof(Product))){<option value="@gender">@gender</option>}</InputSelect>?
Dmitriy Reznik 236 Reputation points

2022-06-16T15:24:32.283+00:00
You are right, the problem was mixing types. The initial option was of type enum Product, and the others were short. So I used cast:

<option value="@((Product)product.Id)">@product.Name</option>

and removed cast from the initial option:

<option value="@Product.None">--Select Product--</option>

And now it works. Thank you for your help.

Though I still don't understand why my original version with casting the initial option value to short did not work...