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?
Thanks for reading!
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>