Select box binding in blazor

user_12023694 0
Viewed 70848

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?

blazor asp.net-core asp.net c#
4 Answers

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

This is an example on how one can display a list of countries in a select element, and retrieve the selected country code or ID.

<select class="form-control" @bind="@SelectedCountryID">

    <option value=""></option>
    @foreach(var country in CountryList)
    {
        <option value = "@country.Code"> @country.Name </option >
    }
}

</select>

<p>@SelectedCountryID</p>

Code block

@code {

    string selectedCountryID;

    string SelectedCountryID
    {
        get => selectedCountryID;
        set
        {
            selectedCountryID = value;

        }
    }

    List<Country> CountryList = new List<Country>() { new Country ("USA", "United States"),
                                                      new Country ("UK", "United Kingdom") };

    public class Country
    {

        public Country(string code, string name)
        {
            Code = code;
            Name = name;
        }
        public string Code { get; set; }
        public string Name { get; set; }

    }
}

This code is suitable to be integrated with other select elements to form cascading dropdown experience (a list of cities that is populated after selecting a country, etc.). Just copy the code snippet to your Index.razor file and execute it...

Admin1

<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

user_120310170

Working fine in Core 6 using API in blazor

<InputSelect @bind-Value="patientCreateDTO.DoctorId" class="form-control" id="doctorid">
    <option value="">--Select--</option>
    @foreach(var doctor in doctorslist)
    {
        <option value="@doctor.Id">@doctor.Doctor_name</option>
    }
</InputSelect>

and here is the code

private List<DoctorReadDTO> doctorslist = new();

// ...

protected override async Task OnInitializedAsync()
{
    var response = await dService.GetDoctor();
    if (response.Success)
    {
        doctorslist = response.Data;
    }
}
user_95210090
Related