Select box binding in blazor

Question

I am trying to bind CountryId in the model to the value of a selected item of SelectList in Blazor. All of the Country items come in a list like {CountryId, CountryName} object. I do the code like so:

    <InputSelect @bind-Value="model.ByCountryId" class="form-control">         @if (model?.Countries != null)         {            @foreach (var cnt in model.Countries)            {                <option value="@cnt.Id">@cnt.Name</option>            }         }      </InputSelect> 

And code block:

@code {  BrandModel model = new BrandModel();  protected override async Task OnInitializedAsync() {     model = new BrandModel     {         Id = 19,         ByCountryId = 1,         Countries = new List<ent.Country>             {                 new ent.Country { Id = 1, Name = "Azerbaijan" },                 new ent.Country { Id = 2, Name = "Turkey" }             },         IsActive = true,         Name = "Brand"     }; } 

But this execution gives me this error in the browser:

blazor.webassembly.js:1 WASM: System.MissingMethodException: Constructor on type 'System.ComponentModel.ByteConverter' not found.

What is the convenient way of binding <select> and model.data in Blazor?

Answer 1

It works well when I put the <InputSelect> in a <EditForm Model="@model">..</EditForm >and there's no problem in your data binding.

Try to use below code to set <BlazorLinkOnBuild>false</BlazorLinkOnBuild> in the csproj file.

<PropertyGroup>    <BlazorLinkOnBuild>false</BlazorLinkOnBuild> </PropertyGroup> 

Refer to https://github.com/aspnet/AspNetCore/issues/7784

Update:

Use <select> tag instead of <InputSelect> like

<select @bind="model.ByCountryId">         @if (model?.Countries != null)         {             @foreach (var cnt in model.Countries)             {                 <option value="@cnt.Id">@cnt.Name</option>             }         } </select>