Select box binding in blazor
Solution 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>
Solution 2
<InputSelect>
works for me In .NET 5. For every Inputs (text, number, date, select, checkbox etc) I use <EditForm>
with Model
.
<EditForm Model="item">
<InputSelect @bind-Value="item.CountryId">
<option value=""></option>
@foreach (var c in countries)
{
<option value="@c.Id">@c.Name</option>
}
</InputSelect>
</EditForm>
For this example: ItemModel item
has at least property CountryId
and List<CountryModel> countries
has at least properties int Id
and string Name
Emba Ayyub
Updated on July 29, 2022Comments
-
Emba Ayyub almost 2 years
I am trying to bind
CountryId
in the model to the value of a selected item ofSelectList
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>
andmodel.data
in Blazor?