Select box binding in blazor

问题

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!

回答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>

回答2:

I did not try to solve your issues because there are many. Instead I composed code how you can display a list of countries in a select element, and retrieve the selected country code or ID. Please, see how I define a model and how it is used. 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...

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

    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; }

    }
}

来源：https://stackoverflow.com/questions/58485439/select-box-binding-in-blazor

标签

ASP.NET

asp.net-core

blazor